Thiết lập các sản phẩm của Google và gửi dữ liệu sự kiện

Trang này là dành cho những nhà phát triển cần định cấu hình thẻ Google bằng gtag.js. Thẻ Google cũng giúp bạn điều chỉnh một số chế độ cài đặt trong giao diện người dùng, hãy xem bài viết Thiết lập chế độ cài đặt thẻ Google.

Sau khi cài đặt thẻ Google, bạn có thể gọi các lệnh gtag() ở bất kỳ vị trí nào trong mã sau đoạn mã thẻ Google.

Trang này hướng dẫn bạn cách:

  1. Thiết lập luồng dữ liệu giữa trang web của bạn và các sản phẩm của Google bằng lệnh config
  2. Gửi sự kiện đến các sản phẩm của Google bằng lệnh event
  3. Đặt các giá trị được gửi cùng với mọi sự kiện bằng lệnh set

Trước khi bắt đầu

Hướng dẫn này giả định rằng bạn đã làm xong những việc sau:

Để thiết lập luồng dữ liệu, bạn cần:

  • Quyền truy cập vào mã của trang web mà bạn đã cài đặt thẻ Google
  • Mã thẻ của sản phẩm Google mà bạn muốn kết nối với thẻ Google này

Mã thẻ là gì và cách tìm mã thẻ? Mã thẻ giúp xác định một thẻ Google. Một thẻ Google có thể có nhiều mã thẻ. Ví dụ: nếu bạn sử dụng Google Ads, thẻ của bạn hiện có hai mã nhận dạng: Một mã thẻ cũ (AW) và một mã thẻ Google (GT).

Màn hình hiển thị một thẻ Google trong Google Ads có hai mã thẻ.

Các mã thẻ có thể thay thế cho nhau. Bảng dưới đây trình bày thông tin tổng quan về những thẻ tương thích với thẻ Google.

Tiền tố Loại mã nhận dạng Nội dung mô tả
GT-XXXXXX Thẻ Google Mỗi thẻ Google mới tạo sẽ có một tiền tố GT và mã nhận dạng duy nhất.
G-XXXXXX Thẻ Google (tiền tố cũ) Thẻ Google Analytics 4 là thẻ Google có tiền tố G và mã nhận dạng duy nhất.
AW-XXXXXX Thẻ Google (tiền tố cũ) Thẻ Google Ads là các thẻ Google có tiền tố AW và mã nhận dạng duy nhất.
DC-XXXXXX Thẻ Google (tiền tố cũ) Thẻ Google Floodlight là thẻ Google có tiền tố DC và mã nhận dạng duy nhất.

Thẻ Universal Analytics (UA) không tương thích với thẻ Google (GT).

Tìm mã thẻ của bạn:

Bước 1: Kết nối các sản phẩm của Google với thẻ của bạn

Giới thiệu về lệnh config

Lệnh config chỉ định các sản phẩm của Google mà bạn muốn gửi dữ liệu sự kiện đến. Lệnh này có định dạng như sau:

gtag('config', 'TAG_ID', {<additional_config_params>});

Thông số cấu hình bổ sung

Bạn có thể điều chỉnh và mở rộng lệnh config bằng cách chỉ định các tham số trong đối tượng {<additional_config_params>} không bắt buộc. Ví dụ: việc thêm thông số sau đây sẽ ngăn hệ thống tự động gửi lượt xem trang Google Analytics:

gtag('config', 'TAG_ID', {'send_page_view': false});

Thiết lập tính năng thu thập dữ liệu

Để thiết lập tính năng thu thập dữ liệu cho một sản phẩm của Google, hãy thêm lệnh config kèm theo mã thẻ.

Ví dụ:

Thẻ Google (GT-XXXXXX) gửi dữ liệu đến các đích đến mà bạn đã xác định cho thẻ đó, chẳng hạn như Google Ads và GA4.

Ví dụ sau đây cho biết cách cập nhật mã của bạn để tải thẻ Google thứ hai được kết nối với một đích đến Floodlight.

