資料層是 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 代碼和代碼管理工具會使用名為 event 的特殊資料層變數，供 JavaScript 事件監聽器在使用者與網站元素互動時觸發代碼。舉例來說，您可能希望在使用者點選購買確認按鈕時觸發轉換追蹤代碼。使用者與網站元素互動時 (例如連結、按鈕、捲動條等)，系統可能會呼叫事件。
只要在事件發生時呼叫 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()，並將變數推送至資料層。如果您希望在載入容器時，代碼管理工具可以使用這些資料層變數，請在代碼管理工具容器程式碼上方新增 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 代碼或代碼管理工具啟動的資料層物件預設名稱為 dataLayer。如果您想為資料層使用其他名稱，可以編輯 Google 代碼或代碼管理工具容器片段中的資料層參數值，並使用您選擇的名稱。
gtag.js
在網址中加入「l」查詢參數，設定新的資料層名稱，例如 l=myNewName。將 Google 代碼程式碼片段中的所有 dataLayer 例項更新為新名稱。
<!-- 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>
自訂資料層方法
如果您將函式推送至資料層，系統會使用這組函式叫用這個函式，做為抽象資料模型。這個抽象資料模型可取得及設定鍵/值存放區的值，並提供重設資料層的方法。
set
抽象資料模型的 set 函式可讓您設定透過 get 擷取的值。
window.dataLayer.push(function() {
this.set('time', new Date());
});
get
抽象資料模型上的 get 函式可讓您擷取已設定的值。
window.dataLayer.push(function() {
const existingTime = this.get('time');
if (existingTime !== null) {
// Change behavior based on whether or not this value exists...
} else {
// ...
}
})
重設
抽象資料模型的 reset 函式可讓您重設資料層中的資料。這項功能最適合用於會持續開啟的網頁，以及資料層大小會隨著時間增加的情況。如要重設資料層，請使用下列程式碼：
window.dataLayer.push(function() {
this.reset();
})