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à có thể thiết lập trình kích hoạt dựa trên giá trị của biến.
Ví dụ: nếu bạn kích hoạt một tiếp thị lại
khi giá trị của purchase_total lớn hơn $100 hoặc dựa trên
sự kiện cụ thể, ví dụ: khi một nút được nhấp vào, lớp dữ liệu của bạn có thể được
định cấu hình để dữ liệu đó có sẵn cho thẻ của bạn. Đối tượng lớp dữ liệu là
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 theo cách có tổ chức và có thể dự đoán được, thay vì bằng cách phân tích cú pháp biến, thông tin giao dịch, danh mục trang và các tín hiệu khác bị phân tán trong toàn bộ trang của bạn. Quá trình triển khai lớp dữ liệu được điền sẵn các biến và sẽ giúp đảm bảo rằng dữ liệu có liên quan có sẵn khi các thẻ cần chúng.
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. Chiến lược phát hành đĩa đơn mã được làm nổi bật bên dưới cho biết vị trí lớp dữ liệu được thiết lập, trước khi Thẻ Đã tải trình quản lý.
<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 quá trình triển khai gtag.js chuẩn, nơi thẻ được sao chép từ bên trong sản phẩm và được thêm vào một trang web, mã để thiết lập lớp dữ liệu là đã 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 ở phần đầu của tập lệnh, như được minh hoạ trong ví dụ được đánh dấu 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 vùng chứa được tải, Trình quản lý thẻ sẽ bắt đầu xử lý tất cả dữ liệu trong hàng đợi thông báo đẩy lớp. Trình quản lý thẻ xử lý thông báo theo thứ tự vào trước cơ sở: Mỗi lần thư đượ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, tức là 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 một trang, trong thuộc tính Custom
Mẫu hoặc trong thẻ HTML tuỳ chỉnh, thư liên quan sẽ được đưa vào hàng đợi và
được 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à bất kỳ
các giá trị lớp dữ liệu đã cập nhật không được đảm bảo sẽ có sẵn 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 ở trạng thái hiện tại
đã đẩy đến lớp dữ liệu, sau đó theo dõi tên sự kiện đó bằng một tuỳ chọn Tuỳ chỉnh
Trình kích hoạt sự kiện.
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 biến lớp dữ liệu đặc biệt có tên là
event được trình nghe sự kiện JavaScript sử dụng để kích hoạt thẻ khi người dùng
tương tác với các thành phần trang web. Ví dụ: bạn có thể muốn kích hoạt một 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 thành phần của trang web như đường liên kết, nút,
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 vào 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 được liên kết thông qua 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 tuỳ chỉnh, URL đích của 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 cho
cách đặ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 lớp dữ liệu
biến cần đặt và 'variable_value' là một chuỗi cho biết giá trị của
biến lớp dữ liệu cần đặ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ể đặt quảng cáo động sau biến lớp dữ liệu:
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
lớp dữ liệu đã được tạo thực thể trên 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 các biến lớp dữ liệu này có sẵn cho Thẻ
Trình quản lý khi vùng chứa được tải, hãy thêm một lệnh gọi dataLayer.push() phía trên
Mã vùng chứa của Trình quản lý thẻ như được hiển thị 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 ở trên trang hiện tại. Biến lớp dữ liệu có liên quan
trên các trang (ví dụ: visitorType) phải được khai báo trong lớp dữ liệu trên mỗi trang
của trang web. Mặc dù bạn 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, bạn nên sử dụng quy ước đặt tên nhất quán. Ngang bằng
nói cách khác: nếu bạn đặt danh mục trang trên trang đăng ký bằng cách sử dụng một biến
có tên là pageCategory, sản phẩm và trang mua hàng của bạn nên sử dụng
cũng có 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:
Đừng ghi đè biến window.dataLayer: Khi bạn sử dụng dữ liệu
trực tiếp (ví dụ: dataLayer = [{'item': 'value'}]), lớp này sẽ ghi đè lên bất kỳ lớp nào
các giá trị hiện có trong dataLayer. Phải tạo thực thể cho các lượt cài đặt Trình quản lý thẻ
lớp dữ liệu trong mã nguồn lên cao nhất có thể, phía trên vùng chứa
sử dụng window.dataLayer =
window.dataLayer || [];. Sau khi khai báo dataLayer, hãy sử dụng
dataLayer.push({'item': 'value'}) để thêm giá trị bổ sung vào đó và nếu những giá trị đó
cần có sẵn cho Trình quản lý thẻ khi trang tải, thì
Lệnh gọi dataLayer.push() cần phải ở phía trên mã vùng chứa của Trình quản lý thẻ
tốt.
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 không có cách viết hoa đú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ả lớp dữ liệu
tên biến 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 biến khác nhau tên cho cùng một khái niệm trên các trang khác nhau, Thẻ của bạn sẽ không thể liên tục kích hoạt ở mọi 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 khởi tạo hoặc
Trình quản lý thẻ hiện là dataLayer. Nếu bạn muốn sử dụng một tên khác cho
lớp dữ liệu, bạn có thể làm như vậy bằng cách 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ẻ với tên mà bạn chọn.
gtag.js
Thêm 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 mọi bản sao của dataLayer trong thẻ Google
vào tên mới.
<!-- 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ị thông số lớp dữ liệu (được đánh dấu bên dưới) trong vùng chứa của bạn với 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 dữ liệu)
lớp phía trên đoạn mã hoặc khi đẩy sự kiện hoặc biến lớp dữ liệu động
vào lớp dữ liệu bằng lệnh .push()) 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ô 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 một khoá kho lưu trữ giá trị đồng thời cũng cung cấp cách thức để thiết lập 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 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ị
.
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 vẫn mở và dữ liệu
kích thước lớp tiếp tục tăng theo thời gian. Để đặt lại lớp dữ liệu, hãy sử dụng
mã sau:
window.dataLayer.push(function() {
this.reset();
})