Để gửi dữ liệu đến Floodlight (mã thẻ DC-ZZZZZZ), hãy thêm một lệnh config khác sau khi khởi chạy thẻ Google đầu tiên (mã thẻ GT-XXXXXX):

<head>
 ...
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());
  gtag('config', 'GT-XXXXXX');
  gtag('config', 'DC-ZZZZZZ');
</script>
</head>

Hành vi của config dành riêng cho sản phẩm

Tuỳ thuộc vào sản phẩm được chỉ định trong TAG_ID, lệnh config cũng có thể kích hoạt một số hành vi nhất định đối với sản phẩm đó. Ví dụ: trong một số trường hợp, lệnh config sẽ yêu cầu gtag.js bắt đầu một sự kiện xem trang.

Để tìm hiểu thêm về hành vi của lệnh config liên quan đến từng sản phẩm, hãy đọc tài liệu dành riêng cho từng sản phẩm:

Bước 2: Gửi dữ liệu bằng event

Giới thiệu về lệnh event

Lệnh event cho phép bạn gửi dữ liệu sự kiện đến các sản phẩm mà bạn đã chỉ định bằng config. Lệnh này có định dạng như sau:

gtag('event', 'event_name', {
  'key': 'value',
});

Giới thiệu về tên sự kiện và cặp khoá-giá trị

Sự kiện được đề xuất: Sự kiện được đề xuất là những sự kiện mà bạn triển khai, nhưng có cặp khoá-giá trị được xác định trước. Những sự kiện này cho phép bạn sử dụng các tính năng báo cáo hiện có và sẽ có.

Sự kiện tuỳ chỉnh: Để xác định sự kiện và cấu trúc dữ liệu của riêng mình, bạn có thể nhập giá trị tuỳ chỉnh để gửi một sự kiện tuỳ chỉnh.

Thiết lập sự kiện

Bạn có thể gọi phương thức event ở bất kỳ vị trí nào trong mã sau khi khởi tạo thẻ Google.

  1. Xác định một sự kiện. Nếu bạn đang sử dụng sự kiện được đề xuất, hãy nhớ sử dụng tên sự kiện được chuẩn hoácặp khoá-giá trị được xác định trước.

  2. Xác định thời điểm sự kiện sẽ được kích hoạt, ví dụ như khi sự kiện được gửi khi có lượt tải trang hoặc khi người dùng nhấp vào một nút.

Ví dụ:

Ví dụ sau minh hoạ một cách có thể đo lường số lượt đăng ký nhận bản tin khi người dùng nhấp vào một nút. Ví dụ này sử dụng một sự kiện tuỳ chỉnh và gửi sự kiện đó đến tài sản Google Analytics 4.

<head>
   ...
   /* 1. Initialize the Google tag and gtag.js library */
   <!-- Google tag (gtag.js) -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments)};
     gtag('js', new Date());
     gtag('config', 'TAG_ID');
   </script>
</head>

<body>
   <script>
     let date = Date.now();
     /* 2. Define your event. */
     function newsletterSignup() {
       gtag('event', 'newsletter_signup', {
       'time': date,
       });
   }
   </script>
   ...
   /* 3. Trigger your event */
   <button type="submit" onlick="newsletterSignup()">Sign me up!</button>
   ...
</body>

Không bắt buộc: Gửi dữ liệu với mọi sự kiện bằng set

Lệnh set cho phép bạn xác định các thông số sẽ được liên kết với mọi sự kiện tiếp theo trên trang.

Ví dụ: bạn có thể chia sẻ các thông số chiến dịch để nhiều thẻ trên cùng một trang có thể truy cập vào các thông số này.

Lệnh này có định dạng như sau:

gtag('set', 'parameterName');

Các bước tiếp theo

Sau khi thiết lập sản phẩm và sự kiện của Google, bạn đã hoàn tất quá trình định cấu hình thẻ Google cơ bản.

Nếu bạn đang quản lý nhiều sản phẩm và muốn quản lý luồng dữ liệu của các sản phẩm đó chi tiết hơn, hãy xem phần Dữ liệu nhóm và tuyến đường.