Skip to content

GTM Data Layer 資料層 基礎介紹

GTM Data Layer ( 資料層 ) 是使用 Google Tag Manager 非常重要的概念之一, 和一般熟悉的 GTM 代碼、觸發器和變數有著相同的重要性,唯一不同的地方是就算不會使用 Data Layer ,只要會使用代碼、觸發器與變數,基本上就能夠正常的使用 GTM 來取得數據;也因此 Data Layer 常常是被大多數的人所忽略的,但事實上,只要能夠了解並正確的使用 Data Layer ,絕對能大大的提高 GTM 的使用效率與靈活性。

GTM Data Layer 資料層 是如何運作的?

GTM 資料層 運作方式

GTM Data Layer 是網站與 GTM 的中間者, GTM 可透過 Data Layer 取得網站所需資訊,對於不會程式語言的行銷人員來說,可以省下不少麻煩。 Data Layer 資訊是由 Javascript 物件所組成的,主要會由網站工程師將行銷人員所需要的網站資訊儲存在 Data Layer 之中, 行銷人員即可透過 GTM 容器的 Data Layer 專屬變數來讀取 Data Layer 內的資料;雖然 GTM 本身就提供了不少預設變數可以直接取得網站資訊(例如頁面標題、頁面URL等等),但對於預設變數抓不到的資訊,就可以使用 Data Layer 來取得,常用的資訊包含使用者名稱、登入帳號、訂單編號、訂單交易金額等等,都可以透過 Data Layer 存取。

雖然將網站資訊儲存到 Data Layer 對網站工程師來說不是什麼難事,但在很多情況下,如果你直接跟網站工程師說將XXX資訊儲存到 Data Layer,網站工程師會不知道你在說什麼,因為 Data Layer 並不是所有網站都具備的必要工具,通常只有在使用 GTM 時才會使用到。為了應付這種狀況,可以將 Google 提供的 Data Layer 的開發者指南給到網站工程師手上,相信能夠解決大多數的溝通問題。

不使用 Data Layer 就無法取得網站資訊了嗎?

答案是可以的。 GTM 提供了一些變數(例如DOM元素自訂 JavaScript),使用這些變數可以直接存取網站前端的 HTML 數值,但這麼做是有風險的,網站前端 HTML 很常因為網站的改版或是其他因素導致使用的變數(DOM 元素、自訂 JavaScript)抓不到原本應該要抓的值,甚至抓到錯誤的值。取得網站的重要訊息時(電子商務、使用者資訊等等),建議使用 Data Layer 來存取相關數據,這樣可以大幅降低數據錯誤的問題。

使用 Data Layer 存取資料

GTM Data Layer 範本

以內容網站來說,我們可能會想紀錄每篇文章的分類以及作者相關資訊,未來在 Google Analytics 就能夠依照文章分類或是作者來評估該作者或分類的文章流量成效與轉換率;根據這個需求,和網站工程師溝通需要的資訊後,工程師會將所需資訊整理成 JSON 格式發送到 Data Layer(上圖為發送 Data Layer 資訊範例),行銷人員可以透過 GTM 的預覽模式檢查是否發送成功。

GTM 預覽模式下的 Data Layer

以上圖為例,在 GTM 預覽視窗的上方選單點擊 Data Layer ,可以查看當前頁面所有的 Data Layer 資訊,其中包含了先前發送的頁面作者(authorName)、分類(category)等等資訊,代表已經成功將資訊儲存到 Data Layer。

注意:Data Layer 資訊在跳轉頁面時就會被重製,所以 Data Layer 只會有當前頁面的資訊,如果有需要重複使用的資訊(使用者資訊 etc.),則需要在每一個頁面重新將資訊送到 Data Layer。

另外也可以在左邊的觸發條件看到剛剛發送的 Data Layer 事件名稱(postEvent),這是因為在發送 Data Layer 資訊時,會自動產生一個觸發條件來發送 Data Layer 資訊,這表示我們可以在 GTM 利用這個自動產生的觸發條件來觸發其他的代碼(下面會提到觸發條件的應用)。

備註1:Data Layer 只會儲存最新的資訊,舉例來說,如果一開始就已經有文章作者的資訊,當重複發送新的文章作者資訊時,原本的文章作者就會被新的覆蓋。

