Bài 5, Track click, scroll, form, video qua GTM (không cần code)

Sau bài 4, bạn có GTM container chạy với 1 GA4 Configuration tag. Mỗi page load gửi page_view event. Đến đây thì GA4 đo được lưu lượng truy cập theo trang, nhưng chưa biết user thực sự làm gì.

Bài này thêm 4 nhóm event vào GTM. Sau bài này, GA4 sẽ thấy: user click vào nút nào, scroll xuống tới đâu, submit form thành công hay không, xem video bao lâu.

---

#Quy tắc đặt tên trước khi bắt đầu

Trước khi tạo event đầu tiên, có 3 quy tắc đặt tên phải thống nhất:

1. Cấu trúc verb_noun: view_pricing_page, click_book_demo, submit_contact_form, play_intro_video. Bắt đầu bằng động từ, kết thúc bằng danh từ.

2. snake_case, không tiếng Việt: tên event chỉ chữ thường, dấu gạch dưới phân cách từ. Không tiếng Việt vì GA4 có thể hiển thị sai diacritics ở một số chỗ.

3. Không quá 40 ký tự: GA4 giới hạn 40 ký tự cho event name. Nếu dài hơn sẽ bị cắt.

4. Hạn chế trùng tên GA4 chuẩn: GA4 có sẵn các tên như page_view, purchase, add_to_cart, view_item. Khi bạn track action ecommerce, dùng đúng tên chuẩn này (xem bài 6). Khi track action khác, dùng tên riêng.

---

#Event 1, Click vào nút CTA quan trọng (10 phút)

Tình huống: trang chủ có nút “Đặt lịch tư vấn” ở 3 chỗ (hero, giữa trang, footer). Bạn muốn biết user click ở đâu nhiều hơn.

#Bước 1.1, Tạo trigger

GTM → Triggers → New → đặt tên: Click, CTA Đặt lịch.

• Trigger Type: Click, All Elements (theo dõi mọi click, sau đó filter)
• This trigger fires on: Some Clicks
• Điều kiện filter: Click Text contains Đặt lịch tư vấn (hoặc đúng text nút bạn dùng)
• Save

Cách khác (nếu nút có ID hoặc class cố định): điều kiện Click Classes contains cta-book hay Click ID equals book-button. Cách này chính xác hơn, không bị nhầm với text trong các phần khác của trang.

#Bước 1.2, Tạo tag

Tags → New → đặt tên: GA4 Event, Click CTA Đặt lịch.

• Tag Type: Google Analytics: GA4 Event
• Measurement ID: {{GA4, Measurement ID}}
• Event Name: click_book_demo
• Event Parameters: thêm 2 parameter:
  • cta_text = {{Click Text}}
  • cta_location = {{Page Path}} (để biết user click từ trang nào)
• Trigger: chọn trigger vừa tạo
• Save

#Bước 1.3, Test

Bấm Preview → load website → click nút Đặt lịch tư vấn.

Trong Tag Assistant: phải thấy event gtm.click được trigger, và GA4 Event, Click CTA Đặt lịch tag fired. Click vào event xem chi tiết, confirm Click Text đúng là “Đặt lịch tư vấn”.

Vào GA4 → DebugView → thấy event click_book_demo xuất hiện trong vòng 1-2 phút, kèm 2 parameter.

OK → quay lại GTM → Submit → publish thành version mới.

---

#Event 2, Scroll qua section quan trọng (5 phút)

Tình huống: bạn muốn biết bao nhiêu user thật sự đọc tới phần “Giá” trên landing page.

#Bước 2.1, Tạo trigger

Triggers → New → tên: Scroll, 75% Page.

• Trigger Type: Scroll Depth
• Vertical Scroll Depths: Percentages → 75
• This trigger fires on: All Pages (hoặc filter chỉ trang landing nếu muốn)
• Save

#Bước 2.2, Tạo tag

Tags → New → tên: GA4 Event, Scroll 75%.

• Tag Type: GA4 Event
• Event Name: scroll
• Parameters:
  • scroll_depth = {{Scroll Depth Threshold}} (sẽ trả về 75)
  • page_path = {{Page Path}}
