Trang này được dịch bởi Cloud Translation API.

Cách tạo thẻ máy chủ

Trong bài viết Giới thiệu về tính năng gắn thẻ phía máy chủ, bạn đã có thông tin tổng quan về tính năng gắn thẻ phía máy chủ trong Trình quản lý thẻ. Bạn đã tìm hiểu về ứng dụng và chức năng của ứng dụng: Ứng dụng nhận dữ liệu sự kiện từ thiết bị của người dùng và điều chỉnh dữ liệu đó để phần còn lại của vùng chứa sử dụng. Bài viết này mô tả cách xử lý dữ liệu đó trong thẻ phía máy chủ.

Trong vùng chứa máy chủ, các thẻ sẽ nhận dữ liệu sự kiện đến từ ứng dụng, chuyển đổi dữ liệu đó rồi gửi lại để thu thập và phân tích. Thẻ có thể gửi dữ liệu đến bất cứ nơi nào bạn muốn. Miễn là đích đến chấp nhận các yêu cầu HTTP, đích đến đó cũng có thể chấp nhận dữ liệu từ vùng chứa máy chủ.

Vùng chứa máy chủ có 3 thẻ tích hợp sẵn, sẵn sàng để sử dụng mà không cần cấu hình tuỳ chỉnh:

Google Analytics 4
Yêu cầu HTTP

Nếu muốn gửi dữ liệu đến một nơi khác ngoài Google Analytics hoặc bạn cần nhiều tính năng hơn so với những tính năng mà thẻ Yêu cầu HTTP cung cấp, bạn cần sử dụng một thẻ khác. Bạn có thể tìm thấy các thẻ bổ sung trong Thư viện mẫu cho cộng đồng hoặc có thể tự viết. Hướng dẫn này sẽ hướng dẫn bạn các kiến thức cơ bản về cách viết thẻ của riêng mình cho vùng chứa máy chủ.

Mục tiêu

Tìm hiểu những API nào cần sử dụng để đọc dữ liệu sự kiện, gửi yêu cầu HTTP và đặt cookie trong trình duyệt.
Tìm hiểu các phương pháp hay nhất để thiết kế các tuỳ chọn cấu hình của thẻ.
Tìm hiểu sự khác biệt giữa dữ liệu do người dùng chỉ định và dữ liệu được thu thập tự động cũng như lý do sự khác biệt đó quan trọng.
Tìm hiểu vai trò của thẻ trong vùng chứa phía máy chủ. Hiểu rõ những việc một thẻ nên làm và không nên làm.
Tìm hiểu thời điểm nên gửi mẫu thẻ đến Thư viện mẫu cho cộng đồng.

Điều kiện tiên quyết

Vùng chứa máy chủ đã triển khai
Quen thuộc với Trình quản lý thẻ, vùng chứa máy chủ và các khái niệm cơ bản của chúng như ứng dụng, thẻ, trình kích hoạt và biến
Quen thuộc với các kiến thức cơ bản về việc viết mẫu cho thẻ và biến

Thẻ Baz Analytics

Trong hướng dẫn này, bạn sẽ tạo một thẻ gửi dữ liệu đo lường đến một dịch vụ có tên là Baz Analytics.

Baz Analytics là một dịch vụ phân tích giả định, đơn giản, nhập dữ liệu qua các yêu cầu HTTP GET tới https://example.com/baz_analytics. Phương thức này có các tham số sau:

Thông số	Ví dụ:	Mô tả
id	BA-1234	Mã tài khoản Baz Analytics của bạn.
vi	click	Tên sự kiện.
l	`https://www.google.com/search?q=sgtm`	URL của trang nơi sự kiện xảy ra.
u	2384294892	Mã nhận dạng của người dùng thực hiện hành động. Dùng để liên kết nhiều thao tác với một người dùng.

Cấu hình thẻ

Việc đầu tiên cần làm là tạo mẫu thẻ. Chuyển đến phần Mẫu của vùng chứa rồi nhấp vào Mới trong phần Mẫu thẻ. Thêm tên và nội dung mô tả cho thẻ.

Tiếp theo, hãy chuyển đến phần Trường của trình chỉnh sửa mẫu để thêm các tuỳ chọn cấu hình khác nhau cho thẻ của bạn. Câu hỏi rõ ràng tiếp theo là: bạn cần những lựa chọn nào? Bạn có thể chọn một trong ba cách sau để tạo thẻ:

