Cara menambahkan checklist onboarding lewat Google Tag Manager tanpa developer

Oleh Andrey Davydov · diperbarui 18 September 2026

Checklist onboarding lewat Google Tag Manager: empat tugas, progress bar, dan setiap item hanya satu klik dari layar yang tepat — diatur di editor Clew, tanpa pekerjaan front-end.

Waktu: ● 15 menit
Harga: Uji coba gratis 14 hari, tanpa kartu
Siapa yang mengerjakan: Siapa pun yang bisa publish di GTM

Contoh: checklist onboarding lewat Google Tag Manager

SaaS B2B mengirim plan ke data layer. Pengguna uji coba di /app melihat “Siapkan akun Anda”: hubungkan sumber data, buat dashboard, undang rekan, jadwalkan onboarding. Tag GTM kedua meneruskan paket ke Clew:

<script>window.TutorKit = window.TutorKit || { q: [], identify: function (p) { this.q.push(['identify', p]); } };
TutorKit.identify({ plan: '{{DLV - plan}}' });</script>

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 menambahkan checklist onboarding 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.
```

<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 checklist onboarding tampil diatur di Clew, bukan di GTM.
Langkah 3 · ilustrasi skematis
Langkah 04
Preview, lalu Submit dan Publish
Pastikan di Preview bahwa Clew widget ada di Tags Fired, lalu Submit → Publish. Tidak ada yang berubah di situs live sebelum dipublikasikan.
Langkah 4 · ilustrasi skematis
Langkah 05
Tulis item checklist di Clew
Di Clew buka Alur → + Alur baru dan pilih Checklist onboarding. Isi Judul checklist, lalu tambahkan 3–5 Item checklist: judul berupa aksi, satu baris penjelasan, dan di URL link halaman tempat tugas dikerjakan. Tidak perlu selector.
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	Checklist onboarding
Di mana ditampilkan (URL halaman)	Bagian berdasarkan prefiks `/app`
Kapan ditampilkan	Langsung saat halaman dimuat
Target audiens	Properti `plan` sama dengan `trial`
Frekuensi	Sekali per pengunjung

Editor tur Clew dengan format, aturan URL, pemicu, dan aturan audiens (checklist onboarding lewat Google Tag Manager) — 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: checklist onboarding 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.

Kirim properti pengguna dengan tag kedua

Jika data layer Anda berisi nilai seperti plan, buat Data Layer Variable dan tag Custom HTML kedua yang memanggil Clew.identify() dengan variabel itu (lihat contoh). Jalankan pada event yang membawa nilainya, setelah tag Clew.

Tag manager tidak tahu siapa penggunanya

Untuk menargetkan berdasarkan paket atau peran lewat tag manager, aplikasi Anda harus sudah mengirim nilai itu ke data layer. Jika belum, pakai aturan berdasarkan cookie yang diset aplikasi, atau tampilkan checklist di halaman yang hanya dilihat pengguna baru.

Satu daftar dalam satu waktu

Selama checklist terbuka, widget tidak memulai tur lain saat navigasi. Pakai checklist untuk fase setup dan biarkan pengguna menutupnya; tur di halaman lain dimulai setelahnya.

Tanya jawab

Bagaimana jika data layer tidak berisi paket?

Tampilkan checklist tanpa aturan di halaman yang hanya dibuka pengguna uji coba, atau targetkan cookie yang sudah diset aplikasi.

Apakah GTM memperlambat checklist onboarding?

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.

Bisakah GTM membaca paket pengguna?

Hanya jika situs mengirimkannya ke data layer. Setelah itu Data Layer Variable meneruskannya ke Clew.identify() di tag Custom HTML.

Apakah checklist onboarding gratis?

Checklist termasuk dalam Pro. Setiap akun baru mendapat uji coba 14 hari dengan checklist dan aturan audiens, tanpa kartu. Setelah uji coba berakhir, checklist yang dipublikasikan tetap tampil.

Apakah item tercentang otomatis?

Item tercentang saat pengguna mengekliknya (tautannya terbuka di tab baru). Centang otomatis berdasarkan event aplikasi belum tersedia.

Cara menambahkan checklist onboarding lewat Google Tag Manager tanpa developer

Contoh: checklist onboarding lewat Google Tag Manager

Cara menambahkan checklist onboarding lewat Google Tag Manager, langkah demi langkah

Salin snippet Clew Anda

Buat tag Custom HTML di GTM

Jalankan di All Pages

Preview, lalu Submit dan Publish

Tulis item checklist di Clew

Tentukan di mana, kapan, dan untuk siapa tampil

Publikasikan dan cek di situs live