• Trigger: trigger vừa tạo
• Save

Lưu ý: Enhanced Measurement của GA4 (bài 3) đã tự track scroll ở mức 90%. Tag này thêm thresholds bạn cần (vd. 25%, 50%, 75%).

#Bước 2.3, Test

Preview → load landing page → kéo chậm xuống cuối. Khi qua 75% → tag fire.

---

#Event 3, Form submission (15 phút)

Tình huống: form đăng ký tư vấn, bạn muốn biết khi nào user submit thành công.

Có 2 cách phổ biến, tùy form được build ra sao:

#Cách A, Built-in Form trigger (form HTML chuẩn)

Áp dụng cho form xài thẻ <form> HTML thuần.

Triggers → New → Form Submission:

• This trigger fires on: Some Forms
• Điều kiện: Form ID equals contact-form (ID của form trên website)
• Hoặc: Page Path contains /lien-he (chỉ form ở trang liên hệ)

Lưu ý quan trọng: tick option Check Validation nếu form có validate (vd. user phải nhập email hợp lệ). Nếu không tick, GTM sẽ fire event ngay khi user click submit, dù form chưa pass validate → false positive.

Tag tương tự event 1, với:

• Event Name: submit_lead_form
• Parameters: form_id, page_path, lead_source (nếu có)

#Cách B, Custom Event qua dataLayer (form React/Vue/Brevo/Tally)

Nếu form không phải HTML thuần (form React đẩy data qua AJAX, hoặc Tally embed, hoặc Brevo widget) → trigger Form Submission không bắt được.

Phải push event lên dataLayer khi submit thành công. Sửa code form:

// trong handler khi form submit thành công
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: "lead_form_submitted",
  form_id: "newsletter-signup",
  lead_source: "homepage",
});

Sau đó trong GTM:

Triggers → New → Custom Event:

• Event name: lead_form_submitted
• This trigger fires on: All Custom Events
• Save

Tạo tag GA4 Event tương tự, dùng trigger này.

---

#Event 4, Video engagement (10 phút)

Tình huống: website nhúng video YouTube giới thiệu sản phẩm. Bạn muốn biết bao nhiêu user thực sự xem hết.

#Bước 4.1, Tạo trigger

Triggers → New → tên: Video, 75% Watched.

• Trigger Type: YouTube Video
• Capture: tick Complete, Pause, Seeking, and Buffering, và Progress → set thresholds: 25, 50, 75
• Optional setting: tick Add JavaScript API support to all YouTube videos (cần cho video không tự nhúng enablejsapi=1)
• This trigger fires on: All Videos
• Save

#Bước 4.2, Tạo tag

Tags → New → tên: GA4 Event, Video Engagement.

• Tag Type: GA4 Event
• Event Name: video_progress
• Parameters:
  • video_title = {{Video Title}}
  • video_percent = {{Video Percent}}
  • video_provider = {{Video Provider}} (luôn là youtube)
  • video_status = {{Video Status}} (progress, complete, pause...)
• Trigger: trigger vừa tạo
• Save

#Bước 4.3, Test

Preview → load page có video → bấm Play → xem 30 giây → tag fire ở các mốc 25%, 50%, 75%.

Nếu video không phải YouTube (Vimeo, Wistia, video tự host) → cần Custom Event qua dataLayer như Cách B của form. Mỗi player có cách khác nhau, AI giúp được phần này (prompt dưới).

---

#AI hỗ trợ ở bài này, 3 chỗ tiết kiệm thời gian

#1. Sinh CSS selector cho click target

Trường hợp: nút Đặt lịch không có ID, không có class đặc thù, chỉ có text. Nếu dùng Click Text filter, có thể trùng với text khác trong trang.

Cách: chụp HTML element của nút (right click → Inspect → copy outer HTML), paste vào AI:

Đây là HTML của một nút trên website. Tôi cần sinh CSS selector để dùng
trong GTM Click trigger (Click Element matches CSS selector).

HTML:
[paste HTML]