備註2:自動產生的觸發條件名稱是可以自訂的,以先前發送的資訊為例,在開頭有宣告 “event”:”postEvent” ,所以產生的觸發條件名稱就是 postEvent,如果有使用觸發條件的需求,只需要請工程師將事件的名稱修改成需要的即可。如果沒有使用觸發條件的需求,單純只是要儲存 Data Layer 資訊,也可以不宣告事件名稱,系統會自動將觸發條件的名稱設定為 Message

Data Layer 資料層 的應用範圍

變數

Google Tag Manager 設定資料層變數

使用 Data Layer 資訊必須先新增一個變數來存取,一個變數只能存取一個資訊,如果要使用多個 Data Layer 資訊則必須為每一個資訊設定一個變數;舉例來說,如果想要存取 Data Layer 文章作者的資訊,只需要在 GTM 新增一個資料層變數,將文章作者在 Data Layer 的位置填入即可存取該變數(相信行銷人員應該很難理解資訊在 Data Layer 的位置應該要怎麼填,所以下面會介紹一個好用的插件)。

Datalayer Checker 使用方式

Datalayer Checker 是測試和檢查 Data Layer 最簡單的方法,打開插件就能夠查看當前頁面所有的 Data Layer 變更紀錄;延續先前的範例,要取得文章作者的 Data Layer 位置,只需要複製文章作者左邊的字串到 GTM 的資料層變數欄位(blog.detail.post.0.author),就能夠存取文章作者的資訊。

設定好資料層變數以後,可以使用預覽模式來檢查變數是否設定正確和成功,確認無誤後即可在 GTM 自由使用該變數來存取 Data Layer 資訊。

觸發器

當我們碰到 GTM 預設觸發器無法滿足需求時,就可以使用 Data Layer 自動生成的觸發器,因為發送的時間點都是自訂的,下面會舉兩個常見的應用情境:

  1. 表單送出 – 大多數的表單在填寫完成送出後是不會跳轉頁面的,能夠使用的觸發條件只有點擊觸發條件,在使用者點擊表單送出按鈕時觸發,但這樣很容易發生使用者點了表單送出按鈕,但實際上可能因為表單填寫錯誤或其他因素造成表單實際上是沒有成功送出的,這就會導致數據和真實表單數量的誤差;在這種狀況下使用 Data Layer 觸發條件,我們可以在發送資訊(發送資訊就會自動產生觸發器)前先檢查表單是否成功送出,這樣就可以確保只有在表單成功送出時才會有觸發條件產生。
  2. 電商結帳完成頁面 – 以電商網站來說,所有的轉換交易代碼都是使用結帳完成頁面的頁面瀏覽當作觸發條件,但很多時候結帳完成頁面是不會自動跳轉的(當使用者重新整理頁面時自動跳轉到訂單頁或首頁),這就會造成每當使用者重整頁面一次就會送出一個交易轉換的訊號,交易訂單就會被重複計算影響整個電子商務數據的正確性;在這種狀況下使用 Data Layer 觸發條件,我們可以設定只有在第一次結帳完成時才發送資訊,這樣就可以確保所有訂單只會被計算一次,從而得到正確的電子商務數據。
設定 Data Layer 自訂事件觸發條件

要使用 Data Layer 的觸發器,只需要在 GTM 新增一個自訂事件觸發器,填入 Data Layer 觸發器的名稱(前面有提到過這個是可以自訂的)就可以開始使用此觸發條件。

使用 Data Layer 觸發代碼

代碼使用自訂事件(Data Layer 觸發條件)當作觸發條件時,可以看到代碼確實會在 Data Layer 自動生成的觸發條件觸發。

更多 Data Layer 資訊可以參考官方文件

數據顧問服務

數據酷顧問團隊
提供企業專屬的數據解決方案

文章許願池

想看什麼文章主題?
我們會儘快為您安排

數據顧問服務

數據酷顧問團隊
提供企業專屬的數據解決方案

文章許願池

想看什麼文章主題?
我們會儘快為您安排

數據顧問服務

數據酷顧問團隊
提供企業專屬的數據解決方案

文章許願池

想看什麼文章主題?
我們會儘快為您安排

Scroll To Top