Clew

Paano magdagdag ng tooltip sa inyong website gamit ang Google Tag Manager nang walang developer

Contextual hint gamit ang Google Tag Manager: isang pangungusap sa tabi ng element kung saan nag-aalinlangan ang mga bisita, inilalagay sa isang click sa visual editor at ipinapakita kapag tumutulong.

Oras
● 10 minuto
Presyo
Free plan
Sino ang gagawa
Sinumang maaaring mag-publish sa GTM

Halimbawa: tooltip gamit ang Google Tag Manager

Sa settings page ng SaaS, ang API keys tab ay nagdudulot ng tanong sa support. Ipinapaliwanag ng tooltip “Ipinapakita ang key nang minsan — i-save sa inyong password manager” tuwing nag-click sa tab na may data-tour="api-keys".

Libre sa Free plan ng Clew, walang card at walang expiry: isang site at hanggang 3 na naka-publish na tour o tooltip. Ang audience rules at A/B test ay nasa Pro.

Paano magdagdag ng tooltip gamit ang Google Tag Manager, step by step

  1. 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>
    Buod sa Clew admin na may embed line at nakatagong site key (tooltip gamit ang Google Tag Manager)
    Step 1 · eskematikong ilustrasyon
  2. 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.

    Custom HTML tag sa Google Tag Manager na may naka-paste na Clew script (tooltip gamit ang Google Tag Manager)
    Step 2 · eskematikong ilustrasyon
  3. 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 tooltip ay itinatakda sa Clew, hindi sa GTM.

    Listahan ng trigger sa GTM na may napiling All Pages (tooltip gamit ang Google Tag Manager)
    Step 3 · eskematikong ilustrasyon
  4. Step 04

    Preview, pagkatapos Submit at Publish

    Tiyakin sa Preview na ang Clew widget ay nasa Tags Fired, pagkatapos Submit → Publish. Walang nagbabago sa live na site bago i-publish.

    Submit Changes dialog sa GTM na may Publish button (tooltip gamit ang Google Tag Manager)
    Step 4 · eskematikong ilustrasyon
  5. Step 05

    Ikabit ang tooltip sa element

    Sa Clew buksan ang Mga flow → + Bagong flow, iwan ang Step-by-step na tooltip at i-click ang I-edit sa iyong site. Sa inyong page i-click ang Pumili ng element, i-click ang field o button, at isulat ang maikling title at isang pangungusap. Itakda ang Posisyon kung ang awtomatikong posisyon ay tumatakip sa mahalagang bagay.

    Tooltip bubble sa tabi ng form field sa website, may maikling paliwanag (tooltip gamit ang Google Tag Manager)
    Step 5 · eskematikong ilustrasyon
  6. 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:

    SettingValue
    FormatStep-by-step na tooltip
    Saan ipakita (URL ng page)Seksyon ayon sa prefix /settings
    Kailan ipakitaKapag i-click ang element: [data-tour="api-keys"]
    Pag-target ng audienceWalang rule: lahat na nagbukas sa page
    FrequencyBawat pagbisita
    Tour editor ng Clew na may format, URL rule, trigger at audience rule (tooltip gamit ang Google Tag Manager)
    Step 6 · eskematikong ilustrasyon
  7. 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.

    Buod sa Clew admin na may berdeng card ng live na widget (tooltip gamit ang Google Tag Manager)
    Step 7 · eskematikong ilustrasyon

Mga dapat iwasan: tooltip 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.

Maaaring antalain ng Consent Mode

Kung gumagamit ang container ng Consent Mode at naghihintay ang tag ng consent, lalabas ang tooltip kapag pumayag ang bisita. Magpasya ayon sa inyong privacy policy.

Piliin ang id at data attribute

Kung nagmumungkahi ang Pumili ng element ng mahabang serye ng class, piliin ang pinakamalapit na parent na may id o hilingin ang data-tour attribute: ang stable na selector ay nagpapanatili ng hint sa mga update ng theme.

Mga tanong at sagot

Bakit tuwing pagkakataon?

Dahil ito ay tulong, hindi anunsyo: gamit ang Kapag i-click ang element at Bawat pagbisita, lumalabas kapag bubuksan ng user ang tab na iyon lamang.

Pinapabagal ba ng GTM ang tooltip?

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.

Libre ba ang tooltip?

Libre, sa Free plan: hanggang 3 na naka-publish na tour at tooltip sa isang site.

Maaari bang buksan ang hint sa click lamang?

Maaari. Piliin ang Kapag i-click ang element, ilagay ang selector ng icon o link na nagbubukas nito, at itakda ang Bawat pagbisita.

Isang line sa inyong site — pagkatapos, mga tour, tooltip at checklist nang walang release.

Kunin ang site key nang librePaano gumagana ang ClewLibreng plan habambuhay, walang credit card

Product tours, popups at onboarding sa panahon ng AI

7 pattern na may bilang ng hakbang, tuntunin sa copy at dapat sukatin, ang binabago ng AI, at checklist bago mag-publish. PDF, 2 pahina. Ano ang laman →

Nasa English ang gabay.