Hướng dẫn triển khai Sự kiện trong Google Analytics 4 bằng gtag.js

Trong quá trình đo lường hành vi người dùng, Sự kiện đóng vai trò cốt lõi trong việc ghi nhận mọi tương tác quan trọng trên website. Khi bạn sử dụng Google Analytics 4, việc hiểu rõ cách hoạt động và cách triển khai Sự kiện bằng gtag.js sẽ giúp bạn chủ động hơn trong phân tích dữ liệu. Thay vì chỉ xem báo cáo có sẵn, bạn có thể tự định nghĩa những hành động thực sự quan trọng với doanh nghiệp. Điều này giúp bạn biến Google Analytics 4 từ một công cụ theo dõi cơ bản thành một hệ thống đo lường chiến lược.

Trước khi bắt đầu triển khai Sự kiện trong Google Analytics 4, bạn cần chuẩn bị gì?

Trước khi đi sâu vào hướng dẫn, có hai giả định quan trọng. Thứ nhất, bạn đã cài đặt thẻ gtag.js trên website để gửi dữ liệu về Google Analytics 4. Thứ hai, bạn có kiến thức về JavaScript hoặc đang làm việc cùng một lập trình viên hiểu rõ JavaScript.

Bài viết này dành cho những ai triển khai theo cách hardcode trực tiếp thẻ Google Tag (gtag.js) vào website mà không dùng Google Tag Manager. Bạn có thể rơi vào một trong các trường hợp sau:

Website đơn giản, nhu cầu tracking không quá phức tạp và bạn không muốn dùng hệ thống quản lý thẻ.
CMS có tích hợp sẵn GA4 thông qua gtag.js và bạn cần bổ sung Sự kiện tùy chỉnh.
Bạn là developer làm việc trong môi trường không sử dụng GTM.
Bạn đang xử lý lỗi trong một triển khai gtag.js có sẵn.

Khi nào nên dùng gtag.js thay vì Google Tag Manager?

Trước khi bắt đầu hardcode Sự kiện, bạn cần hiểu rõ sự khác biệt giữa gtag.js và Google Tag Manager. Cả hai đều gửi dữ liệu về Google Analytics 4, nhưng quy trình triển khai rất khác nhau.

Tiêu chí	Google Tag (gtag.js)	Google Tag Manager (GTM)
Cách triển khai	Hardcode trực tiếp vào mã nguồn website	Quản lý qua giao diện web
Phù hợp với ai	Developer, website đơn giản, tích hợp CMS	Marketer, nhu cầu tracking linh hoạt
Mức độ kiểm soát	Phải chỉnh sửa code và deploy lại site	Có thể cập nhật mà không cần sửa code
Độ khó	Yêu cầu hiểu JavaScript	Cần học logic và giao diện GTM

Nếu bạn cần kiểm soát trực tiếp trong code và hệ thống đơn giản, gtag.js là lựa chọn phù hợp. Nếu bạn muốn linh hoạt, thay đổi nhanh mà không cần deploy lại website, GTM sẽ tối ưu hơn.

Làm sao để kiểm tra gtag.js đã được cài đặt đúng?

Nếu bạn đã cài GA4 bằng gtag.js, trên mỗi trang sẽ có đoạn mã chứa Measurement ID dạng G-XXXXXXXX.

Để tìm Measurement ID trong Google Analytics 4:

Vào Admin
Chọn Data collection and modification
Chọn Data streams
Click vào data stream cần xem và lấy Measurement ID

Hãy đảm bảo ID trong code khớp chính xác với ID trong Data Stream.

Vì sao bạn cần hiểu JavaScript khi tracking Sự kiện?

Để gửi Sự kiện bằng gtag(), bạn bắt buộc phải hiểu JavaScript ở mức khá vững. Bài viết này hướng dẫn quy trình, nhưng việc triển khai thực tế có thể đòi hỏi kỹ năng lập trình nâng cao hơn.

Ngay cả khi bạn không trực tiếp viết code, việc hiểu cách hoạt động của Sự kiện trong Google Analytics 4 sẽ giúp bạn:

