Lớp dữ liệu là đối tượng được Trình quản lý thẻ của Google và gtag.js sử dụng để truyền thông tin vào thẻ. Các sự kiện hoặc biến có thể được chuyển thông qua lớp dữ liệu và điều kiện kích hoạt có thể được thiết lập dựa trên giá trị của biến.
Ví dụ: nếu bạn kích hoạt thẻ tái tiếp thị khi giá trị của purchase_total lớn hơn 100 đô la hoặc dựa trên các sự kiện cụ thể (ví dụ: khi người dùng nhấp vào một nút, bạn có thể định cấu hình lớp dữ liệu để cung cấp dữ liệu đó cho thẻ của mình). Đối tượng lớp dữ liệu có cấu trúc dưới dạng JSON. Ví dụ:
{
event: "checkout_button",
gtm: {
uniqueEventId: 2,
start: 1639524976560,
scrollThreshold: 90,
scrollUnits: "percent",
scrollDirection: "vertical",
triggers: "1_27"
},
value: "120"
}
Thẻ Google được thiết kế để dễ dàng tham chiếu thông tin được thêm vào lớp dữ liệu một cách có tổ chức và dự đoán được, thay vì bằng cách phân tích cú pháp các biến, thông tin giao dịch, danh mục trang và các tín hiệu khác nằm rải rác trên khắp trang của bạn. Việc triển khai lớp dữ liệu được điền sẵn các biến và giá trị liên kết sẽ giúp đảm bảo rằng dữ liệu liên quan có sẵn khi các thẻ của bạn cần đến.
Cài đặt
Để cài đặt trang web Trình quản lý thẻ, bạn phải tạo một lớp dữ liệu. Mã được làm nổi bật bên dưới cho thấy vị trí thiết lập lớp dữ liệu, trước khi Trình quản lý thẻ được tải.
<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
Trong các phương pháp triển khai gtag.js chuẩn mà thẻ đã được sao chép từ bên trong sản phẩm và thêm vào một trang web, mã để thiết lập lớp dữ liệu sẽ được cung cấp. Trong các phương thức triển khai tuỳ chỉnh của thẻ Google, hãy thêm mã lớp dữ liệu vào đầu tập lệnh như minh hoạ trong ví dụ được làm nổi bật bên dưới:
<!-- 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>
Cách xử lý thông tin lớp dữ liệu
Khi một vùng chứa được tải, Trình quản lý thẻ sẽ bắt đầu xử lý tất cả các thông báo đẩy lớp dữ liệu trong hàng đợi. Trình quản lý thẻ xử lý các thông báo trên cơ sở vào trước và xuất hiện trước: Mỗi thông báo được xử lý lần lượt, theo thứ tự nhận được. Nếu thông báo là một sự kiện, thì mọi thẻ có điều kiện kích hoạt đã được đáp ứng sẽ kích hoạt trước khi Trình quản lý thẻ chuyển sang thông báo tiếp theo.
Nếu lệnh gọi gtag() hoặc dataLayer.push() được thực hiện bằng mã trên trang, trong Mẫu tuỳ chỉnh hoặc trong thẻ HTML tuỳ chỉnh, thì thông báo liên quan sẽ được đưa vào hàng đợi và xử lý sau khi tất cả các thông báo đang chờ xử lý khác được đánh giá. Điều này có nghĩa là không đảm bảo sẽ có mọi giá trị lớp dữ liệu đã cập nhật cho sự kiện tiếp theo.
Để xử lý những trường hợp này, bạn nên thêm tên sự kiện vào thông báo khi tên sự kiện đó được đẩy đến lớp dữ liệu, sau đó theo dõi tên sự kiện đó bằng điều kiện kích hoạt Sự kiện tuỳ chỉnh.
Sử dụng lớp dữ liệu với trình xử lý sự kiện
Đối tượng dataLayer sử dụng lệnh event để bắt đầu gửi các sự kiện.
Thẻ Google và Trình quản lý thẻ sử dụng một biến lớp dữ liệu đặc biệt có tên là event. Biến này được trình nghe sự kiện JavaScript sử dụng để kích hoạt các thẻ khi người dùng tương tác với các phần tử trên trang web. Ví dụ: bạn có thể muốn kích hoạt thẻ theo dõi lượt chuyển đổi khi người dùng nhấp vào nút xác nhận mua hàng. Sự kiện có thể được gọi bất cứ khi nào người dùng tương tác với các phần tử trên trang web như đường liên kết, nút, thao tác cuộn, v.v.
Chức năng này được thực hiện bằng cách gọi dataLayer.push() khi một sự kiện xảy ra. Dưới đây là cú pháp để gửi một sự kiện bằng dataLayer.push():
dataLayer.push({'event': 'event_name'});
Trong đó event_name là một chuỗi mô tả sự kiện, chẳng hạn như 'login', purchase hoặc search.
Sử dụng dataLayer.push() để gửi dữ liệu sự kiện khi một hành động xảy ra mà bạn muốn đo lường. Ví dụ: để gửi sự kiện khi người dùng nhấp vào một nút, hãy sửa đổi trình xử lý onclick của nút đó để gọi dataLayer.push():
<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>
Bạn có thể đẩy các biến lớp dữ liệu đến lớp dữ liệu một cách linh động để thu thập thông tin như các giá trị được nhập hoặc chọn trong biểu mẫu, siêu dữ liệu liên kết với video mà khách truy cập đang phát, màu sắc của sản phẩm (ví dụ: xe ô tô) do khách truy cập tùy chỉnh, URL đích của đường liên kết được nhấp vào, v.v.
Giống như sự kiện, chức năng này được thực hiện bằng cách gọi API push() để thêm hoặc thay thế các biến lớp dữ liệu trong lớp dữ liệu. Cú pháp cơ bản để đặt biến lớp dữ liệu động như sau:
dataLayer.push({'variable_name': 'variable_value'});
Trong đó 'variable_name' là một chuỗi cho biết tên của biến lớp dữ liệu cần đặt, còn 'variable_value' là một chuỗi cho biết giá trị của biến lớp dữ liệu cần được đặt hoặc thay thế.
Ví dụ: Để đặt biến lớp dữ liệu có lựa chọn ưu tiên về màu sắc khi khách truy cập tương tác với công cụ tuỳ chỉnh sản phẩm, bạn có thể đẩy biến lớp dữ liệu động sau đây:
dataLayer.push({'color': 'red'});
Một lần đẩy, nhiều biến
Bạn có thể đẩy nhiều biến và sự kiện cùng một lúc:
dataLayer.push({
'color': 'red',
'conversionValue': 50,
'event': 'customize'
});
Duy trì các biến lớp dữ liệu
Để duy trì các biến lớp dữ liệu giữa các trang web, hãy gọi dataLayer.push() sau khi
lớp dữ liệu đã được tạo thực thể cho mỗi lần tải trang và đẩy các biến đó
vào lớp dữ liệu. Nếu bạn muốn Trình quản lý thẻ có thể sử dụng các biến lớp dữ liệu này khi vùng chứa được tải, hãy thêm lệnh gọi dataLayer.push() phía trên mã vùng chứa Trình quản lý thẻ như minh hoạ bên dưới.
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'Pageview',
'pagePath': 'https://www.googleanalytics.dev/pancakes',
'pageTitle': 'Pancake Event Signup',
'visitorType': 'customer'
});
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
Mỗi biến được khai báo trong đối tượng lớp dữ liệu sẽ chỉ tồn tại miễn là khách truy cập vẫn ở lại trang hiện tại. Bạn phải khai báo các biến lớp dữ liệu có liên quan trên các trang (ví dụ: visitorType) trong lớp dữ liệu trên mỗi trang của trang web. Mặc dù không cần đặt cùng một nhóm biến vào lớp dữ liệu trên mọi trang, nhưng bạn nên sử dụng quy ước đặt tên nhất quán. Nói cách khác: nếu bạn đặt danh mục trang trên trang đăng ký bằng một biến có tên là pageCategory, thì trang sản phẩm và trang mua hàng của bạn cũng nên sử dụng biến pageCategory.
Khắc phục sự cố
Dưới đây là một số mẹo khắc phục sự cố về lớp dữ liệu:
Không ghi đè biến window.dataLayer: Khi bạn sử dụng trực tiếp lớp dữ liệu (ví dụ: dataLayer = [{'item': 'value'}]), biến này sẽ ghi đè mọi giá trị hiện có trong dataLayer. Các lượt cài đặt Trình quản lý thẻ nên tạo thực thể cho lớp dữ liệu trong mã nguồn càng cao càng tốt, phía trên đoạn mã vùng chứa bằng cách sử dụng window.dataLayer =
window.dataLayer || [];. Sau khi khai báo dataLayer, hãy sử dụng dataLayer.push({'item': 'value'}) để thêm các giá trị bổ sung vào đó. Nếu cần có các giá trị đó cho Trình quản lý thẻ khi trang tải, thì lệnh gọi dataLayer.push() đó cũng cần phải ở phía trên mã vùng chứa của Trình quản lý thẻ.
Tên đối tượng dataLayer có phân biệt chữ hoa chữ thường: Nếu bạn cố gắng đẩy một biến hoặc sự kiện mà không được viết hoa/viết thường đúng cách, thì thao tác đẩy sẽ không hoạt động.
datalayer.push({'pageTitle': 'Home'}); // Bad (datalayer in lowercase)
dataLayer.push({'pageTitle': 'Home'}); // Good (dataLayer in camel case)
dataLayer.push phải được gọi bằng đối tượng JavaScript hợp lệ. Tất cả các tên biến lớp dữ liệu phải được đặt trong dấu ngoặc kép.
dataLayer.push({new-variable: 'value'}); // Bad - no quote marks
dataLayer.push({'new-variable': 'value'}); // Good - proper quote marks
Giữ cho tên biến nhất quán trên các trang: Nếu bạn sử dụng tên biến khác nhau cho cùng một khái niệm trên nhiều trang, thì Thẻ của bạn sẽ không thể kích hoạt nhất quán ở tất cả các vị trí mong muốn.
Kém:
// Homepage:
dataLayer.push({'visitorType': 'low-value'});
// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});
Tốt:
// Homepage:
dataLayer.push({'visitorType': 'low-value'});
// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});
Đổi tên lớp dữ liệu
Tên mặc định của đối tượng lớp dữ liệu do thẻ Google hoặc Trình quản lý thẻ khởi tạo là dataLayer. Nếu muốn dùng tên khác cho lớp dữ liệu, bạn có thể chỉnh sửa giá trị thông số lớp dữ liệu trong thẻ Google hoặc đoạn mã chứa Trình quản lý thẻ theo tên mà bạn chọn.
gtag.js
Thêm một tham số truy vấn có tên "l" vào URL để đặt tên lớp dữ liệu mới, ví dụ: l=myNewName. Cập nhật tên mới cho mọi phiên bản của dataLayer trong đoạn mã thẻ Google.
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID&l=myNewName"></script>
<script>
window.myNewName = window.myNewName || [];
function gtag(){myNewName.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
Trình quản lý thẻ
Thay thế giá trị tham số lớp dữ liệu (được đánh dấu bên dưới) trong đoạn mã vùng chứa bằng tên bạn chọn.
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','myNewName','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
Sau khi đổi tên, mọi thông tin tham chiếu đến lớp dữ liệu (tức là khi khai báo lớp dữ liệu phía trên đoạn mã hoặc khi đẩy sự kiện hay biến lớp dữ liệu động vào lớp dữ liệu bằng lệnh .push()) đều phải được điều chỉnh để phản ánh tên lớp dữ liệu tuỳ chỉnh:
<script>
myNewName = window.dataLayer || [];
myNewName.push({'variable_name': 'variable_value'});
</script>
Phương thức lớp dữ liệu tuỳ chỉnh
Nếu bạn đẩy một hàm vào lớp dữ liệu, hàm đó sẽ được gọi cùng với tập hợp này thành một mô hình dữ liệu trừu tượng. Mô hình dữ liệu trừu tượng này có thể nhận và đặt giá trị thành kho khoá giá trị, đồng thời đưa ra cách đặt lại lớp dữ liệu.
đặt
Hàm set trên mô hình dữ liệu trừu tượng cho phép bạn đặt các giá trị để truy xuất thông qua phương thức get.
window.dataLayer.push(function() {
this.set('time', new Date());
});
get
Hàm get trên mô hình dữ liệu trừu tượng cho phép bạn truy xuất các giá trị đã đặt.
window.dataLayer.push(function() {
const existingTime = this.get('time');
if (existingTime !== null) {
// Change behavior based on whether or not this value exists...
} else {
// ...
}
})
Khôi phục tuỳ chọn tìm kiếm
Hàm reset trên mô hình dữ liệu trừu tượng cho phép bạn đặt lại dữ liệu trong lớp dữ liệu. Cách này hữu ích nhất với một trang sẽ vẫn mở và kích thước lớp dữ liệu tiếp tục tăng theo thời gian. Để đặt lại lớp dữ liệu, hãy sử dụng đoạn mã sau:
window.dataLayer.push(function() {
this.reset();
})