Lớp dữ liệu

Lớp dữ liệu là một đối tượng mà Trình quản lý thẻ của Google và gtag.js sử dụng để truyền thông tin đến thẻ. Bạn có thể truyền sự kiện hoặc biến bằng lớp dữ liệu và thiết lập điều kiện kích hoạt 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 USD hoặc dựa trên các sự kiện cụ thể, chẳng hạn như khi một nút được nhấp, bạn có thể định cấu hình lớp dữ liệu để cung cấp dữ liệu đó cho thẻ. Đối tượng lớp dữ liệu có cấu trúc là 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ế để 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, thay vì phân tích các biến, thông tin giao dịch, danh mục trang và các tín hiệu khác rải rác trên 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 có liên quan sẽ có sẵn khi thẻ của bạn cần.

Cài đặt

Đối với các lượt cài đặt trang web của Trình quản lý thẻ, bạn phải tạo một lớp dữ liệu. Ví dụ về mã sau đây cho biết 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 lượt triển khai gtag.js tiêu chuẩn mà thẻ đã được sao chép từ 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 lượt 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 của bạn, như trong ví dụ về mã sau đây:

<!-- 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 đang chờ xử lý. Trình quản lý thẻ xử lý thông báo theo nguyên tắc vào trước, ra trước: Mỗi thông báo được xử lý một lần, 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 một lệnh gọi gtag() hoặc dataLayer.push() được thực hiện bằng mã trên một trang, trong Mẫu tuỳ chỉnh hoặc trong thẻ HTML tuỳ chỉnh, thì thông báo liên kết 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à mọi giá trị lớp dữ liệu được cập nhật đều không được đảm bảo sẽ có sẵn cho sự kiện tiếp theo. Để xử lý các trường hợp này, bạn nên thêm tên sự kiện vào một thông báo khi thông báo đó được đẩy vào 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 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 thẻ khi người dùng tương tác với các thành phần 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 giao dịch mua. 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 trên trang web, chẳng hạn như đường liên kết, nút, thao tác cuộn, v.v.

Bạn có thể thực hiện chức năng này bằng cách gọi dataLayer.push() khi một sự kiện xảy ra. Cú pháp để gửi sự kiện bằng dataLayer.push() như sau:

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 mà bạn muốn đo lường xảy ra. Ví dụ: để gửi một 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, chẳng hạn 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 một sản phẩm (ví dụ: ô tô) do khách truy cập tuỳ chỉnh, URL đích của các đường liên kết được nhấp, v.v.

Giống như với các sự kiện, bạn có thể thực hiện chức năng này 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 các 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 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 mộ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 khởi tạo 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 Trình quản lý thẻ khi vùng chứa được tải, hãy thêm lệnh gọi dataLayer.push() ở trên mã vùng chứa Trình quản lý thẻ như trong ví dụ sau:

<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. Các 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 tập hợp biến trong 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ì các 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 variable: Khi bạn sử dụng trực tiếp lớp dữ liệu (ví dụ: dataLayer = [{'item': 'value'}]), lớp dữ liệu 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ẻ phải tạo thực thể cho lớp dữ liệu ở vị trí cao nhất có thể trong mã nguồn, ở trên đoạn mã chứa, bằng cách sử dụng window.dataLayer = window.dataLayer || [];. Sau khi dataLayer được khai báo, hãy sử dụng dataLayer.push({'item': 'value'}) để thêm các giá trị khác vào lớp dữ liệu đó. Nếu bạn cần các giá trị đó có sẵn cho Trình quản lý thẻ khi trang tải, thì lệnh gọi dataLayer.push() đó cũng cần ở trên mã vùng chứa Trình quản lý thẻ.

Tên đối tượng dataLayer 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ó đúng trường hợp, 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)

Bạn phải gọi dataLayer.push bằng các đối tượng JavaScript hợp lệ. Tất 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

Đảm bảo tên biến nhất quán trên các trang: Nếu bạn sử dụng các tên biến khác nhau cho cùng một khái niệm trên các trang khác nhau, thì thẻ của bạn sẽ không thể kích hoạt một cách nhất quán ở tất cả các vị trí dự kiến.

Không tốt:

// 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 sử dụng 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ị tham số lớp dữ liệu trong đoạn mã thẻ Google hoặc đoạn mã chứa Trình quản lý thẻ 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 -->

<!-- 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>

Sau khi đổi tên, tất cả các tham chiếu đến lớp dữ liệu của bạn (tức là khi khai báo lớp dữ liệu ở trên đoạn mã hoặc khi đẩy các 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 của bạn:

<script>
  window.myNewName = window.myNewName || [];
  window.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 với this được đặt 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 các giá trị cho kho lưu trữ giá trị khoá, đồng thời cung cấp cách đặt lại lớp dữ liệu.

window.dataLayer.push(function() {
  this.set('time', new Date());
});

window.dataLayer.push(function() {
  const existingTime = this.get('time');
  if (existingTime !== null) {
    // Change behavior based on whether or not this value exists...
  } else {
    // ...
  }
});

window.dataLayer.push(function() {
  this.reset();
});