Popup, tour at checklist gamit ang Google Tag Manager
Kung may Google Tag Manager na ang inyong site, maaaring magdagdag ang marketer ng popup, product tour at onboarding checklist nang walang anumang release: i-install ang Clew nang minsan bilang Custom HTML tag, at gawin ang lahat sa editor ng Clew.
- Oras
- ● 10 minuto
- Sino ang gagawa
- Sinumang may Publish access sa GTM container
- Mga step
- 8
Step by step
- Step 01
Kopyahin ang inyong code mula sa Clew
Mag-sign up o mag-sign in sa Clew at buksan ang Admin → Buod. Habang hindi pa kumokonekta ang widget, ipinapakita ang card na “Walang signal mula sa widget pa.” na may inyong line — i-click para kopyahin. Mukhang tulad ng code sa ibaba, pero may totoong site key.
<!-- Clew: palitan ang ILAGAY_ANG_SITE_KEY ng site key mula sa Admin > Buod --> <script src="https://tryclew.io/widget/ILAGAY_ANG_SITE_KEY.js" async></script>
Step 1 · eskematikong ilustrasyon - Step 02
Buksan ang container at gumawa ng tag
Pumunta sa tagmanager.google.com, buksan ang container na naka-install sa inyong site, at i-click ang Tags → New. Suriin ang pangalan ng container: maraming team ay may hiwalay na container para staging at production.
Step 2 · eskematikong ilustrasyon - Step 03
Piliin ang Custom HTML tag type
Pangalanan ang tag sa itaas, halimbawa
Clew widget. I-click ang Tag Configuration at piliin ang Custom HTML sa grupong Custom.
Step 3 · eskematikong ilustrasyon - Step 04
I-paste ang line
I-paste ang line mula sa step 1 sa field na HTML. Iwanang hindi naka-check ang Support document.write — hindi kailangan ng Clew.
Step 4 · eskematikong ilustrasyon - Step 05
I-fire sa All Pages
I-click ang Triggering, piliin ang All Pages (type Page View) at i-click ang Save. Ang tag ay dapat maglo-load sa lahat na page: ang Clew mismo ay nagpapasya sa aling page, at para kanino, ipinapakita ang tour.
Step 5 · eskematikong ilustrasyon - Step 06
I-check sa Preview
I-click ang Preview, ilagay ang URL ng site at kumonekta. Sa Tag Assistant, ang
Clew widgetay dapat nasa Tags Fired. Kung nasa Tags Not Fired, suriin muli ang trigger.
Step 6 · eskematikong ilustrasyon - Step 07
I-submit at i-publish
Bumalik sa workspace, i-click ang Submit, pangalanan ang version, halimbawa
Add Clew widget, at i-click ang Publish. Hangga’t hindi na-publish, walang pagbabago sa live na site.
Step 7 · eskematikong ilustrasyon - Step 08
Tiyakin na gumagana
Buksan ang anumang page ng site sa karaniwang browser window, at bumalik sa Admin → Buod sa Clew. Sa loob ng isang minuto, luntian ang card: “Live ang widget.” Maaari nang gumawa ng unang tour direkta sa ibabaw ng inyong site.
Step 8 · eskematikong ilustrasyon
Mahalagang impormasyon tungkol sa GTM
Consent Mode
Kung gumagamit ng Consent Mode ang container, buksan ang Advanced Settings → Consent Settings ng tag at itakda ayon sa inyong privacy policy. Ang tag na naghihintay ng consent ay tumatakbo lamang pagkatapos pumayag ang bisita.
Maraming site sa isang container
Ang bawat site sa Clew ay may sariling key. Kung ang isang container ay para sa maraming domain, gumawa ng isang tag para bawat site at gumamit ng Page View trigger na may kondisyong Page Hostname equals inyong domain sa halip ng All Pages.
Walang GTM pa sa site?
Ang pag-install ng GTM ay nangangailangan ng pagdagdag ng code nito sa bawat page — parehong trabaho sa direktang pag-install ng Clew. Gamitin ang gabay para website builder o ang gabay para AI assistant.
Mga karaniwang problema at FAQ
Custom HTML o template mula sa gallery?
Custom HTML. Pinapatakbo nito ang opisyal na line nang eksakto gaya ng ibinibigay ng Clew, at walang kailangang i-update pagkatapos.
Nagbabago ba ang Clew kapag naka-install gamit ang GTM?
Hindi. Ang widget ay naglo-load sandali pagkatapos ng container, at pagkatapos ay gumagana tulad ng direktang install: targeting, analytics at visual editor.
Ang admin ay nagpapakita pa ng “Walang signal mula sa widget pa.”
Buksan ang isang page ng live na site sa karaniwang browser window at i-reload ang admin pagkalipas ng isang minuto. Kung walang pagbabago: tiyakin na na-publish ang pagbabago, hindi lamang na-save; na pinalitan ang placeholder ng inyong totoong key; at sa developer tools ng browser, tab na Network, hanapin ang widget/…js — dapat 200 ang status. Ang 404 ay nangangahulugang maling key.
Ang aming site ay may Content Security Policy
Dalawang direktiba lang: script-src https://tryclew.io at connect-src https://tryclew.io. Hindi gumagamit ang widget ng eval, blob: URL o worker, at inilalagay nito ang stylesheet sa pamamagitan ng CSSOM sa halip na bilang markup, kaya hindi na kailangan ang style-src 'unsafe-inline' sa Chrome, Edge, Firefox 101+ o Safari 16.4+. Sa mas lumang browser, babalik ito sa <style> element: kung sinusuportahan mo pa ang mga iyon at walang 'unsafe-inline' ang style-src mo, doon lalabas ang mga tour nang walang estilo. Kopyahin ito: Content-Security-Policy: script-src 'self' https://tryclew.io; connect-src 'self' https://tryclew.io;
Puwede bang i-pin ang bersyon ng widget at gumamit ng <code>integrity=</code>?
Oo. Ang linya sa mga gabay — /widget/ILAGAY_ANG_SITE_KEY.js — ay ang rolling na URL: palaging kasalukuyang widget ang ibinibigay nito, kaya hindi ito puwedeng bigyan ng Subresource Integrity hash (nagbabago ang mga byte). Kasama nito, bawat bersyon ay ibinibigay din sa isang hindi nagbabagong address na may hash ng nilalaman. Tanungin ang https://tryclew.io/api/v1/widget-version?site=IYONG_KEY at makukuha mo ang version, path at integrity; ilagay ang dalawa sa tag: <script src="https://tryclew.io/widget/v/<version>/IYONG_KEY.js" integrity="sha384-…" crossorigin="anonymous" async></script>. Hindi nagbabago ang naka-pin na URL, kaya tatanggihan ng browser ang file kung may isang byte na naiba. Ikaw ang magpapasya kung kailan mag-update ng bersyon — tanungin ang parehong endpoint sa deploy script mo. Wala nang ibang nagbabago: ang mga tour ay nananatiling inilalabas sa editor ng Clew nang hindi ginagalaw ang site.
Kinakain ba ng ad blocker ang widget?
Hindi. Wala ang domain namin sa alinman sa malalaking listahan — EasyList, EasyPrivacy, AdGuard, uBlock Origin — kaya lumalabas pa rin ang mga tour, tooltip at checklist sa mga bisitang may blocker. Mas maselan ang estadistika: hinaharangan ng EasyPrivacy ang lahat ng third-party na ping na request, kaya ipinapadala ng widget ang mga event nito bilang karaniwang request, na pinapayagan ng mga listahang iyon. Para lubusang makalayo sa kahit anong pasadyang blocklist, ihain ang widget mula sa sarili mong domain: ituro ang https://iyong-site/clew/* sa https://tryclew.io/* sa CDN o nginx mo at palitan ang linya ng <script src="/clew/widget/IYONG_KEY.js" async></script>. Hihingi na ang widget sa API sa ilalim ng parehong prefix at magiging first-party ang lahat.
Gumagana ba sa single-page app (React, Vue, Next.js)?
Gumagana. I-load ang line nang minsan, sa root HTML o root layout. Sinusundan ng widget ang mga pagbabago ng route sa client (History API at pagbabago ng hash), kaya huwag idagdag ito sa bawat route o i-fire gamit ang “History Change” trigger — ang ikalawang kopya ay binabalewala, pero sayang na trabaho.
Kumusta ang cookie consent banner?
Nagtatago ang Clew ng first-party cookie at mga entry sa localStorage para tandaan kung aling mga tour ang kinumpleto ng bisita at bilangin ang mga pagkumpleto. Walang data na ipinapadala sa mga ad network. Ang inyong privacy policy ang nagpapasya kung maaaring tumakbo ito bago ang consent (halimbawa, ayon sa Data Privacy Act); kung hinaharangan ito ng consent tool hanggang pumayag ang bisita, ang mga tour ay magsisimula pagkatapos ng pagpayag.
Gumagamit kami ng caching o optimization plugin
I-clear ang cache pagkatapos ng pag-install; kung hindi, patuloy na makatatanggap ang mga bisita ng lumang page na walang line. Kung ang plugin ay nag-delay, nag-combine o nag-defer ng JavaScript (WP Rocket, LiteSpeed Cache, Autoptimize, Cloudflare Rocket Loader), i-exclude ang tryclew.io/widget sa mga optimization na iyon.
Mabagal ba ang site dahil dito?
Hindi. Ang line ay may async: dina-download ng browser ang widget nang parallel at pinapatakbo nang hindi hinaharangan ang page. Walang dependency ang widget.
Puwede bang sabihin ng app ko sa Clew na tapos na ang isang hakbang ng onboarding?
Oo, at isang linya lang. Ang item ng checklist ay puwedeng may rule na nagte-tsek nito nang hindi nagki-click ang bisita: isang page na narating niya, isang click sa element na itinuturo mo sa pamamagitan ng CSS selector, o isang event na pinapaputok ng sarili mong code — Clew.complete('invited'), kung saan ang invited ay ang key na isinulat mo katabi ng item sa editor. Tawagin ito sa sandaling talagang tapos na ang bagay, halimbawa pagkatapos kumpirmahin ng API mo ang imbitasyon. Ligtas itong tawagin anumang oras at nagbabalik ng false kapag walang checklist na may ganoong key sa page. Gumagana pa rin ang lumang pangalang TutorKit.
Iba pang paraan ng pag-install
AI coding assistant
Isang prompt para Claude Code, Cursor, Lovable, Bolt.new, v0 at Replit na naglalagay ng line sa tamang root file.
Buksan ang gabay →No-codeWebsite builder at CMS
WordPress, Webflow, Shopify, Wix, Squarespace, Framer, Tilda o plain HTML: kung saan ang head code field at ang dapat i-click.
Buksan ang gabay →