在學習 GTM 的過程中，除了熟悉基本元素如：代碼（Tags）、觸發條件（Triggers）以及變數（Variables）以外，還有一個重要的概念就是「Data Layer 資料層」，雖然你平常可能感受不到它的存在，但「Data Layer 資料層」的角色至關重要，沒有它，你的 GTM 就會是一片黑暗，根本無法正常運作，其扮演著傳遞數據的關鍵角色，讓 GTM 能夠準確地捕捉並處理網站上的信息。
本篇重點
什麼是 Data Layer 資料層？
「Data Layer 資料層」是一個 JavaScript 陣列（Array），用來儲存網站上的各種資料，它的主要作用是作為資料的集散地，讓代碼管理系統如 GTM 可以從中抓取資料或參數，然後將這些資料傳送給各種應用程式，例如 Google Analytics 4（GA4）或廣告平台，以便進行追蹤和分析。
假如你管理的是一個電商平台，網站工程師會將各種重要資訊，像是訂單金額、產品名稱、目錄、運費、購買數量等數據，以及購買成功的事件，都傳送到網站的「Data Layer 資料層」中。這樣一來，數位行銷人員或網站分析師就能透過 GTM 輕鬆地抓取這些數據，並將它們傳送到分析工具如 Google Analytics 4 中進行進一步的分析。
雖然並非所有網站都會使用 Data Layer，但若要使用代碼管理系統（例如 Google Tag Manager）來管理和追蹤網站數據，則一定需要有 Data Layer 的支援才能運作。
為什麼要有 Data Layer 資料層？
在現實生活中，不僅有 Google Tag Manager，還有許多類似的代碼管理工具，當網站需要與這些工具溝通時，統一的溝通接口就變得非常重要。想像一下，你去菜市場買菜，有一攤用美元計價，另一攤用人民幣，後面賣肉的大叔則是用台幣。你在不同攤位間換算價格，買菜時心情肯定也不好，甚至可能不想買了，回到家也沒力氣煮飯。
而「Data Layer 資料層」的作用就在於規格化這一切，讓所有的代碼管理工具都可以以相同的方式讀取「Data Layer 資料層」中的數據，從而正常運作。
Data Layer 長什麼樣子？
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'product':'保溫杯',
'price':100,
'size':'小'
})將這樣一段 Javascript 代碼放到網站原始碼中，就能將網站的參數資料以鍵值對（Key Vaule Pair） 的方式推送到「DataLayer 資料層」。舉例來說，上述代碼中的「 ‘product’ : ‘產品名稱’」就是一個鍵值對（Key Vaule Pair），其中 product 是鍵（Key），而保溫杯是值（Value）。
透過 datalayer.push 的代碼將其推送並儲存到 Data Layer 中，而 Google Tag Manager （GTM）就能在需要的時候抓取這些參數資料，用於觸發相關代碼或傳送參數值（例如產品名稱、價格和尺寸）。
以 GA4 電子商務資料層最常應用的 view_item 為例，其推送資料到 Data Layer 的代碼如下圖所示。
如此一來，就可以透過 GTM 的「資料層變數」以及觸發條件「自訂事件」，來幫我們輕鬆地進行電子商務追蹤事件代碼的設置，並將相關參數資料傳送到 GA4，這些資料能夠供行銷或分析人員觀察產品在網站上的表現。
（若想了解更多有關 GA4 電子商務的資料層規格和參數名稱，可以參考官方文件，順帶一提，在 UA 電子商務中的 product 到了 GA4 已經變成了 item，這點要注意。）
如何看到 Data Layer 中的資料？
Google Tag Assistant（GTM 預覽模式）
我們可以在 GTM 介面的右上角點擊「預覽」按鈕時，就會進入「 預覽模式」時，在這裡，我們可以點擊右側的 Data Layer 頁籤，就能看到一串熟悉的 JavaScript 代碼。
GTM 介面右上角點擊「預覽」> 輸入網站網址後「連接」 > Tag Assistant 左側介面點擊任一事件 > 右側選單點擊「Data Layer」頁籤
（對 GTM 預覽模式還不認識的朋友，可以參考這篇文章：如何用 GTM 「預覽模式」檢查代碼有無設定成功？）
從瀏覽器中的 Console
在瀏覽器的網頁畫面中按下右鍵點選「檢查」。
於檢查畫面中選擇「Console」頁籤，並輸入「dataLayer」後按下 Enter，便可以獲得儲存在此頁面 Data Layer 資料層上的資料，從這邊我們會發現，Google 商店傳送了相當多的資料於 Data Layer 中（圖中數字一路從 0 到第 14）
誰可以傳送資料到 Data Layer 中？
你自己
我們也可以透過 GTM 中的「自訂 HTML」代碼自行推送想要的資料到 Data Layer 中，不過這部分就需要更近一步的操作技巧，初學 GTM 的話可以先不用理解這個部分，只需要知道這個方法的存在即可。
ㅤ
網站工程師
例如未來當你在設定追蹤 GA4 電子商務事件或是表單提交追蹤事件時，可能就會需要網站工程師的協助，幫我們將網站的資料透過 datalayer.push 推送到資料層中。
需要注意的是，網站工程師不一定會理解什麼是「Data Layer」或是其相對應的資料格式，因此身為 GTM 操作人員的你，一定要準備相關文件資料並提供給工程師，而不是隨便一句話就把責任丟給他們，比如說：「嗨，我需要把這些資料推送到網站的 Data Layer 中，請你處理一下」，然後就兩手一攤不管了。
（這也是為什麼我們一直強調，使用了 GTM 不代表你就不需要網站工程師的幫助了。未來還會有很多需要他們協助的地方，但是我們可以透過 GTM 來盡可能減輕他們的負擔。）
ㅤ
網站外掛套件
對於使用 WordPress 搭建網站的朋友來說，如果沒有工程師的協助或無法接觸網站原始碼，可以利用官方提供的外掛套件來幫助推送 GA4 的電子商務資料。例如，知名的 GTM4WP 外掛搭配開店平台套件，就能夠將 GA4 電子商務格式的資料推送到 Data Layer 中。
而台灣大部分的開店平台已經在資料層中預先建置好相關資料。從 view_item_list、view_item、add_to_cart 、view_cart、begin_check_out 到最後的 purchase 等所有 GA4 電子商務資料，都可以在資料層中找到，這對於 GTM 操作人員來說相當方便，同時對於不會使用 GTM 的業主，也只要在網站後台安裝好 GA4，也就能在 GA4 收到電子商務事件資料。
ㅤ
GTM 預設的自動監聽（ Default Auto-Event Listeners）
GTM 的觸發條件本質上是透過一段 JS 代碼「監聽」網站上的相關行為，然後將事件推送到 Data Layer 中，我們再利用該事件啟動相對應的代碼。
舉例來說，如果你有設定觸發條件類型「所有元素」，當網站上的點擊行為發生時，你會在預覽模式中左側面板中看到「click」事件，右側的 Data Layer 頁籤中可以看到相對應的鍵值對（Key Value Pair）為 event : “gtm.click”
關於 GTM 觸發條件的介紹，可以參考這篇文章：「GTM 觸發條件介紹：我們該在「何時」使用「何種」觸發條件？」，將會有更近一步的解釋。
ㅤ
自建的自動監聽（Custom Auto-Event Listeners）
當上述的方式都無法協助你傳送資料到 Data Layer 時，我們也可以自己寫一段 Javascript 代碼來「監聽」頁面相關事件的出現，然後執行資料層推送的動作。
即使你不懂如何寫程式也沒有關係，因為針對你要推送的事件或追蹤的項目，在網路上通常都能找到官方或大神們提供的 JavaScript 代碼。例如，知名 WordPress 表單 Contact Form 7 就有提供相關的文件可以參考，我們也針對它的追蹤方式撰寫一篇教學文章，有興趣了解的朋友可以參閱：設定 Contact JS 監聽器
補充一下
如何讀取 Data Layer 中的資料？
請使用 GTM 已經為我們建置好的「資料層變數」，可以參考這篇文章：GTM 變數介紹：資料層變數
載入新頁面後，Data Layer 會被清空
假設使用者目前正在瀏覽我們網站上的某一個產品，我們的 Data Layer 中包含了有關該產品的相關事件和資料。然而，當使用者離開這個產品頁面前往下一個頁面時，新頁面中的 Data Layer 並不會自動包含「上一頁」Data Layer 中的參數。
因此，如果你希望某個資料參數在每一個頁面的 Data Layer 中都存在，請務必在每個頁面重新推送一次該資料。
Data Layer 只會儲存最新的「相同事件」參數
舉例來說，如果在網站上觸發了兩次「click」事件，那麼 Data Layer 中將只保留最後一次觸發的「click」事件所包含的參數。
以下圖為例，在「預覽模式」中，排序第 50 的「click」事件在 Data Layer 中的 elementId 為空值。
而第 51 個也是該頁最後一個「click」事件的 elementId 值為 product-404。
最後該頁的 Data Layer 中，elementId 的參數將是最後一次「click」事件中 elementId 的值，此例中即為 “product-404″。換句話說，在同事件以及參數的情況下，最後一次觸發的事件參數將取代之前的參數，因此該頁的 Data Layer 只會保留最新的相同事件參數。
順序很重要
有時候你可能會感到困惑，明明我已經把需要的資料推送到 Data Layer 中了，為什麼我在 GTM 中卻無法找到呢？
這時就要注意推送到 Data Layer 的時間是否晚於 GTM 抓取資料的時間。如果 GTM 在尋找資料時，Data Layer 中根本沒有相應的資料，那麼當然就無法找到所需的參數值了。
舉例來說，如果你希望在「網頁瀏覽」觸發條件觸發時，Data Layer 中必須存在我們需要的資料，那就必須將推送資料到 Data Layer 的代碼放在 GTM 容器的代碼之前。
如此一來，推送的事件以及相關參數就會出現在 Container Loaded 之前。
不要用錯代碼
在過去的官方文件中，推送到 data layer 的代碼如下，如果你使用這個代碼，可能會造成 GTM 的損壞，並且覆蓋掉了同一頁中，已經存在於「資料層」的資料，請一定要使用上述所說的代碼格式來推送資料到 Data Layer。
不過目前 Google 提供的文件都已經是用正確的推送代碼，如果你是直接從 Google 官方文件複製，基本上不會遇到什麼問題，這邊寫出來是怕萬一你搜尋到網路上的錯誤代碼格式，造成 GTM 錯誤無法使用。
認識 Data Layer 資料型態（進階）
這部分已經進入到針對 JacaScript 的介紹了，如果你是第一次認識 GTM，那這部分可以跳過，但如果你目前腦袋還有多餘的容量以及心力接收點新的資訊，就可以繼續看下去，沒看也沒關係，不影響你對於 GTM 的學習，往後再回來了解也可以。
我們已經知道 Data Layer 其實就是一個 Javascript「陣列（array）」，也是一個「全域變數（global javascript variable）」，可以被網頁上的所有功能呼叫使用。（關於這部分因已超出這篇文章範圍，請 Google 搜尋全域變數，會有更多詳細解釋。）
而 Javascript 又有許多不同資料型態，如數字（Number）、字串（String）、布林（Boolean）、未定義（Undefined）、Arrays（陣列）以及 物件（Object），陣列其實也是一種物件型態，但在 GTM 的 Data Layer 當中，這兩個的運作是有些許不同的，因此在這裡會進行分開討論。
數字（Number）
var a = 6
var b = 7.5
var a+b = 13.5這是數字，值不會有任何引號，就是純粹的數字，可以有小數點，在 GTM 的 Data Layer 中，最常見到的地方就是顯示物品數量、物品價格或是訂單總價格等，都是數字（Number）。
就像我們在數學中使用的數字一樣，可以是整數（例如：1、2、3）或小數（例如：3.14、0.5），在程式中，我們可以使用數字來進行計算和處理數值。
字串（String）
var a = "abc"
var b = "efg"
var a+b = "abcefg"字串的值都必需加上引號，在 Data Layer 中最常見到的地方就是如產品名稱、顏色、品牌、目錄類別以及折價券代碼等。
布林（Boolean）
var aaa = true
var bbb = false布林只會有兩個值，true 或是 false，沒有其它的東西，它通常用於表示某件事情是對還是錯，或是某個條件是否成立。需要注意的是如果是布林型態，不能加上引號，否則就會變成字串了。
未定義（Undifined）
var aaa就只有這樣，沒有給個 「等於」符號，那就只是宣告了有個變數叫「aaa」，但沒有為其定義任何的值。
陣列（Array）
var aaa =[{
item_id : "3345678",
item_name : "Pikachu",
color : "blue",
category : "pokemon"
},
{
item_id : "3345678",
item_name : "Pikachu",
color : "blue",
category : "pokemon"
}]
}
var aaa = [1,2,3,4]
var bbb = ["a","b","c"]
var ccc = [["a","b"],["v","b"]]辨認 Array 最簡單的方式就是 [ ] 這兩個中（方）括號，基本上就是一個清單，也是一種可以容納多個值的容器，這些值可以是數字、字串、布林等。
在 Data Layer 中常見到的就是在 Array 中列出細部產品，例如一張訂單中可能有很多個產品一起結帳，就可以將各產品依序列在 Array 當中。
物件（Object）
var aaa = {
name : "this is good",
category : "movie",
price : 99
} { } 大括號框起來的就是物件 Object，最常應用在列出產品細節，如名稱、類別、價格、顏色以及數量等，通常會是以鍵值對（key value pair）的方式呈現，每個鍵都是一個唯一的名稱，對應著一個值，這些值可以是數字、字串、陣列、甚至是其他物件。
舉例來說，我們可以看到 GA4 的設定電子商務事件範例中（下圖），就包含了許多前面介紹的 JavaScript 資料型態，了解這些，以後在閱讀 Data Layer 的資料時，相信就更不會讓你一頭霧水了。
總結一下
看到 Javascript 別驚慌，要熟悉 GTM 不一定要學會 Javascript（當然，如果你能懂更好，因為未來可能會有情況勢必需要透過 JS 客製代碼來完成你的追蹤需求），但你一定要熟悉「Data Layer 資料層」的使用方式以及運作原理。
雖然透過代碼管理工具已經減少許多行銷部門要賦予給工程師的任務，但在將網站資料傳送到 Data Layer 時，我們仍然需要工程師的幫助，於指定的網頁指定的網頁上撰寫 Javascript 代碼，推送我們所需的項目參數。
你不一定要會寫代碼，但必須要懂得 Data Layer 的運作邏輯。這樣在與工程師或 PM 溝通時就會更容易明確，確保大家都在同一個頻道上。
延伸閱讀
如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎看看其它文章，繼續探索（這坑？這地獄？這片樂土？）
同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）
