資料層

資料層是 Google 代碼管理工具和 gtag.js 所使用的物件， 將資訊轉為標記事件或變數可透過資料層傳遞，以及 您可以根據變數值來設定觸發條件。

舉例來說，假設您觸發了再行銷 當 purchase_total 的值大於 $100 美元或 以及特定事件 (例如只要按一下按鈕 以將資料提供給代碼資料層物件 都採用 JSON 格式例如：

{
  event: "checkout_button",
  gtm: {
    uniqueEventId: 2,
    start: 1639524976560,
    scrollThreshold: 90,
    scrollUnits: "percent",
    scrollDirection: "vertical",
    triggers: "1_27"
  },
  value: "120"
}

Google 代碼的設計方便您參考已加到 以有條理且可預測的方式收集資料層 變數、交易資訊、網頁類別和其他信號 。資料層導入作業會填入變數和 相關聯的值，有助於確保在 標記需要這些參數

安裝

如要安裝代碼管理工具網頁，您必須建立資料層。 下方醒目顯示的程式碼顯示資料層的建立位置 (「代碼」之前) 已載入管理員。

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

在標準 gtag.js 導入中複製代碼 並將產品加入網頁中，用來建立資料層的程式碼是 或更新提示在 Google 代碼的自訂導入方式中，加入資料層程式碼 ，如下方醒目顯示的範例所示：

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

資料層資訊的處理方式

容器載入後，代碼管理工具會開始處理所有排入佇列的資料 層推送訊息代碼管理工具處理首次送出訊息時 ： 一次處理每則訊息，並依照接收順序處理。如果 訊息即為事件，任何含有觸發條件的代碼都符合條件 會在代碼管理工具移至下一則訊息前觸發

如果 gtag() 或 dataLayer.push() 呼叫是由網頁上的程式碼發出 範本或在自訂 HTML 標記中，相關聯的訊息已排入佇列， 等所有待處理訊息都經過評估後才處理。也就是說 更新後的資料層值不一定適用於下一個事件。 如要處理這類情況，應依原樣在訊息中新增事件名稱 您推送至資料層，然後使用「自訂」 事件觸發條件。

使用含有事件處理常式的資料層

dataLayer 物件使用 event 指令啟動事件傳送作業。

Google 代碼和代碼管理工具使用稱為 JavaScript 事件監聽器使用的 event，用於在使用者時啟動代碼 會與網站元素互動舉例來說，假設您想觸發一次轉換 會在使用者點選購買確認按鈕時觸發追蹤代碼。事件可設為 每當使用者與網站元素 (如連結、按鈕、 捲動頁面等

在事件發生時呼叫 dataLayer.push() 即可完成這項功能。 會發生什麼事使用 dataLayer.push() 傳送事件的語法如下：

dataLayer.push({'event': 'event_name'});

其中 event_name 是描述事件的字串，例如 'login'、 purchase 或 search。

使用 dataLayer.push() 在您想要的動作發生時傳送事件資料 。舉例來說，如要在使用者按下按鈕時傳送事件，請修改 按鈕的 onclick 處理常式，用於呼叫 dataLayer.push()：

<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>

您可以動態將資料層變數推送到資料層，以擷取 例如在表單中輸入或選取的值、相關中繼資料 發生訪客播放的影片 (例如汽車) 的顏色 由訪客自訂、點擊連結的實際連結網址等自訂項目。

與事件一樣，只要呼叫 push() API 即可使用這項功能 ，在資料層新增或取代資料層變數。模型的基本語法 設定動態資料層變數的方式如下：

dataLayer.push({'variable_name': 'variable_value'});

其中 'variable_name' 是表示資料層名稱的字串 'variable_value' 是指出 要設定或取代的資料層變數

範例：在訪客期間，以顏色偏好設定設定資料層變數 使用產品自訂工具，您可以推動下列動態元素 資料層變數：

dataLayer.push({'color': 'red'});

一次推送，多個變數

您可以一次推送多個變數和事件：

dataLayer.push({
  'color': 'red',
  'conversionValue': 50,
  'event': 'customize'
});

保留資料層變數

如要在網頁之間保留資料層變數，請在以下日期後呼叫 dataLayer.push()： 資料層會在每次載入網頁時執行個體化 資料層如果您希望代碼可使用這些資料層變數 容器載入時進行 Manager，請在上方加入 dataLayer.push() 呼叫 代碼管理工具容器程式碼，如下所示。

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

在資料層物件中宣告的每個變數，只要 訪客停留在目前的網頁。相關的資料層變數 例如「visitorType」跨網頁的資料層 網頁上雖然您不需要在 每個網頁的資料層，應使用一致的命名慣例。於 換句話說，如果您使用變數在註冊頁面上設定網頁類別 你的產品和購買頁面都必須使用 pageCategory pageCategory 變數。

疑難排解

以下提供一些資料層疑難排解提示：

請勿覆寫 window.dataLayer 變數：使用資料時 直接疊加圖層 (例如 dataLayer = [{'item': 'value'}])，這個圖層就會覆寫任何 dataLayer 中現有的值代碼管理工具安裝作業應執行例項化 資料層會盡量在原始碼中位於容器上方 程式碼片段 (使用 window.dataLayer = window.dataLayer || [];)。宣告 dataLayer 後，請使用 dataLayer.push({'item': 'value'}) 用於加入其他值，以及如果這些值 這些值必須可供代碼管理工具在網頁載入時 dataLayer.push() 呼叫必須位在代碼管理工具容器程式碼上方，因為

dataLayer 物件名稱須區分大小寫：如果您嘗試推送變數 如果沒有適當的大小寫，推送程序將無法運作。

datalayer.push({'pageTitle': 'Home'});    // Bad (datalayer in lowercase)
dataLayer.push({'pageTitle': 'Home'});    // Good (dataLayer in camel case)

dataLayer.push 必須使用有效的 JavaScript 物件呼叫。所有資料層 變數名稱應以引號括住。

dataLayer.push({new-variable: 'value'});      // Bad - no quote marks
dataLayer.push({'new-variable': 'value'});    // Good - proper quote marks

保持所有網頁的變數名稱一致：如果您使用其他變數 同一個概念在不同網頁上的名稱，廣告代碼就無法 會在所有需要的位置觸發

錯誤做法：

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});

良好：

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});

重新命名資料層

由 Google 代碼或 Google 代碼啟動的資料層物件預設名稱 代碼管理工具是 dataLayer。如果您想為 但可以在資料層中編輯資料層參數值 含有您選擇的名稱的 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>

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

重新命名後，資料層的所有參照 (即宣告資料時) 疊加在程式碼片段上方，或是推送事件或動態資料層變數時 使用 .push() 指令調整資料層)，以反映 自訂資料層名稱：

<script>
  myNewName = window.dataLayer || [];
  myNewName.push({'variable_name': 'variable_value'});
</script>

自訂資料層方法

如果您將函式推送至資料層，系統會使用這組函式來叫用這個函式， 以及抽象的資料模型這個抽象資料模型可以取得鍵，並將值設為鍵 值的儲存，也提供重設資料層的方法。

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();
})