Tổng cấu hình: Thêm trường cấu hình cho mỗi thông số. Yêu cầu người dùng đặt mọi thứ một cách rõ ràng.
Không có cấu hình: Không có lựa chọn nào để định cấu hình thẻ. Tất cả dữ liệu được lấy trực tiếp từ sự kiện.
Một số cấu hình: Có các trường cho một số tham số và không có các trường cho tham số khác.

Việc có các trường cho mọi thông số rất linh hoạt và giúp người dùng kiểm soát toàn bộ cấu hình thẻ của họ. Tuy nhiên, trong thực tế, việc này thường dẫn đến nhiều công việc trùng lặp. Cụ thể, những thông số như tham số l của Baz Analytics (chứa URL của trang) phải rõ ràng và phổ quát. Việc nhập cùng một phần dữ liệu không thay đổi mỗi khi định cấu hình thẻ là điều tốt nhất nên để máy tính thực hiện.

Có thể câu trả lời là tạo một thẻ chỉ lấy dữ liệu từ một sự kiện. Đây là thẻ đơn giản nhất mà người dùng có thể định cấu hình, vì họ không cần làm gì cả. Mặt khác, đây cũng là tuỳ chọn hạn chế và dễ hỏng nhất. Người dùng không thể thay đổi hành vi của thẻ ngay cả khi cần. Ví dụ: có thể họ gọi một sự kiện là purchase trên trang web và trong Google Analytics, nhưng Baz Analytics gọi sự kiện đó là buy. Hoặc có thể các giả định mà thẻ đưa ra về cấu trúc của dữ liệu sự kiện sắp tới không thực sự khớp với thực tế. Trong cả hai trường hợp, người dùng đều bị kẹt.

Giống như nhiều thứ khác, câu trả lời nằm ở đâu đó giữa hai thái cực. Một số dữ liệu luôn được lấy từ sự kiện. Người dùng phải định cấu hình dữ liệu khác. Làm cách nào để bạn quyết định đâu là đâu? Để trả lời câu hỏi đó, chúng ta cần xem xét kỹ hơn dữ liệu đi vào vùng chứa.

Dữ liệu đến từ đâu?

Dữ liệu đến vùng chứa máy chủ từ thẻ Google Analytics 4 có thể được chia thành hai loại: Dữ liệu do người dùng chỉ định và dữ liệu được thu thập tự động.

Dữ liệu do người dùng chỉ định là mọi thứ mà người dùng đưa vào lệnh event của gtag.js. Ví dụ: một lệnh như sau:

gtag('event', 'search', {
  search_term: 'beets',
});

Sẽ dẫn đến các thông số sau trong vùng chứa máy chủ:

{
  event_name: 'search',
  search_term: 'beets',
}

Điều đó khá đơn giản, nhưng từ góc độ thẻ, rất khó để làm việc. Vì dữ liệu này do người dùng nhập nên có thể là bất kỳ nội dung nào. Có thể, như trên, người dùng chỉ gửi các sự kiện được đề xuất và thông số, nhưng không có yêu cầu nào về việc họ phải làm như vậy. Ngoại trừ vị trí (nhưng không phải giá trị!) của thông số event_name, không có gì đảm bảo về hình thức hoặc cấu trúc của dữ liệu người dùng.

May mắn thay, dữ liệu do người dùng nhập không phải là thứ duy nhất mà vùng chứa sẽ nhận được. Ứng dụng cũng sẽ nhận được một loạt dữ liệu do thẻ Google Analytics 4 tự động thu thập trong trình duyệt. Bao gồm:

ip_override
language
page_location
page_referrer
page_title
screen_resolution
user_agent

Ngoài ra, nếu yêu cầu máy chủ đến từ trình duyệt web, thì cũng có thể có dữ liệu cookie trình duyệt thông qua API getCookieValue.

Tất cả những dữ liệu này tạo nên dữ liệu được thu thập tự động mà chúng tôi đề cập ở trên. Nhìn chung, nó bao gồm dữ liệu phổ quát và rõ ràng về ngữ nghĩa. Khi một yêu cầu đến từ thẻ GA4 trong trình duyệt, dữ liệu này sẽ luôn có sẵn và có cùng định dạng. Để biết thêm thông tin chi tiết về các thông số này, hãy xem tài liệu tham khảo về sự kiện.

