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 các thẻ phía máy chủ.
Trong một vùng chứa phía máy chủ, các thẻ sẽ nhận dữ liệu sự kiện đến từ khách hàng của bạn, chuyển đổi rồi gửi lại dữ liệu đó để thu thập và phân tích. Các thẻ có thể gửi dữ liệu 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, 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, có thể sử dụng mà không cần cấu hình tuỳ chỉnh:
- Google Analytics 4
- Google Analytics: Universal Analytics
- 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 cần nhiều tính năng hơn so với khả năng mà thẻ Yêu cầu HTTP cung cấp, bạn sẽ 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 bạn có thể tự viết. Hướng dẫn này sẽ cung cấp cho bạn các kiến thức cơ bản về cách viết thẻ của riêng bạn cho một vùng chứa máy chủ.
Mục tiêu
- Tìm hiểu nên dùng API nào để đọ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ế lựa chọn cấu hình cho 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 tại sao sự khác biệt đó lại quan trọng.
- Tìm hiểu vai trò của thẻ trong vùng chứa phía máy chủ. Hiểu những việc một thẻ nên và không nên làm.
- Hãy tìm hiểu thời điểm nên cân nhắc việc gửi mẫu thẻ vào Thư viện mẫu cho cộng đồng.
Điều kiện tiên quyết
- Vùng chứa phí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 về trình quản lý thẻ như ứng dụng, thẻ, điều kiện kích hoạt và biến
- Quen thuộc với các khái niệm 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 đến https://example.com/baz_analytics. Hàm này có các thông số sau:
| Thông số | Ví dụ: | Nội dung mô tả |
|---|---|---|
| id | BA-1234 | Mã tài khoản Baz Analytics của bạn. |
| en | 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ã 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 trong vùng chứa của bạn, rồi nhấp vào Mới trong mục Mẫu thẻ. Thêm tên và nội dung mô tả vào thẻ của bạn.
Tiếp theo, hãy chuyển đến mục Trường của trình chỉnh sửa mẫu để thêm các lựa chọn cấu hình khác nhau cho thẻ của bạn. Câu hỏi hiển nhiên tiếp theo là: bạn cần những lựa chọn nào? Có 3 cách để tạo thẻ:
- Tổng cấu hình: Thêm một trường cấu hình cho mỗi thông số. Yêu cầu người dùng đặt mọi thông tin rõ ràng.
- Không có cấu hình: Không có bất kỳ lựa chọn nào để định cấu hình thẻ. Tất cả dữ liệu đề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ố thông số chứ không phải thông số khác.
Việc có các trường cho mọi thông số rất linh hoạt và mang lại cho người dùng toàn quyền kiểm soát 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 bị trùng lặp. Cụ thể, những nội dung như tham số l của Baz Analytics (chứa URL của trang) đều rõ ràng và phổ biến.
Việc nhập cùng một phần dữ liệu không thay đổi mỗi lần thẻ được định cấu hình sẽ là điều tốt nhất để máy tính lưu lại.
Có thể câu trả lời là nên có một thẻ chỉ nhận dữ liệu từ một sự kiện. Đây là thẻ đơn giản nhất có thể mà người dùng có thể định cấu hình, vì họ không thực sự cần làm gì. Mặt khác, đây cũng là lựa chọn hạn chế và linh hoạt nhất. Người dùng không thể thay đổi hoạt động của thẻ ngay cả khi cần thay đổi.
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 lại gọi sự kiện đó là buy. Hoặc có thể những 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 bị treo.
Giống như nhiều vấn đề khác, câu trả lời nằm ở đâu đó giữa hai cực đoan. Một số dữ liệu luôn được lấy từ sự kiện. Các dữ liệu khác nên được người dùng định cấu hình. Làm thế nào để bạn quyết định đó là định dạng nào? Để trả lời câu hỏi đó, chúng ta cần xem xét kỹ hơn dữ liệu chuyển đến vùng chứa.
Dữ liệu đến từ đâu?
Dữ liệu đến vùng chứa phía máy chủ từ thẻ Google Analytics 4 có thể được chia thành 2 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à toàn bộ dữ liệu mà người dùng đưa vào lệnh event 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 này khá đơn giản, nhưng xét về khía cạnh thẻ, rất khó để sử dụng. Vì dữ liệu này do người dùng nhập nên có thể là bất cứ nội dung gì.
Có thể, như ở trên, người dùng chỉ gửi các sự kiện và tham số đề xuất, nhưng không bắt buộc phải làm như vậy. Với ngoại lệ quan trọng là vị trí (nhưng không phải giá trị!) của tham 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 là 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. Hệ thống cũng sẽ nhận được nhiều dữ liệu do thẻ Google Analytics 4 thu thập tự động trong trình duyệt. Điều đó bao gồm:
ip_overridelanguagepage_locationpage_referrerpage_titlescreen_resolutionuser_agent
Ngoài ra, nếu yêu cầu máy chủ đến từ một trình duyệt web, thì cũng có thể có dữ liệu cookie của trình duyệt thông qua API getCookieValue.
Đồng thời, các 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, dữ liệu này chứa dữ liệu phổ biến và không rõ ràng về mặt ngữ nghĩa. Khi 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à sẽ luôn có cùng định dạng. Để biết thêm thông tin chi tiết về các tham số này, hãy xem tài liệu tham khảo về sự kiện.
Cách phân loại này mang lại cho chúng ta một công cụ hữu ích để sử dụng khi quyết định người dùng cần định cấu hình dữ liệu nào và dữ liệu nào nên được chỉ định trong thẻ. Dữ liệu được thu thập tự động có thể đọc trực tiếp từ sự kiện một cách an toàn. Người dùng nên định cấu hình mọi thứ khác.
Do đó, hãy xem lại các thông số cho thẻ Baz Analytics.
- Mã đo lường,
id: Vì mã này 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 nên 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 ngay từ thông sốevent_name. Tuy nhiên, vì giá trị của thuộc tính này 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ừ thông sốpage_location. Thông số này do thẻ trình duyệt GA4 của Google Analytics thu thập tự động 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ốukhông được người dùng chỉ định và cũng không được thẻ trên trang thu thập tự động. 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 sau nhiều lượt truy cập vào trang web. Như bạn sẽ thấy trong cách triển khai bên dưới, thẻ máy chủ Baz Analytics sử dụng APIsetCookieđể đặt cookie. Điều này có nghĩa là thẻ Baz Analytics là thứ duy nhất biết vị trí và cách thức lưu trữ cookie. Giống nhưl, tham sốusẽ được thu thập tự động.
Sau khi bạn thiết lập xong cấu hình thẻ, cấu hình sẽ có dạng như sau:
Triển khai thẻ
Giờ đây, khi cấu hình của thẻ đã được bình phương, bạn đã sẵn sàng để chuyển sang triển khai hành vi của thẻ trong JavaScript 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 trang từ thuộc tính
page_locationcủa sự kiện. - Tính toán mã nhận dạng người dùng. Thẻ này sẽ tìm kiếm mã nhận dạng người dùng trong 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 URL và gửi yêu cầu đến máy chủ thu thập Baz Analytics.
Bạn cũng nên dành một chút thời gian để suy nghĩ về cách thẻ này phù hợp với toàn bộ 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 thẻ không nên làm hoặc không nên làm. Thẻ của bạn:
- Không nên kiểm tra sự kiện để xác định xem có nên chạy hay không. Đó là mục đích của điều kiện kích hoạt.
- Không nên chạy vùng chứa có API
runContainer. Đó là công việc của khách hàng. - Ngoại trừ cookie quan trọng, bạn không nên 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 khách hàng.
Việc viết một mẫu thẻ thực hiện bất kỳ việc nào trong số này sẽ khiến người dùng thẻ của bạn nhầm lẫn. Ví dụ: một thẻ gửi phản hồi đến yêu cầu đến sẽ ngăn ứng dụng thực hiện điều tương tự. Điều đó sẽ phá vỡ kỳ vọng của người dùng về cách hoạt động của vùng chứa.
Lưu ý tất cả những điều đó, dưới đây là cách triển khai thẻ có chú thích trong JS được đặt 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;
}
Bằng cách đó, thẻ được triển khai. Trước khi có thể sử dụng thẻ, bạn cần đặt quyền API của thẻ đúng cách. Chuyển đến thẻ Permissions (Quyền) của Trình chỉnh sửa mẫu và chỉ định các quyền sau đây:
- Đọc giá trị cookie:
_bauid - Đọc dữ liệu sự kiện:
event_namevàpage_location - Gửi các 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ề quy trình 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ẻ của bạn bằng nút Chạy mã ít nhất một lần. Nhờ đó, bạn sẽ tránh được nhiều lỗi đơn giản có thể xảy ra trên máy chủ.
Gửi thẻ của bạn vào Thư viện mẫu cho cộng đồng
Vì bạn đã thực hiện tất cả công việc tạo, thử nghiệm và triển khai thẻ mới, không có lý do gì để bạn giữ thẻ này cho riêng mình. Nếu bạn cho rằng thẻ mới của mình có thể 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 các kiến thức cơ bản về cách viết một thẻ cho vùng chứa máy chủ. Bạn đã tìm hiểu:
- 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 trên trình duyệt.
- Các phương pháp hay nhất để thiết kế những lựa 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 tại sao sự khác biệt đó lại 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ẻ vào Thư viện mẫu cho cộng đồng.