Trao đổi hiệu quả với developer
Định nghĩa đúng event_name và parameters
Test và kiểm tra dữ liệu chính xác

Cấu trúc một Sự kiện trong Google Analytics 4 gồm những gì?

Trong GA4, khi gửi một Sự kiện, bạn sẽ dùng cú pháp:

gtag('event', '<event_name>', {<event_parameters>});

Một Sự kiện có 3 thành phần chính:

Thành phần	Vai trò	Bắt buộc	Ví dụ
‘event’	Lệnh cố định để kích hoạt gửi dữ liệu	Bắt buộc	gtag(‘event’, …)
event_name	Tên Sự kiện hiển thị trong báo cáo GA4	Bắt buộc	‘link_click’, ‘login’
parameters	Thông tin bổ sung dạng key-value	Không bắt buộc	{ method: ’email’ }

Lưu ý quan trọng:

Tên Sự kiện tối đa 40 ký tự
Mỗi Sự kiện tối đa 25 parameters
Các tham số tự động (language, page_location…) cũng được tính vào giới hạn 25

Làm thế nào để kiểm tra Sự kiện trong DebugView?

Để test Sự kiện trong Google Analytics 4:

Cài extension Google Analytics Debugger trên Chrome
Bật extension (icon hiển thị “On”)
Vào GA4 → Admin → Debug View
Thực hiện hành động trên website

Nếu triển khai đúng, bạn sẽ thấy Sự kiện xuất hiện trong DebugView và có thể click vào từng Sự kiện để xem parameters.

Làm sao khám phá dữ liệu click bằng Console?

Để theo dõi Sự kiện click link, trước tiên bạn cần hiểu website đang lưu trữ thông tin ở đâu.

Mở Console:

Click chuột phải → Inspect
Chọn tab Console

Sau đó thêm đoạn code:

document.addEventListener('click', function(event) {
  console.log(event);
});

Đoạn code này giúp bạn xem toàn bộ thông tin của click event. Khi click vào một link (mở sang tab mới để không reload), bạn sẽ thấy một PointerEvent trong Console. Hãy mở rộng target object để xem:

innerText
href
id
className

Đây chính là dữ liệu bạn có thể dùng làm parameters cho Sự kiện.

Làm sao chỉ tracking click vào link mà không phải mọi click?

Mặc định, click event sẽ kích hoạt ở mọi vị trí trên trang. Để chỉ tracking link, bạn cần thêm điều kiện:

if (event.target.tagName === 'A')

Khi tagName là “A”, nghĩa là người dùng click vào thẻ <a> (link).

Làm sao tạo Sự kiện link_click với parameters động?

Sau khi xác định điều kiện, bạn có thể gửi Sự kiện về Google Analytics 4 như sau:

document.addEventListener("click", function(event) {
  if (event.target.tagName === "A") {
    gtag('event', 'link_click', {
      'link_text': event.target.innerText,
      'link_url': event.target.href,
      'link_id': event.target.id,
      'link_classes': event.target.className
    });
  }
});

Điểm quan trọng ở đây là parameters động. Mỗi lần người dùng click vào link khác nhau, giá trị sẽ thay đổi tương ứng.

Nhờ vậy, trong báo cáo Sự kiện của Google Analytics 4, bạn có thể biết chính xác:

Người dùng click link nào
Link dẫn đi đâu
Link thuộc class hoặc ID nào

Vì sao Sự kiện không hiển thị trong DebugView?

Nếu bạn đã kích hoạt nhưng không thấy Sự kiện, hãy kiểm tra:

Extension Google Analytics Debugger đã bật chưa?
Có đang bật internal filter loại trừ Developer traffic không?
Measurement ID có bị sai ký tự không?

Chỉ cần sai một ký tự trong G-XXXXXXXX là toàn bộ Sự kiện sẽ không được gửi về Google Analytics 4.

Tài liệu tham khảo: chttps://www.analyticsmania.com/post/how-to-track-events-with-google-tag-gtag-js/