Việc phân loại này cung cấp cho chúng ta một công cụ hữu ích để sử dụng khi quyết định dữ liệu nào do người dùng định cấu hình và dữ liệu nào cần được chỉ định trong thẻ. Bạn có thể đọc trực tiếp dữ liệu được thu thập tự động từ sự kiện một cách an toàn. Mọi thứ khác phải do người dùng định cấu hình.

Do đó, hãy xem lại các tham số cho thẻ Baz Analytics.

Mã đo lường, id: Vì không được thu thập tự động nên đây là một ví dụ rõ ràng về giá trị mà người dùng phải nhập khi định cấu hình thẻ.
Tên sự kiện, en: Như đã đề cập ở trên, bạn luôn có thể lấy tên sự kiện trực tiếp từ thông số event_name. Tuy nhiên, vì giá trị của thuộc tính này là do người dùng xác định, nên bạn nên cung cấp khả năng ghi đè tên nếu cần.
URL trang, l: Giá trị này có thể được lấy từ tham số page_location. Tham số này được thẻ trình duyệt Google Analytics GA4 tự động thu thập trên mọi sự kiện. Do đó, bạn không nên yêu cầu người dùng nhập giá trị theo cách thủ công.
Mã nhận dạng người dùng, u: Trong thẻ máy chủ Baz Analytics, tham số u không phải do người dùng chỉ định và cũng không phải do thẻ trên trang tự động thu thập. Thay vào đó, mã này được lưu trữ trong cookie của trình duyệt để có thể xác định người dùng trong nhiều lượt truy cập vào trang web. Như bạn sẽ thấy trong phần cách triển khai bên dưới, thẻ máy chủ Baz Analytics sử dụng API setCookie để đặt cookie. Tức là thẻ Baz Analytics là thứ duy nhất biết cookie đó được lưu trữ ở đâu và như thế nào. Giống như l, tham số u sẽ được tự động thu thập.

Sau khi bạn thiết lập xong cấu hình thẻ, cấu hình đó sẽ có dạng như sau:

Thông tin tổng quan nhanh về cấu hình thẻ cho thẻ Analytics của Baz.

Triển khai thẻ

Giờ đây, khi cấu hình của thẻ đã được sắp xếp, bạn có thể chuyển sang triển khai hành vi của thẻ đó trong JavaScript dạng hộp cát.

Thẻ cần thực hiện 4 việc:

Lấy tên sự kiện từ cấu hình của thẻ.
Lấy URL của trang từ tài sản page_location của sự kiện.
Tính toán mã nhận dạng người dùng. Thẻ này sẽ tìm mã nhận dạng người dùng trong một cookie có tên là _bauid. Nếu không có cookie đó, thẻ sẽ tính toán một giá trị mới và lưu trữ giá trị đó cho các yêu cầu sau này.
Tạo một URL và gửi yêu cầu đến máy chủ thu thập dữ liệu Baz Analytics.

Bạn cũng nên dành chút thời gian để suy nghĩ về cách thẻ hiển thị vừa với vùng chứa. Các thành phần vùng chứa khác nhau đóng vai trò khác nhau, vì vậy, cũng có những việc mà thẻ không hoặc không nên làm. Thẻ của bạn:

Không nên kiểm tra sự kiện để tìm hiểu xem sự kiện đó có chạy hay không. Đó là mục đích của trình kích hoạt.
Không được chạy vùng chứa bằng API runContainer. Đó là công việc của ứng dụng.
Ngoại trừ cookie, bạn không nên cố gắng tương tác trực tiếp với yêu cầu hoặc phản hồi. Đó cũng là công việc của ứng dụng khách.

Việc viết một mẫu thẻ thực hiện bất kỳ thao tác nào trong số này sẽ khiến người dùng thẻ của bạn bị nhầm lẫn. Ví dụ: một thẻ gửi phản hồi cho yêu cầu đến sẽ ngăn ứng dụng làm tương tự. Điều đó sẽ làm hỏng kỳ vọng của người dùng về cách hoạt động của vùng chứa.

Với tất cả những điều đó, dưới đây là cách triển khai thẻ được chú thích trong JS trong hộp cát.

const encodeUriComponent = require('encodeUriComponent');
const generateRandom = require('generateRandom');
const getCookieValues = require('getCookieValues');
const getEventData = require('getEventData');
const logToConsole = require('logToConsole');
const makeString = require('makeString');
const sendHttpGet = require('sendHttpGet');
const setCookie = require('setCookie');

