Cara menambahkan tooltip ke situs Anda lewat Google Tag Manager tanpa developer
Petunjuk kontekstual lewat Google Tag Manager: satu kalimat di samping elemen yang membuat pengunjung ragu, dipasang dengan satu klik di editor visual dan ditampilkan tepat saat dibutuhkan.
- Waktu
- ● 10 menit
- Harga
- Paket Free
- Siapa yang mengerjakan
- Siapa pun yang bisa publish di GTM
Contoh: tooltip lewat Google Tag Manager
Di halaman pengaturan sebuah SaaS, tab API key sering memicu pertanyaan ke support. Tooltip menjelaskan “Kunci hanya ditampilkan sekali — simpan di password manager Anda” setiap kali seseorang mengeklik tab dengan data-tour="api-keys".
Gratis di paket Free Clew, tanpa kartu dan tanpa batas waktu: satu situs dan hingga 3 tur atau tooltip yang dipublikasikan. Aturan audiens dan A/B test tersedia di Pro.
Cara menambahkan tooltip lewat Google Tag Manager, langkah demi langkah
- Langkah 01
Salin snippet Clew Anda
Buat akun gratis (atau masuk), tambahkan situs Anda, lalu buka Ringkasan di admin. Klik baris pada kartu Belum ada sinyal dari widget. untuk menyalinnya: baris itu sudah berisi kunci situs asli Anda, bukan placeholder.
<!-- Clew: ganti TEMPEL_KUNCI_SITUS_ANDA dengan kunci situs dari Admin > Ringkasan --> <script src="https://tryclew.io/widget/TEMPEL_KUNCI_SITUS_ANDA.js" async></script>
Langkah 1 · ilustrasi skematis - Langkah 02
Buat tag Custom HTML di GTM
Di tagmanager.google.com buka container Anda, Tags → New → Tag Configuration → Custom HTML, lalu tempel baris Clew. Beri nama tag
Clew widget.
Langkah 2 · ilustrasi skematis - Langkah 03
Jalankan di All Pages
Di Triggering pilih All Pages lalu simpan. Muat di semua halaman: di halaman mana tooltip tampil diatur di Clew, bukan di GTM.
Langkah 3 · ilustrasi skematis - Langkah 04
Preview, lalu Submit dan Publish
Pastikan di Preview bahwa
Clew widgetada di Tags Fired, lalu Submit → Publish. Tidak ada yang berubah di situs live sebelum dipublikasikan.
Langkah 4 · ilustrasi skematis - Langkah 05
Tempelkan tooltip ke elemen
Di Clew buka Alur → + Alur baru, biarkan Tooltip langkah demi langkah, lalu klik Edit di situs Anda. Di halaman Anda klik Pilih elemen, klik kolom atau tombolnya, lalu tulis judul singkat dan satu kalimat. Atur Posisi jika posisi otomatis menutupi sesuatu yang penting.
Langkah 5 · ilustrasi skematis - Langkah 06
Tentukan di mana, kapan, dan untuk siapa tampil
Di editor yang sama, isi Di mana ditampilkan (URL halaman), Kapan ditampilkan, Target audiens, dan Frekuensi. Ini pengaturan untuk contoh di atas:
Pengaturan Nilai Format Tooltip langkah demi langkah Di mana ditampilkan (URL halaman) Bagian berdasarkan prefiks /settingsKapan ditampilkan Saat elemen diklik: [data-tour="api-keys"]Target audiens Tanpa aturan: semua yang membuka halaman Frekuensi Setiap kunjungan 
Langkah 6 · ilustrasi skematis - Langkah 07
Publikasikan dan cek di situs live
Ubah Status menjadi Terbit lalu simpan. Buka halaman di jendela privat: Clew mengingat siapa yang sudah melihat item “sekali”, jadi browser yang biasa Anda pakai mungkin melewatinya. Tayangan, penyelesaian, dan titik berhenti muncul di statistik.
Langkah 7 · ilustrasi skematis
Jebakan umum: tooltip lewat Google Tag Manager
Jangan pakai trigger History Change
Widget mengikuti navigasi single-page dengan sendirinya. Trigger kedua pada History Change hanya memuat skrip lagi tanpa guna.
Consent Mode bisa menundanya
Jika container memakai Consent Mode dan tag menunggu persetujuan, tooltip baru muncul setelah pengunjung menyetujui. Putuskan sesuai kebijakan privasi Anda.
Utamakan id dan atribut data
Jika Pilih elemen menyarankan rangkaian class yang panjang, pilih elemen induk terdekat yang punya id atau minta atribut data-tour — selector yang stabil membuat petunjuk bertahan setelah pembaruan tema.
Tanya jawab
Kenapa setiap kali?
Karena ini bantuan, bukan pengumuman: dengan Saat elemen diklik dan Setiap kunjungan, tooltip hanya muncul saat pengguna membuka tab itu.
Apakah GTM memperlambat tooltip?
Widget dimuat sesaat setelah container. Hanya item dengan Langsung saat halaman dimuat pada tampilan halaman paling pertama yang mungkin muncul sepersekian detik lebih lambat dibanding pemasangan langsung.
Apakah tooltip gratis?
Ya, di paket Free — hingga 3 tur dan tooltip yang dipublikasikan di satu situs.
Bisakah petunjuk hanya terbuka saat diklik?
Bisa. Pilih Saat elemen diklik, isi selector ikon atau tautan yang membukanya, lalu atur Setiap kunjungan.
Yang juga bisa ditambahkan lewat Google Tag Manager
- Cara menambahkan popup ke situs Anda lewat Google Tag Manager tanpa developer
- Cara membuat product tour lewat Google Tag Manager tanpa developer
- Cara menambahkan checklist onboarding lewat Google Tag Manager tanpa developer
- Cara menyiapkan onboarding pengguna lewat Google Tag Manager tanpa developer
- Cara membuat panduan produk interaktif lewat Google Tag Manager tanpa developer
- Cara menambahkan paywall upgrade lewat Google Tag Manager tanpa developer