Yêu cầu:
1. Selector chính xác đến element này nhưng không quá dài
2. Tránh dùng class auto-generated (kiểu hash tailwind / CSS-in-JS)
3. Nếu element có tham chiếu cha (parent), dùng tham chiếu đó để chính xác hơn
4. Cho tôi 2 alternative nếu cách 1 có thể bị thay đổi sau khi rebuild

Output ra selector kiểu nav.main-nav a[href="/book"]:not(.mobile-only), dán vào GTM Click Element matches CSS selector [paste].

#2. Đặt tên event nhất quán

Có một danh sách 15 event trong measurement plan, đôi khi không nhớ tên đã đặt cho cái nào. Paste plan vào AI:

Đây là measurement plan của tôi (paste). Tôi đang tạo event tracking trong
GTM cho 3 action mới:
1. User download PDF brochure
2. User mở chat widget
3. User click vào số điện thoại trong header

Đề xuất tên event GA4 cho 3 action này, đảm bảo:
- Cùng convention với 12 event đã có trong plan
- snake_case, ≤40 ký tự
- Dùng tên chuẩn GA4 nếu có (file_download cho action 1?)
- Mỗi event kèm 2-3 parameter quan trọng

AI ra:

• file_download (tên chuẩn GA4), parameters: file_name, file_extension, link_url
• open_chat_widget, parameters: widget_provider, page_path
• click_phone_number, parameters: phone_number, page_section

Không phải nghĩ nhiều, AI biết convention.

#3. Sinh dataLayer push code cho framework cụ thể

Khi cần track form/video không chuẩn HTML, phải push dataLayer từ code. Prompt:

Tôi đang dùng Next.js 15 App Router + React Hook Form + Server Action.
Form submission hiện đang qua server action, sau khi submit thành công,
trả về object {success: true, leadId: "xyz"}.

Tôi cần thêm code để push event "lead_form_submitted" lên dataLayer khi
form submit thành công. Event kèm parameter:
- form_id: "newsletter-homepage"
- lead_source: query string utm_source nếu có
- lead_id: leadId từ response

Viết code:
1. Hook hoặc utility function gọi sau khi server action thành công
2. Đảm bảo dataLayer được khai báo trước khi push (window.dataLayer = window.dataLayer || [])
3. Type-safe TypeScript

Output ra code sẵn paste, tích hợp đúng với codebase pattern.

---

#Case study, cài 6 event cho landing page trong 30 phút

Đây là quy trình thật tôi dùng cho một landing page tư vấn pháp lý, sau khi đã có GTM + GA4 cài đúng:

Phút 0-5: Liệt kê measurement plan → 6 event cần cài:

#	Event	Trigger	Parameter
1	click_book_consultation	Click nút header + nút footer	cta_location
2	click_phone_number	Click số điện thoại	phone_number, page_section
3	scroll_to_pricing	Scroll qua section #pricing	page_path
4	submit_contact_form	Form ID contact-form submit	form_id, legal_topic
5	download_template	Click link download .pdf	file_name
6	view_blog_post	Page view ở /blog/*	post_slug, post_category

Phút 5-25: Tạo từng tag + trigger. Mỗi event ~3-4 phút.

Phút 25-30: Preview test toàn bộ 6 event. Click qua từng action trên website, verify trong Tag Assistant.

Phút 30: Submit version, ghi description rõ.

Sau đó kiểm tra trong GA4 DebugView trong 24h. 6 event đã chạy. Marketing có data để báo cáo tuần.

---

#Trước khi sang bài 6

Kiểm tra:

1. ✅ Đã track ít nhất 3 event tùy chỉnh trong GTM (ngoài page_view)
2. ✅ Mỗi event có ≥2 parameter
3. ✅ DebugView GA4 hiện event với đúng parameter value
4. ✅ Tên event tuân theo verb_noun snake_case
5. ✅ Workspace đã Submit thành version mới

Bài tiếp theo là bài quan trọng nhất với website e-commerce: cài Enhanced Ecommerce qua dataLayer. Đây là phần cho phép bạn đo view_item, add_to_cart, begin_checkout, purchase với value đầy đủ (giá tiền, sản phẩm, transaction ID). Có những phần cần đụng vào code website, nhưng AI sẽ giúp bạn viết phần đó nhanh hơn nhiều.