const USER_ID_COOKIE = '_bauid';
const MAX_USER_ID = 1000000000;

// The event name is taken from either the tag's configuration or from the
// event. Configuration data comes into the sandboxed code as a predefined
// variable called 'data'.
const eventName = data.eventName || getEventData('event_name');

// page_location is automatically collected by the Google Analytics 4 tag.
// Therefore, it's safe to take it directly from event data rather than require
// the user to specify it. Use the getEventData API to retrieve a single data
// point from the event. There's also a getAllEventData API that returns the
// entire event.
const pageLocation = getEventData('page_location');
const userId = getUserId();

const url = 'https://www.example.com/baz_analytics?' +
    'id=' + encodeUriComponent(data.measurementId) +
    'en=' + encodeUriComponent(eventName) +
    (pageLocation ? 'l=' + encodeUriComponent(pageLocation) : '') +
    'u=' + userId;

// The sendHttpGet API takes a URL and returns a promise that resolves with the
// result once the request completes. You must call data.gtmOnSuccess() or
// data.gtmOnFailure() so that the container knows when the tag has finished
// executing.
sendHttpGet(url).then((result) => {
  if (result.statusCode >= 200 && result.statusCode < 300) {
    data.gtmOnSuccess();
  } else {
    data.gtmOnFailure();
  }
});

// The user ID is taken from a cookie, if present. If it's not present, a new ID
// is randomly generated and stored for later use.
//
// Generally speaking, tags should not interact directly with the request or
// response. This prevents different tags from conflicting with each other.
// Cookies, however, are an exception. Tags are the only container entities that
// know which cookies they need to read or write. Therefore, it's okay for tags
// to interact with them directly.
function getUserId() {
  const userId = getCookieValues(USER_ID_COOKIE)[0] || generateRandom(0, MAX_USER_ID);
  // The setCookie API adds a value to the 'cookie' header on the response.
  setCookie(USER_ID_COOKIE, makeString(userId), {
    'max-age': 3600 * 24 * 365 * 2,
    domain: 'auto',
    path: '/',
    httpOnly: true,
    secure: true,
  });

  return userId;
}

Như vậy, thẻ đã được triển khai. Trước khi có thể sử dụng thẻ này, bạn cần đặt quyền API của thẻ đúng cách. Chuyển đến thẻ Quyền của Trình chỉnh sửa mẫu rồi chỉ định các quyền sau:

Đọc giá trị cookie: _bauid
Đọc dữ liệu sự kiện: event_name và page_location
Gửi yêu cầu HTTP: https://www.example.com/*
Đặt cookie: _bauid

Bạn cũng nên viết mã kiểm thử cho thẻ của mình. Để đọc thêm về kiểm thử mẫu, hãy đọc phần kiểm thử trong hướng dẫn cho nhà phát triển mẫu.

Cuối cùng, đừng quên thử chạy thẻ bằng nút Run Code (Chạy mã) ít nhất một lần. Điều đó sẽ giúp ngăn chặn nhiều lỗi đơn giản xuất hiện trên máy chủ của bạn.

Gửi thẻ của bạn đến Thư viện mẫu cho cộng đồng

Vì bạn đã thực hiện tất cả các bước tạo, thử nghiệm và triển khai thẻ mới, nên không có lý do gì để giữ thẻ cho riêng bạn. Nếu bạn cho rằng thẻ mới của mình sẽ hữu ích cho người khác, hãy cân nhắc gửi thẻ đó đến Thư viện mẫu cho cộng đồng.

Kết luận

Trong hướng dẫn này, bạn đã tìm hiểu kiến thức cơ bản về cách viết thẻ cho vùng chứa máy chủ. Bạn đã tìm hiểu:

API nào cần dùng để đọc dữ liệu sự kiện, gửi yêu cầu HTTP và đặt cookie trên trình duyệt.
Các phương pháp hay nhất để thiết kế các tuỳ chọn cấu hình cho một thẻ.
Sự khác biệt giữa dữ liệu do người dùng chỉ định và dữ liệu được thu thập tự động cũng như lý do sự khác biệt đó rất quan trọng.
Vai trò của thẻ trong vùng chứa; những việc thẻ nên làm và không nên làm.
Thời điểm và cách gửi mẫu thẻ đến Thư viện mẫu cho cộng đồng.