Popup, tur, dan checklist lewat Google Tag Manager
Jika situs Anda sudah memakai Google Tag Manager, tim marketing bisa menambahkan popup, tur produk, dan checklist onboarding tanpa satu rilis pun: pasang Clew sekali sebagai tag Custom HTML, lalu buat semuanya di editor Clew.
- Waktu
- ● 10 menit
- Siapa yang mengerjakan
- Siapa saja yang bisa memublikasikan di container GTM
- Langkah
- 8
Langkah demi langkah
- Langkah 01
Salin kode Anda dari Clew
Daftar atau masuk ke Clew, lalu buka Admin → Ringkasan. Selama widget belum terhubung, halaman ini menampilkan kartu “Belum ada sinyal dari widget.” berisi baris milik Anda — klik untuk menyalin. Bentuknya seperti kode di bawah, tetapi dengan kunci situs asli.
<!-- 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
Buka container dan buat tag
Buka tagmanager.google.com, pilih container yang terpasang di situs Anda, lalu klik Tags → New (di antarmuka berbahasa Indonesia: Tag → Baru). Periksa nama container: banyak tim punya container terpisah untuk staging dan produksi.
Langkah 2 · ilustrasi skematis - Langkah 03
Pilih jenis tag Custom HTML
Beri nama tag di bagian atas, misalnya
Clew widget. Klik Tag Configuration lalu pilih Custom HTML di grup Custom. Di antarmuka berbahasa Indonesia, namanya HTML Khusus.
Langkah 3 · ilustrasi skematis - Langkah 04
Tempel barisnya
Tempel baris dari langkah 1 ke kolom HTML. Biarkan Support document.write tidak dicentang — Clew tidak membutuhkannya.
Langkah 4 · ilustrasi skematis - Langkah 05
Jalankan di All Pages
Klik Triggering, pilih All Pages (jenis Page View), lalu klik Save. Tag harus dimuat di semua halaman: Clew sendiri yang menentukan di halaman mana dan untuk siapa tur ditampilkan.
Langkah 5 · ilustrasi skematis - Langkah 06
Cek di Preview
Klik Preview (Pratinjau), masukkan URL situs Anda, lalu hubungkan. Di Tag Assistant,
Clew widgetharus muncul di Tags Fired. Jika muncul di Tags Not Fired, periksa kembali trigger-nya.
Langkah 6 · ilustrasi skematis - Langkah 07
Kirim dan publikasikan
Kembali ke workspace, klik Submit (Kirim), beri nama versi, misalnya
Tambah widget Clew, lalu klik Publish (Publikasikan). Sebelum dipublikasikan, situs live tidak berubah apa pun.
Langkah 7 · ilustrasi skematis - Langkah 08
Pastikan sudah berfungsi
Buka halaman mana saja di situs Anda dengan jendela browser biasa, lalu kembali ke Admin → Ringkasan di Clew. Dalam satu menit kartunya berubah hijau: “Widget sudah aktif.” Sekarang Anda bisa membuat tur pertama langsung di atas situs.
Langkah 8 · ilustrasi skematis
Yang perlu diketahui tentang GTM
Consent Mode
Jika container memakai Consent Mode, buka Advanced Settings → Consent Settings pada tag dan atur sesuai kebijakan privasi Anda. Tag yang menunggu persetujuan baru berjalan setelah pengunjung setuju.
Beberapa situs dalam satu container
Setiap situs di Clew punya kunci sendiri. Jika satu container melayani beberapa domain, buat satu tag per situs dan ganti All Pages dengan trigger Page View berkondisi Page Hostname equals domain Anda.
Belum ada GTM di situs?
Memasang GTM sendiri berarti menambahkan kodenya ke setiap halaman — usahanya sama dengan memasang Clew langsung. Gunakan panduan website builder atau panduan asisten AI.
Masalah umum dan FAQ
Custom HTML atau template dari galeri?
Custom HTML. Tag ini menjalankan baris resmi persis seperti yang diberikan Clew, dan tidak ada yang perlu diperbarui nantinya.
Apakah Clew bekerja berbeda jika dipasang lewat GTM?
Tidak. Widget dimuat sesaat setelah container GTM, lalu bekerja sama seperti pemasangan langsung: penargetan, analitik, dan editor visual tetap berfungsi.
Admin masih menampilkan “Belum ada sinyal dari widget.”
Buka salah satu halaman situs yang sudah live di jendela browser biasa, lalu muat ulang admin setelah satu menit. Jika tidak berubah: pastikan perubahan sudah dipublikasikan, bukan hanya disimpan; placeholder sudah diganti dengan kunci asli; lalu di developer tools browser, tab Network, cari widget/…js — statusnya harus 200. Status 404 berarti kuncinya salah.
Situs saya memakai Content Security Policy
Dua direktif, tidak lebih: script-src https://tryclew.io dan connect-src https://tryclew.io. Widget tidak memakai eval, URL blob:, maupun worker, dan memasang stylesheet-nya lewat CSSOM alih-alih sebagai markup, jadi style-src 'unsafe-inline' tidak diperlukan di Chrome, Edge, Firefox 101+, atau Safari 16.4+. Browser lama memakai elemen <style> sebagai cadangan: kalau Anda masih mendukungnya dan style-src Anda tanpa 'unsafe-inline', di sana tur tampil tanpa gaya. Siap salin: Content-Security-Policy: script-src 'self' https://tryclew.io; connect-src 'self' https://tryclew.io;
Bisakah saya mengunci versi widget dan memakai <code>integrity=</code>?
Bisa. Baris di panduan — /widget/TEMPEL_KUNCI_SITUS_ANDA.js — bersifat bergulir: selalu menyajikan widget terkini, sehingga tidak bisa membawa hash Subresource Integrity (byte-nya berubah). Di sampingnya, setiap versi juga disajikan di alamat permanen dengan hash konten. Panggil https://tryclew.io/api/v1/widget-version?site=KUNCI_ANDA dan Anda mendapat version, path serta integrity; pasang keduanya di tag: <script src="https://tryclew.io/widget/v/<versi>/KUNCI_ANDA.js" integrity="sha384-…" crossorigin="anonymous" async></script>. URL yang dikunci tidak pernah berubah, jadi browser menolak berkas itu bila satu byte pun berbeda. Versinya Anda perbarui kapan Anda mau — panggil endpoint yang sama dari skrip deploy. Selain itu tidak ada yang berubah: tur tetap dipublikasikan dari editor Clew tanpa menyentuh situs.
Apakah pemblokir iklan menelan widget-nya?
Tidak. Domain kami tidak ada di daftar besar mana pun — EasyList, EasyPrivacy, AdGuard, uBlock Origin — jadi tur, tooltip, dan checklist tetap muncul untuk pengunjung yang memakai pemblokir. Yang peka adalah statistik: EasyPrivacy memblokir semua permintaan ping pihak ketiga, karena itu widget mengirim event-nya sebagai permintaan biasa, yang dilewatkan daftar-daftar tersebut. Agar benar-benar lepas dari daftar khusus buatan siapa pun, sajikan widget dari domain Anda sendiri: arahkan https://situs-anda/clew/* ke https://tryclew.io/* di CDN atau nginx, lalu ganti barisnya menjadi <script src="/clew/widget/KUNCI_ANDA.js" async></script>. Widget kemudian memanggil API dengan prefiks yang sama dan semuanya menjadi first-party.
Apakah berfungsi di single-page app (React, Vue, Next.js)?
Ya. Muat baris ini sekali saja, di HTML root atau layout root. Widget mengikuti sendiri perpindahan rute di sisi klien (History API dan perubahan hash), jadi jangan menambahkannya per rute atau memicunya dengan trigger “History Change” — salinan kedua akan diabaikan, tetapi tetap membuang sumber daya.
Bagaimana dengan banner persetujuan cookie?
Clew menyimpan cookie pihak pertama dan data di localStorage untuk mengingat tur mana yang sudah diselesaikan pengunjung dan menghitung penyelesaiannya. Tidak ada data yang dikirim ke jaringan iklan. Boleh tidaknya widget berjalan sebelum persetujuan ditentukan oleh kebijakan privasi Anda; jika alat persetujuan memblokirnya sampai pengunjung setuju, tur akan mulai setelah persetujuan diberikan.
Saya memakai plugin cache atau optimasi
Bersihkan cache setelah memasang; jika tidak, pengunjung tetap mendapat halaman lama tanpa baris tersebut. Jika plugin menunda, menggabungkan, atau mengakhirkan JavaScript (WP Rocket, LiteSpeed Cache, Autoptimize, Cloudflare Rocket Loader), kecualikan tryclew.io/widget dari optimasi tersebut.
Apakah situs jadi lebih lambat?
Tidak. Baris ini memakai async: browser mengunduh widget secara paralel dan menjalankannya tanpa memblokir halaman. Widget tidak memiliki dependensi.
Bisakah aplikasi saya memberi tahu Clew bahwa satu langkah onboarding selesai?
Bisa, dan cukup satu baris. Item checklist dapat memiliki aturan yang mencentangnya tanpa pengunjung mengeklik apa pun: halaman yang ia buka, klik pada elemen yang Anda tentukan dengan selektor CSS, atau event yang dipicu kode Anda sendiri — Clew.complete('invited'), dengan invited sebagai kunci yang Anda tulis di sebelah item itu di editor. Panggil saat tugasnya benar-benar selesai, misalnya setelah API Anda mengonfirmasi undangan. Aman dipanggil kapan saja dan mengembalikan false bila tidak ada checklist dengan kunci itu di halaman. Nama lama TutorKit tetap berfungsi.
Cara lain untuk memasang
Asisten coding AI
Satu prompt untuk Claude Code, Cursor, Lovable, Bolt.new, v0, dan Replit yang menaruh baris kode di file root yang tepat.
Buka panduan →Tanpa kodeWebsite builder & CMS
WordPress, Webflow, Shopify, Wix, Squarespace, Framer, Tilda, atau HTML biasa: letak kolom kode head dan tombol yang perlu diklik.
Buka panduan →