Custom Events & Conversion Tracking

Mở đầu

GA4 tự động track page_view, scroll, click. Nhưng những interactions quan trọng nhất cho leduykhuong.com — user search bài viết, đổi theme, chuyển ngôn ngữ — GA4 không tự biết. Đó là lý do cần custom events.

Custom events cho phép anh track bất kỳ interaction nào quan trọng cho business. Và khi một event đặc biệt quan trọng (ví dụ: user subscribe newsletter), anh có thể mark nó là conversion — GA4 sẽ optimize reporting quanh event đó.

Mục tiêu: Hiểu cách implement custom events trong leduykhuong.com, naming conventions của GA4, và cách setup conversions.

Custom Events trên leduykhuong.com

Event Registry

// lib/analytics.ts
export const ANALYTICS_EVENTS = {
  SEARCH_USED: "search_used",
  THEME_TOGGLE: "theme_toggle",
  LANGUAGE_SWITCH: "language_switch",
  EXTERNAL_LINK_CLICK: "external_link_click",
} as const;

4 custom events, mỗi event track một user interaction cụ thể:

Event	Khi nào fire	Properties	Business value
`search_used`	User dùng Pagefind search	`{ query: "..." }`	Content discoverability
`theme_toggle`	User đổi light/dark theme	`{ theme: "dark" }`	UX preferences
`language_switch`	User đổi vi/en	`{ language: "en" }`	Audience composition
`external_link_click`	User click link ngoài site	`{ url: "...", text: "..." }`	Outbound traffic

Implementation Pattern

// Trong component
import { trackEvent, ANALYTICS_EVENTS } from "@/lib/analytics";
 
// Search component
function handleSearch(query: string) {
  // ... search logic ...
  trackEvent(ANALYTICS_EVENTS.SEARCH_USED, { query });
}
 
// Theme toggle
function toggleTheme() {
  const newTheme = currentTheme === "dark" ? "light" : "dark";
  setTheme(newTheme);
  trackEvent(ANALYTICS_EVENTS.THEME_TOGGLE, { theme: newTheme });
}

Pattern: Action → Side effect (analytics) → KHÔNG block user flow. Analytics luôn là fire-and-forget.

GA4 Event Naming Conventions

Google khuyến nghị naming convention cho events:

Rules

Snake_case — search_used, không phải searchUsed hoặc SearchUsed
Lowercase — page_view, không phải Page_View
Max 40 ký tự — Event name
Max 25 custom parameters per event
Max 500 distinct events per property

Recommended Events

Google define danh sách "recommended events" — events có tên chuẩn mà GA4 hiểu sâu hơn:

Recommended Event	Ý nghĩa	leduykhuong.com dùng?
`login`	User đăng nhập	Không (no auth)
`sign_up`	User đăng ký	Không (no auth)
`search`	User tìm kiếm	Có thể đổi `search_used` → `search`
`share`	User share content	Chưa
`select_content`	User chọn content	Chưa

Lưu ý: search_used trên leduykhuong.com KHÔNG dùng recommended event search. Nếu đổi sang search (recommended), GA4 sẽ:

Tự hiểu parameter search_term
Hiển thị search data trong built-in reports
Enable Search Terms report

Trade-off: Dùng recommended name = better GA4 integration. Dùng custom name = explicit và self-documenting.

Event Parameters — Chi tiết hóa event

Mỗi event có thể kèm parameters (key-value pairs):

trackEvent("search_used", {
  query: "agentic ai",          // What they searched
  results_count: 5,             // How many results
  source: "header_searchbar",   // Where they searched from
});

Parameter Types

Type	Ví dụ	GA4 limit
String	`query: "agentic"`	Max 100 ký tự value
Number	`results_count: 5`	Numeric
Boolean	(convert to string)	GA4 không support boolean native

Custom Dimensions & Metrics

Để parameter hiện trong GA4 reports, anh cần register chúng:

GA4 Admin → Custom definitions → Create custom dimension:

Dimension name: "Search query"
Event parameter: query
Scope: Event

Sau khi register, query xuất hiện trong reports và Explorations.

Giới hạn free tier: 50 custom dimensions, 50 custom metrics per property. Đủ cho hầu hết use cases.

Conversions — Đo Success

Conversion = event quan trọng nhất mà anh muốn optimize. Trong GA4:

