Clew

Cara membuat product tour lewat Google Tag Manager tanpa developer

Oleh · diperbarui

Walkthrough terpandu lewat Google Tag Manager dalam sekitar dua puluh menit: pasang satu baris, telusuri antarmuka Anda sendiri di editor visual, lalu publikasikan tur yang dimulai tepat di tempat pengguna baru membutuhkannya.

Waktu
● 20 menit
Harga
Paket Free
Siapa yang mengerjakan
Siapa pun yang bisa publish di GTM

Contoh: product tour lewat Google Tag Manager

SaaS analitik merilis pembuat laporan baru, tetapi tidak mendapat waktu developer untuk onboarding. Lewat GTM, tim produk menambahkan tur 4 langkah di /app/reports: pilih rentang tanggal, pilih metrik, simpan tampilan, bagikan. Tampil untuk semua orang, sekali.

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 membuat product tour lewat Google Tag Manager, langkah demi langkah

  1. 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>
    Ringkasan di admin Clew dengan baris embed dan kunci situs yang disamarkan (product tour lewat Google Tag Manager)
    Langkah 1 · ilustrasi skematis
  2. 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.

    Tag Custom HTML di Google Tag Manager dengan skrip Clew ditempel (product tour lewat Google Tag Manager)
    Langkah 2 · ilustrasi skematis
  3. Langkah 03

    Jalankan di All Pages

    Di Triggering pilih All Pages lalu simpan. Muat di semua halaman: di halaman mana product tour tampil diatur di Clew, bukan di GTM.

    Daftar trigger GTM dengan All Pages dipilih (product tour lewat Google Tag Manager)
    Langkah 3 · ilustrasi skematis
  4. 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.

    Dialog Submit Changes di GTM dengan tombol Publish (product tour lewat Google Tag Manager)
    Langkah 4 · ilustrasi skematis
  5. Langkah 05

    Susun tur langsung di halaman Anda

    Di Clew buka Alur → + Alur baru, biarkan Format pada Tooltip langkah demi langkah, lalu klik Edit di situs Anda. Di halaman Anda klik Pilih elemen, klik elemen untuk langkah 1, lalu tulis judul dan satu atau dua kalimat. Ulangi untuk 3–5 langkah; pratinjau diperbarui saat Anda mengetik.

    Tooltip product tour menunjuk tombol di aplikasi web, dengan titik langkah dan tombol Berikutnya (product tour lewat Google Tag Manager)
    Langkah 5 · ilustrasi skematis
  6. 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:

    PengaturanNilai
    FormatTooltip langkah demi langkah
    Di mana ditampilkan (URL halaman)Bagian berdasarkan prefiks /app/reports
    Kapan ditampilkanLangsung saat halaman dimuat
    Target audiensTanpa aturan: semua yang membuka halaman
    FrekuensiSekali per pengunjung
    Editor tur Clew dengan format, aturan URL, pemicu, dan aturan audiens (product tour lewat Google Tag Manager)
    Langkah 6 · ilustrasi skematis
  7. 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.

    Ringkasan di admin Clew dengan kartu hijau widget aktif (product tour lewat Google Tag Manager)
    Langkah 7 · ilustrasi skematis

Jebakan umum: product tour 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.

Tautkan langkah ke elemen yang dilihat semua orang

Banner, blok personal, dan varian A/B test tidak dilihat semua orang. Pakai navigasi, judul, dan tombol utama; jika elemen tidak ditemukan, langkah itu muncul di Kesehatan.

Tanya jawab

Bisakah tur hanya tampil untuk admin?

Bisa, dengan aturan audiens pada properti seperti role yang dikirim dari data layer — aturan termasuk dalam Pro.

Apakah GTM memperlambat product tour?

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 product tour gratis?

Ya: tur ada di paket Free dengan hingga 3 yang dipublikasikan. Anda hanya butuh Pro untuk aturan audiens, A/B test, dan tur yang lebih banyak.

Apakah saya perlu paham selector CSS?

Tidak. Edit di situs Anda membuka editor di halaman Anda dan Pilih elemen mengisi selector saat Anda mengeklik elemen.

Yang juga bisa ditambahkan lewat Google Tag Manager

Product tour di platform lain

Cara membuat product tour tanpa developerGoogle Tag Manager: panduan pemasanganHarga

Satu baris di situs Anda — lalu tur, tooltip, dan checklist tanpa rilis.

Dapatkan kunci situs gratisCara kerja ClewPaket gratis selamanya, tanpa kartu kredit

Product tour, popup, dan onboarding di era AI

7 pola lengkap dengan jumlah langkah, aturan teks, dan metrik, apa yang diubah AI, serta checklist sebelum terbit. PDF, 2 halaman. Isi panduan →

Panduannya dalam bahasa Inggris.