Cara membuat panduan produk interaktif lewat Google Tag Manager tanpa developer
Bantuan yang menunjukkan, bukan sekadar menjelaskan, lewat Google Tag Manager: checklist berisi topik praktis, masing-masing membuka halaman yang tepat dan memandu pengguna dengan tooltip.
- Waktu
- ● 30 menit
- Harga
- Uji coba gratis 14 hari, tanpa kartu
- Siapa yang mengerjakan
- Siapa pun yang bisa publish di GTM
Contoh: panduan interaktif lewat Google Tag Manager
SaaS otomasi marketing menerima pertanyaan integrasi yang sama setiap minggu. Checklist “Bagaimana cara…” terbuka saat tombol bantuan (data-tour="help") diklik; topik seperti “Hubungkan CRM” membuka /app/integrations?tutorial=connect-crm dan tur dimulai di sana.
Format ini termasuk dalam paket Pro. Setiap akun baru dimulai dengan uji coba gratis 14 hari dengan semua format dan aturan audiens, tanpa kartu. Setelah uji coba berakhir, tidak ada yang dihapus dan yang sudah dipublikasikan tetap tampil; tur dan tooltip tetap gratis di paket Free.
Cara membuat panduan interaktif 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 panduan produk interaktif 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
Buat turnya dulu, lalu checklist panduan
Pertama buat satu tur Tooltip langkah demi langkah per topik dengan Edit di situs Anda dan Pilih elemen, lalu catat Slug (dipakai di link) setiap tur. Kemudian buat Checklist onboarding: satu item per topik, dan di URL link isi alamat halaman ditambah
?tutorial=dan slug turnya.
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 Checklist Format Checklist onboarding Di mana ditampilkan (URL halaman) Bagian berdasarkan prefiks /appKapan ditampilkan Saat elemen diklik: [data-tour="help"]Target audiens Tanpa aturan: semua yang membuka halaman Frekuensi Setiap kunjungan Tur produk Format Tooltip langkah demi langkah Di mana ditampilkan (URL halaman) Bagian berdasarkan prefiks /app/integrationsKapan ditampilkan Langsung saat halaman dimuat Target audiens Tanpa aturan: semua yang membuka halaman Frekuensi Sekali per pengunjung 
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: panduan produk interaktif 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.
Jaga parameter URL tetap utuh
Sebagian situs melakukan redirect dan membuang parameter (misalnya saat memaksa garis miring di akhir). Buka setiap tautan topik sekali: jika ?tutorial= hilang dari address bar, tautkan ke URL akhirnya.
Tombol bantuan butuh selector yang stabil
Saat elemen diklik mendengarkan klik pada selector yang Anda isi. Pakai id atau atribut data-tour pada tombol bantuan, bukan class yang bisa berganti nama saat gaya diubah.
Tanya jawab
Bisakah tim support mengirim tautan tur lewat chat?
Bisa: tautan apa pun dengan ?tutorial=<slug> ke halaman yang berisi widget akan memulai tur itu.
Apakah GTM memperlambat panduan produk interaktif?
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.
Berapa biayanya?
Tur gratis; checklist panduan termasuk dalam Pro. Setiap akun baru mendapat uji coba 14 hari untuk keduanya, tanpa kartu.
Bisakah tur yang sama tampil otomatis untuk pengguna baru?
Bisa. Tur yang dibuka dengan ?tutorial= mengabaikan aturannya, jadi tur yang sama tetap bisa punya aturan URL sendiri dan Sekali per pengunjung untuk pengunjung pertama kali.
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 menambahkan tooltip ke situs Anda lewat Google Tag Manager tanpa developer
- Cara menambahkan paywall upgrade lewat Google Tag Manager tanpa developer