Vào GA4 Admin → Events
Tìm event → toggle "Mark as conversion"
Done — GA4 bắt đầu track event đó như conversion

Conversions cho Personal Blog

Potential Conversion	Event	Tại sao quan trọng
Newsletter subscribe	`newsletter_subscribe`	Direct audience building
Search usage	`search_used`	Content engagement depth
Read 3+ articles in session	`engaged_reader`	Quality audience
External link click (GitHub)	`external_link_click`	Professional visibility

Hiện tại: leduykhuong.com chưa setup conversions. Đây là bước tiếp theo khi traffic đủ lớn để optimize.

Conversion Attribution

Khi conversion xảy ra, GA4 attributes nó về traffic source:

User journey:
  1. Search "learning in public" → click blog post (Organic Search)
  2. Read article, bookmark site
  3. 3 ngày sau, direct visit → subscribe newsletter (Direct)

Attribution:
  First click: Organic Search (started the journey)
  Last click: Direct (completed the conversion)
  Data-driven: GA4 tự phân bổ credit dựa trên ML model

GA4 mặc định dùng data-driven attribution — phân bổ credit qua machine learning.

Debug Custom Events

GA4 DebugView

GA4 Admin → DebugView — real-time view of events từ debug-enabled devices:

Install GA Debugger Chrome extension
Enable debug mode
Browse site
Mở GA4 DebugView → thấy events stream live

Console Log

Thêm temporary logging:

export function trackEvent(name: string, properties?: Record<string, unknown>) {
  if (process.env.NODE_ENV === "development") {
    console.log(`[Analytics] ${name}`, properties);
  }
  // ... GA4 + PostHog tracking ...
}

Network Tab

F12 → Network → filter collect → thấy requests tới google-analytics.com/g/collect:

Payload chứa event name và parameters
Status 204 = thành công

Event Architecture — Khi nào thêm event mới?

Trước khi thêm custom event, hỏi:

Event này track interaction hay outcome? — Interaction (click button) vs Outcome (completed action). Ưu tiên outcomes.
GA4 enhanced measurement đã cover chưa? — scroll, click, file_download đã được GA4 auto-track.
Event này actionable? — Nếu biết data này, anh sẽ thay đổi gì? Nếu không thay đổi gì → không cần track.
Parameters cần gì? — Ít nhất đủ để answer "who, what, where."

Ví dụ: Nên hay không?

Idea	Nên track?	Lý do
"User click heading in TOC"	Có thể	Hiểu navigation pattern, optimize TOC
"User hover over tag pill"	Không	Không actionable, quá granular
"User read 75% of article"	Nên	Proxy cho "finish reading" (enhanced measurement `scroll` ≈ 90% nhưng không customize được)
"User copy code snippet"	Nên	Validate code examples are useful

Thực hành

Bài tập 1: Trace event flow

cd ACE-component/ACE-leduykhuong-site
 
# Find all trackEvent calls
grep -rn "trackEvent" --include="*.tsx" --include="*.ts" app/ components/

Cho mỗi call: event name gì? Parameters gì? Khi nào trigger?

Bài tập 2: GA4 DebugView

Install GA Debugger extension
Mở leduykhuong.com → dùng search
Check GA4 DebugView: search_used event có fire không?

Bài tập 3: Design new event

Thiết kế custom event cho "user click series navigation" (Next/Previous bài trong series):

Event name?
Parameters cần track?
Liệu GA4 enhanced measurement đã cover?

Tóm tắt

4 custom events trên leduykhuong.com: search_used, theme_toggle, language_switch, external_link_click
Naming convention: snake_case, lowercase, max 40 chars. Xem xét dùng GA4 recommended names
Event parameters cần register trong GA4 Admin → Custom Definitions để xuất hiện trong reports
Conversions = events quan trọng nhất, mark trong GA4 Admin. Attribution = data-driven (default)
Debug bằng GA4 DebugView, console.log, hoặc Network tab
Trước khi thêm event — hỏi: GA4 auto-track chưa? Data này actionable? Sẽ thay đổi gì?

Bài tiếp theo

Bài 12: GA4 + Search Console Integration — Kết nối GA4 với Google Search Console để có full picture: từ search query → click → page behavior. Tại sao integration này quan trọng và cách setup.