Paano gumawa ng interactive product guide gamit ang Google Tag Manager nang walang developer
Help guide na nagpapakita sa halip ng nagsasalaysay gamit ang Google Tag Manager: checklist ng mga how-to na paksa, bawat isa ay nagbubukas ng tamang page at gumagabay gamit ang tooltip.
- Oras
- ● 30 minuto
- Presyo
- 14-araw na free trial, walang card
- Sino ang gagawa
- Sinumang maaaring mag-publish sa GTM
Halimbawa: interactive guide gamit ang Google Tag Manager
Marketing automation SaaS ay tumatanggap ng parehong tanong tungkol integration bawat linggo. Nagbubukas ang checklist na “Paano…” sa Help button (data-tour="help"); ang paksang gaya ng “Ikonekta ang CRM” ay nagbubukas ng /app/integrations?tutorial=connect-crm at nagsisimula roon ang tour.
Ang format na ito ay bahagi ng Pro plan. Bawat bagong account ay nagsisimula sa 14-araw na free trial na may lahat na format at audience rules, walang card. Kapag nagtapos ang trial, walang nabubura at patuloy na ipinapakita ang mga naka-publish; nananatiling libre ang mga tour at tooltip sa Free plan.
Paano gumawa ng interactive guide gamit ang Google Tag Manager, step by step
- Step 01
Kopyahin ang inyong Clew snippet
Gumawa ng libreng account (o mag-sign in), idagdag ang inyong site at buksan ang Buod sa admin. I-click ang line sa card na Walang signal mula sa widget pa. para kopyahin: nasa loob na ang tunay na site key sa halip ng placeholder.
<!-- 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
Gumawa ng Custom HTML tag sa GTM
Sa tagmanager.google.com buksan ang inyong container, Tags → New → Tag Configuration → Custom HTML, at i-paste ang line ng Clew. Pangalanan ang tag na
Clew widget.
Step 2 · eskematikong ilustrasyon - Step 03
I-fire sa All Pages
Sa Triggering piliin ang All Pages at i-save. I-load sa lahat na page: ang page kung saan lalabas ang interactive product guide ay itinatakda sa Clew, hindi sa GTM.
Step 3 · eskematikong ilustrasyon - Step 04
Preview, pagkatapos Submit at Publish
Tiyakin sa Preview na ang
Clew widgetay nasa Tags Fired, pagkatapos Submit → Publish. Walang nagbabago sa live na site bago i-publish.
Step 4 · eskematikong ilustrasyon - Step 05
Gawin ang mga tour, pagkatapos ang guide checklist
Unang gawin ang isang Step-by-step na tooltip tour bawat paksa gamit ang I-edit sa iyong site at Pumili ng element, at itala ang Slug (ginagamit sa link) ng bawat tour. Pagkatapos gumawa ng Onboarding checklist: isang item bawat paksa, at sa URL ng link ang address ng page plus
?tutorial=at ang slug ng tour.
Step 5 · eskematikong ilustrasyon - Step 06
Piliin kung saan, kailan at para kanino ipapakita
Sa parehong editor, sagutan ang Saan ipakita (URL ng page), Kailan ipakita, Pag-target ng audience at Frequency. Ito ang mga setting ng halimbawa sa itaas:
Setting Value Checklist Format Onboarding checklist Saan ipakita (URL ng page) Seksyon ayon sa prefix /appKailan ipakita Kapag i-click ang element: [data-tour="help"]Pag-target ng audience Walang rule: lahat na nagbukas sa page Frequency Bawat pagbisita Product tour Format Step-by-step na tooltip Saan ipakita (URL ng page) Seksyon ayon sa prefix /app/integrationsKailan ipakita Kaagad kapag nag-load ang page Pag-target ng audience Walang rule: lahat na nagbukas sa page Frequency Minsan bawat bisita 
Step 6 · eskematikong ilustrasyon - Step 07
I-publish at tingnan sa live na site
Itakda ang Status sa Naka-publish at i-save. Buksan ang page sa private window: tinatandaan ng Clew kung sino ang nakakita na ng item na “minsan”, kaya maaaring hindi ito ipakita sa inyong karaniwang browser. Ang mga view, completion at drop-off ay nasa stats.
Step 7 · eskematikong ilustrasyon
Mga dapat iwasan: interactive product guide gamit ang Google Tag Manager
Huwag gumamit ng History Change trigger
Sinusundan ng widget ang single-page navigation nang kusa. Ang ikalawang trigger sa History Change ay naglo-load muli ng script nang walang saysay.
Panatilihin ang mga query parameter
Ilang site ay nag-redirect at nag-aalis ng query string (halimbawa, pinipilit ang trailing slash). Buksan ang bawat link ng paksa nang minsan: kung nawala ang ?tutorial= sa address bar, i-link ang final na URL.
Kailangan ng stable na selector ang help button
Nakikinig ang Kapag i-click ang element sa mga click sa selector na inilagay. Gumamit ng id o data-tour attribute sa help button, hindi class na maaaring palitan ng pangalan kapag binago ang style.
Mga tanong at sagot
Maaari bang magpadala ang support ng tour link sa chat?
Maaari: anumang link na may ?tutorial=<slug> sa page na may widget ay nagsisimula ng tour.
Pinapabagal ba ng GTM ang interactive product guide?
Naglo-load ang widget sandali pagkatapos ng container. Ang item na Kaagad kapag nag-load ang page sa pinakaunang page view lamang ay maaaring lumabas nang kaunting huli kaysa direktang install.
Magkano?
Libre ang mga tour; ang guide checklist ay bahagi ng Pro. Bawat bagong account ay may 14-araw na trial para sa dalawa, walang card.
Maaari bang kusang ipakita ang parehong tour sa mga bagong user?
Maaari. Ang tour na binuksan gamit ang ?tutorial= ay hindi sumusunod sa mga rule nito, kaya ang parehong tour ay maaari pa may sariling URL rule at Minsan bawat bisita para sa mga unang bisita.
Iba pang maaaring idagdag gamit ang Google Tag Manager
- Paano magdagdag ng popup sa inyong website gamit ang Google Tag Manager nang walang developer
- Paano gumawa ng product tour gamit ang Google Tag Manager nang walang developer
- Paano magdagdag ng onboarding checklist gamit ang Google Tag Manager nang walang developer
- Paano i-set up ang user onboarding gamit ang Google Tag Manager nang walang developer
- Paano magdagdag ng tooltip sa inyong website gamit ang Google Tag Manager nang walang developer
- Paano magdagdag ng paywall upgrade prompt gamit ang Google Tag Manager nang walang developer