Panduan Lengkap Custom Events dan Goals Tracking di PrivacyTrack.id

Kenapa Custom Events Penting

Tracking pageview saja tidak cukup. Untuk benar-benar memahami perilaku user, kamu perlu track apa yang mereka lakukan di halaman: klik tombol, submit form, add to cart, video play, scroll depth, dll.

Di artikel ini, kami tunjukkan cara track custom events di PrivacyTrack.id — dari basic sampai advanced — plus cara setup goals untuk conversion tracking.

Konsep Dasar

Event vs Goal

• Event: action yang user lakukan (klik, submit, dll.)
• Goal: event tertentu yang kamu define sebagai "conversion" (purchase, signup, dll.)

Semua goal adalah event, tapi tidak semua event adalah goal.

Anatomy of a Custom Event

Di PrivacyTrack.id, tiap event punya struktur:

pt('event_name', {
  property1: 'value1',
  property2: 123,
  // ...
})

• event_name: nama event (string, max 200 char)
• properties: object dengan data tambahan (max 10KB total)

10 Event Paling Umum untuk Track

1. Button Click

document.getElementById('cta-button').addEventListener('click', () => {
  pt('cta_click', { button: 'hero-cta', page: location.pathname })
})

2. Form Submission

document.querySelector('form#contact').addEventListener('submit', () => {
  pt('form_submit', { form: 'contact', source: 'landing-page' })
})

3. Newsletter Signup

pt('newsletter_signup', { list: 'weekly-tips' })

4. Add to Cart (E-commerce)

pt('add_to_cart', {
  sku: 'PROD_001',
  name: 'Kaos Distro',
  price: 150000,
  quantity: 1
})

5. Begin Checkout

pt('begin_checkout', {
  cart_value: 450000,
  items: 3
})

6. Purchase Complete

pt('purchase', {
  transaction_id: 'ORD_12345',
  value: 450000,
  currency: 'IDR',
  items: 3
})

7. Video Play

document.querySelector('video').addEventListener('play', () => {
  pt('video_play', { video: 'intro', duration: 120 })
})

8. Scroll Depth

let tracked = { 25: false, 50: false, 75: false, 100: false }
window.addEventListener('scroll', () => {
  const percent = Math.round((window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100)
  for (const threshold of [25, 50, 75, 100]) {
    if (percent >= threshold && !tracked[threshold]) {
      tracked[threshold] = true
      pt('scroll_depth', { depth: threshold, page: location.pathname })
    }
  }
})

9. File Download

document.querySelectorAll('a[href$=".pdf"]').forEach(link => {
  link.addEventListener('click', () => {
    pt('file_download', { file: link.href.split('/').pop(), type: 'pdf' })
  })
})

10. Outbound Link Click

document.querySelectorAll('a[href^="http"]').forEach(link => {
  if (!link.href.includes(location.hostname)) {
    link.addEventListener('click', () => {
      pt('outbound_click', { url: link.href, text: link.textContent })
    })
  }
})

Setup Goals di Dashboard

Setelah kamu kirim custom events, ubah beberapa di antaranya menjadi goals untuk tracking conversion:

Step 1: Buka Dashboard Goals

Dashboard → pilih site → Goals tab → + New Goal

Step 2: Configure Goal

• Name: "Purchase Complete"
• Type:

- Page Goal: conversion kalau user mencapai URL tertentu

- Event Goal: conversion kalau event tertentu fire

• Value: URL (untuk page goal) atau event name (untuk event goal)
• Monetary value (optional): Rp yang dihasilkan per conversion

Step 3: Save & Monitor

Goal akan mulai tracking dari timestamp dibuat. Data historis tidak di-retroactive (belum).

Setup Funnel Analysis

Funnel memungkinkan kamu lihat di step mana user drop-off:

Contoh: Funnel Checkout E-commerce

Step 1: Event add_to_cart

Step 2: Event begin_checkout

Step 3: Event payment_info_entered

Step 4: Event purchase

Di dashboard → Funnels tab → Create Funnel, pilih steps di atas. PrivacyTrack.id pakai ClickHouse windowFunnel untuk tracking ordering yang presisi.

Hasil yang kamu dapat:

• Berapa user yang masuk step 1
• Berapa yang maju ke step 2, 3, 4
• Conversion rate per step
• Overall funnel conversion rate
• Waktu rata-rata per step

Cara Membaca Funnel

Kalau funnel kamu:

• Step 1 → Step 2: 80% (bagus)
• Step 2 → Step 3: 40% (WARNING — banyak drop-off)
• Step 3 → Step 4: 90% (bagus)

Insight: step 2 → 3 bermasalah. Mungkin form kompleks, atau user bingung. Fix di sini dulu.

Best Practices Custom Events

1. Gunakan Naming Convention Konsisten

• ❌ buttonClick, button_click, click-button (campur aduk)
• ✅ button_click (snake_case, konsisten)

2. Prefix Event Name dengan Konteks

• ❌ click
• ✅ nav_click, cta_click, product_click

3. Simpan Properties yang Actionable

• ❌ { random_data: '...' }
• ✅ { category: 'hero', position: 'top' }

4. Jangan Simpan PII

• ❌ { email: '[email protected]' }
• ❌ { full_name: 'Budi Santoso' }
• ✅ { user_type: 'registered', tier: 'pro' }

UU PDP ketat soal ini — jangan track nama, email, HP di event properties.

5. Limit Jumlah Unique Event Names

Idealnya 10-30 event name. Kalau sudah 100+, berarti terlalu granular — susah dianalisa.

6. Document Event Schema

Maintain spreadsheet atau wiki internal:

Advanced: Auto-tracking Helpers

Untuk framework modern, kamu bisa auto-track:

React

import { useEffect } from 'react'

function CTAButton({ label, onClick }) {
  return (
    <button
      onClick={() => {
        window.pt?.('cta_click', { label })
        onClick?.()
      }}
    >
      {label}
    </button>
  )
}

Vue

<template>
  <button @click="handleClick">{{ label }}</button>
</template>

<script setup>
const props = defineProps(['label'])
function handleClick() {
  window.pt?.('cta_click', { label: props.label })
}
</script>

Debugging Events

1. Browser Console

Buka DevTools → Console. Setiap event yang fire akan log:

[PrivacyTrack] event: purchase, props: { id: 'T_123', value: 150000 }

*(Kalau debug mode aktif — set data-debug="true" di script tag)*

2. Real-time Tab

Dashboard → Live tab. Event yang baru fire muncul dalam 1-2 detik.

3. Events Tab

Dashboard → Events tab. List semua event dalam rentang waktu dipilih.

Kesimpulan

Custom events adalah kekuatan sebenarnya dari analytics. Tracking pageview saja memberikan gambar permukaan — custom events memberikan insight yang actionable untuk improve product dan conversion.

Dengan PrivacyTrack.id:

• ✅ Track unlimited custom events (paket Pro)
• ✅ Setup goals dengan conversion tracking
• ✅ Funnel analysis multi-step dengan ordering preservation
• ✅ Semua tanpa cookie, patuh UU PDP

Coba gratis → — mulai track 10 events pertama dalam 10 menit.

Dokumentasi lengkap: privacytrack.id/docs/install.