devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Audit Situs

Generator Script Event Tracking — Lacak Klik dengan Data Attributes

Lacak klik tombol, link, dan submit form dengan menambahkan attributes tanpa perlu menulis kode: data-track="sign_up_click" ditambah parameter data-track-* jika perlu. Satu script kecil mengirim setiap event ke tools yang kamu pakai, seperti GA4, Google Tag Manager, Meta Pixel, Plausible, PostHog, Mixpanel, Umami, Fathom, atau Microsoft Clarity. Script ini juga bisa melacak link keluar, unduhan file, serta klik email dan telepon secara otomatis. Dibuat khusus untuk custom attributes di Webflow, dan tetap bisa dipakai di situs apa pun.

Diperbarui

Sebelum </body> — atau Webflow Footer code


    
Tambahkan attributes ke elemen
Di Webflow: pilih tombol → panel Settings → Custom attributes → name data-track, value sign_up_click. Tambahkan attribute lain untuk parameter.

    
Coba

      
      
Klik tombolnya — event akan muncul di sini, bukan dikirim.

  

  


    
 Data kamu tidak pernah meninggalkan komputer kamu. Semua proses berjalan 100% secara lokal di browser kamu.
Apakah alat ini membantu?0.0 0 penilaian

    
    
    Buat kode event GA4 dengan cepatPilih event rekomendasi atau nama sendiri, isi parameter dan item, lalu salin kode gtag() atau dataLayer.push().Generator Kode Event GA4 →
    
    

      
Cara menggunakan Generator Script Event Tracking
  1. Centang tools analytics yang sudah dimuat di situsmu, lalu pilih event otomatis yang ingin kamu lacak.
  2. Salin script ke kode footer situsmu (Webflow: Site settings → Custom code → Footer code).
  3. Tambahkan data-track="nama_event" ke tombol, link, atau form mana pun, lalu tambahkan atribut data-track-* untuk parameternya.
  4. Gunakan Coba untuk melihat event yang terkirim. Setelah itu publish situsmu dan cek hasilnya di live view tool analytics kamu.


Cara kerjanya


Script ini memasang listener sekali di seluruh halaman, sehingga elemen yang ditambahkan belakangan juga ikut terlacak, misalnya daftar CMS, tab, atau popup. Saat seseorang mengklik elemen dengan data-track (atau elemen di dalamnya), script membaca nama event dan semua atribut data-track-* sebagai parameter. Misalnya data-track-location="hero" akan menjadi location: "hero". Pada <form>, event dikirim saat form disubmit, bukan setiap kali diklik. Nilai field tidak pernah dibaca, jadi tidak ada data pribadi yang ikut terkirim.


Data yang diterima setiap tool


  • GA4: gtag('event', name, params). Tag Manager: dataLayer.push({ event: name, ...params }).
    • 

  • Meta Pixel: fbq('track', …) untuk event standar seperti Lead atau Contact (atur dengan data-track-meta="Lead"), selain itu menggunakan trackCustom.
    • 

  • Plausible, Umami, PostHog, Mixpanel, dan Fathom menerima pemanggilan event tersendiri dengan nama dan properti yang sama. Clarity menerima custom event untuk memfilter rekaman.


Event otomatis memakai nama dari GA4, yaitu click dengan outbound: true untuk link keluar dan file_download untuk unduhan. Dengan begitu event tersebut sejalan dengan Enhanced Measurement jika kamu juga memakainya. Matikan salah satunya agar tidak terhitung dua kali. Tool yang tidak terpasang di halaman akan dilewati tanpa pesan error. Untuk membuat event satu per satu secara manual, gunakan GA4 Event Code Generator.
Juga dicari sebagai: script event tracking, script tracking klik, tracking klik data attribute, event tracking webflow, lacak klik tombol google analytics, tracking klik ga4, tracking link keluar, tracking submit form ga4.
Tool yang cocok dipakai bersama Generator Script Event Tracking
  • Generator Kode Google Tag — Masukkan ID pengukuran GA4, ID Google Ads, atau ID container Tag Manager, lalu dapatkan kode instalasi yang siap ditempel, dengan default Consent Mode v2, penautan lintas domain, mode debug, tampilan halaman manual, dan pengaturan cookie yang hanya aktif saat kamu membutuhkannya.
  • Generator Banner Cookie — Tambahkan banner cookie consent ke situs apa pun — Webflow, WordPress, Shopify, atau HTML biasa — tanpa plugin berbayar.
  • Generator dataLayer Push — Susun kode dataLayer.push() untuk Google Tag Manager: pilih event rekomendasi GA4 atau event buatanmu sendiri, tambahkan parameter dan item ecommerce, lalu opsional bungkus dengan listener klik atau submit form — tinggal tempel.
  • Pengecek Tag & Pixel — Masukkan URL untuk menemukan setiap tag analitik, pixel iklan, dan tag manager di halaman tersebut, lengkap dengan ID-nya, apa saja yang dimuat di dalam Google Tag Manager, tool cookie consent, serta tag verifikasi Search Console dan Bing.
Pertanyaan yang sering diajukan
Bagaimana cara melacak klik tombol di Webflow?
Tempel script ke Site settings → Custom code → Footer code. Lalu pilih tombol, buka panel Settings, dan tambahkan custom attribute bernama data-track dengan nama event sebagai nilainya. Publish situsmu, dan klik tersebut akan terkirim ke tool analytics kamu.
Apakah ini berfungsi untuk link yang membuka halaman baru?
Untuk GA4, ya. Tag Google mengirim data lewat transport beacon browser, yang tetap selesai meskipun halaman berpindah. Tool lain mengirim sesuai cara script mereka sendiri, dan sebagian besar tetap sempat selesai. Link yang dibuka di tab baru selalu aman.
Apakah nilai field form juga ikut terkirim?
Tidak. Script hanya membaca atribut data-track yang kamu atur pada form itu sendiri, dan tidak pernah membaca apa yang diketik pengunjung.
Apakah saya tetap perlu kode bawaan dari tool analytics?
Ya. Script ini memanggil tool yang sudah terpasang. Pasang Google Analytics terlebih dahulu dengan Google Tag Snippet Generator.
Bisakah saya memasang Generator Script Event Tracking sebagai aplikasi web dan memakainya offline?
Bisa. Generator Script Event Tracking adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.

      
    

    
    
Tool terkait
localGenerator Kode Event GA4Pilih event GA4 yang direkomendasikan — generate_lead, sign_up, purchase, add_to_cart, dan lainnya — atau…localGenerator Kode Google TagMasukkan ID pengukuran GA4, ID Google Ads, atau ID container Tag Manager, lalu dapatkan kode instalasi…localGenerator Banner CookieTambahkan banner cookie consent ke situs apa pun — Webflow, WordPress, Shopify, atau HTML biasa — tanpa…localGenerator dataLayer PushSusun kode dataLayer.push() untuk Google Tag Manager: pilih event rekomendasi GA4 atau event buatanmu…apiPengecek Tag & PixelMasukkan URL untuk menemukan setiap tag analitik, pixel iklan, dan tag manager di halaman tersebut,…localGenerator UTMTambahkan utm_source, utm_medium, utm_campaign dan parameter lainnya ke link apa pun, lihat channel GA4…