GTM Data Layer 資料層基礎介紹- Google Tag Manager - 數據酷
文章推薦指數: 80 %
Datalayer Checker 是測試和檢查Data Layer 最簡單的方法, 打開插件就能夠查看當前頁面所有的Data Layer 變更紀錄;延續先前的範例,要取得文章作者 ...
Skiptocontent
使用者資訊
訪客
最新文章
文章分類
GA4資源
GoogleAnalytics
GoogleDataStudio
GoogleTagManager
報表範本
DataStudio參數應用範例
電商跨媒體整合報表
GoogleAnalytics常用報表
YouTube影片留言深入洞察分析
GA4分析報表new_releases
追蹤粉絲專頁
GA4分析報表範本
查看範本報表
精選案例分享
查看完整內容
GTMDataLayer資料層基礎介紹
最後更新日期 2021年7月25日|GoogleTagManager
GTMDataLayer(資料層)是使用GoogleTagManager非常重要的概念之一,和一般熟悉的GTM代碼、觸發器和變數有著相同的重要性,唯一不同的地方是就算不會使用DataLayer,只要會使用代碼、觸發器與變數,基本上就能夠正常的使用GTM來取得數據;也因此DataLayer常常是被大多數的人所忽略的,但事實上,只要能夠了解並正確的使用DataLayer,絕對能大大的提高GTM的使用效率與靈活性。
目錄
GTMDataLayer資料層是如何運作的?不使用DataLayer就無法取得網站資訊了嗎?使用DataLayer存取資料DataLayer資料層的應用範圍變數觸發器
GTMDataLayer資料層是如何運作的?
GTMDataLayer是網站與GTM的中間者,GTM可透過DataLayer取得網站所需資訊,對於不會程式語言的行銷人員來說,可以省下不少麻煩。
DataLayer資訊是由Javascript物件所組成的,主要會由網站工程師將行銷人員所需要的網站資訊儲存在DataLayer之中,行銷人員即可透過GTM容器的DataLayer專屬變數來讀取DataLayer內的資料;雖然GTM本身就提供了不少預設變數可以直接取得網站資訊(例如頁面標題、頁面URL等等),但對於預設變數抓不到的資訊,就可以使用DataLayer來取得,常用的資訊包含使用者名稱、登入帳號、訂單編號、訂單交易金額等等,都可以透過DataLayer存取。
雖然將網站資訊儲存到DataLayer對網站工程師來說不是什麼難事,但在很多情況下,如果你直接跟網站工程師說將XXX資訊儲存到DataLayer,網站工程師會不知道你在說什麼,因為DataLayer並不是所有網站都具備的必要工具,通常只有在使用GTM時才會使用到。
為了應付這種狀況,可以將Google提供的DataLayer的開發者指南給到網站工程師手上,相信能夠解決大多數的溝通問題。
不使用DataLayer就無法取得網站資訊了嗎?
答案是可以的。
GTM提供了一些變數(例如DOM元素和自訂JavaScript),使用這些變數可以直接存取網站前端的HTML數值,但這麼做是有風險的,網站前端HTML很常因為網站的改版或是其他因素導致使用的變數(DOM元素、自訂JavaScript)抓不到原本應該要抓的值,甚至抓到錯誤的值。
取得網站的重要訊息時(電子商務、使用者資訊等等),建議使用DataLayer來存取相關數據,這樣可以大幅降低數據錯誤的問題。
使用DataLayer存取資料
以內容網站來說,我們可能會想紀錄每篇文章的分類以及作者相關資訊,未來在GoogleAnalytics就能夠依照文章分類或是作者來評估該作者或分類的文章流量成效與轉換率;根據這個需求,和網站工程師溝通需要的資訊後,工程師會將所需資訊整理成JSON格式發送到DataLayer(上圖為發送DataLayer資訊範例),行銷人員可以透過GTM的預覽模式檢查是否發送成功。
以上圖為例,在GTM預覽視窗的上方選單點擊DataLayer,可以查看當前頁面所有的DataLayer資訊,其中包含了先前發送的頁面作者(authorName)、分類(category)等等資訊,代表已經成功將資訊儲存到DataLayer。
注意:DataLayer資訊在跳轉頁面時就會被重製,所以DataLayer只會有當前頁面的資訊,如果有需要重複使用的資訊(使用者資訊etc.),則需要在每一個頁面重新將資訊送到DataLayer。
另外也可以在左邊的觸發條件看到剛剛發送的DataLayer事件名稱(postEvent),這是因為在發送DataLayer資訊時,會自動產生一個觸發條件來發送DataLayer資訊,這表示我們可以在GTM利用這個自動產生的觸發條件來觸發其他的代碼(下面會提到觸發條件的應用)。
備註1:DataLayer只會儲存最新的資訊,舉例來說,如果一開始就已經有文章作者的資訊,當重複發送新的文章作者資訊時,原本的文章作者就會被新的覆蓋。
備註2:自動產生的觸發條件名稱是可以自訂的,以先前發送的資訊為例,在開頭有宣告“event”:”postEvent”,所以產生的觸發條件名稱就是postEvent,如果有使用觸發條件的需求,只需要請工程師將事件的名稱修改成需要的即可。
如果沒有使用觸發條件的需求,單純只是要儲存DataLayer資訊,也可以不宣告事件名稱,系統會自動將觸發條件的名稱設定為Message。
DataLayer資料層的應用範圍
變數
使用DataLayer資訊必須先新增一個變數來存取,一個變數只能存取一個資訊,如果要使用多個DataLayer資訊則必須為每一個資訊設定一個變數;舉例來說,如果想要存取DataLayer文章作者的資訊,只需要在GTM新增一個資料層變數,將文章作者在DataLayer的位置填入即可存取該變數(相信行銷人員應該很難理解資訊在DataLayer的位置應該要怎麼填,所以下面會介紹一個好用的插件)。
DatalayerChecker是測試和檢查DataLayer最簡單的方法,打開插件就能夠查看當前頁面所有的DataLayer變更紀錄;延續先前的範例,要取得文章作者的DataLayer位置,只需要複製文章作者左邊的字串到GTM的資料層變數欄位(blog.detail.post.0.author),就能夠存取文章作者的資訊。
設定好資料層變數以後,可以使用預覽模式來檢查變數是否設定正確和成功,確認無誤後即可在GTM自由使用該變數來存取DataLayer資訊。
觸發器
當我們碰到GTM預設觸發器無法滿足需求時,就可以使用DataLayer自動生成的觸發器,因為發送的時間點都是自訂的,下面會舉兩個常見的應用情境:
表單送出–大多數的表單在填寫完成送出後是不會跳轉頁面的,能夠使用的觸發條件只有點擊觸發條件,在使用者點擊表單送出按鈕時觸發,但這樣很容易發生使用者點了表單送出按鈕,但實際上可能因為表單填寫錯誤或其他因素造成表單實際上是沒有成功送出的,這就會導致數據和真實表單數量的誤差;在這種狀況下使用DataLayer觸發條件,我們可以在發送資訊(發送資訊就會自動產生觸發器)前先檢查表單是否成功送出,這樣就可以確保只有在表單成功送出時才會有觸發條件產生。
電商結帳完成頁面–以電商網站來說,所有的轉換交易代碼都是使用結帳完成頁面的頁面瀏覽當作觸發條件,但很多時候結帳完成頁面是不會自動跳轉的(當使用者重新整理頁面時自動跳轉到訂單頁或首頁),這就會造成每當使用者重整頁面一次就會送出一個交易轉換的訊號,交易訂單就會被重複計算影響整個電子商務數據的正確性;在這種狀況下使用DataLayer觸發條件,我們可以設定只有在第一次結帳完成時才發送資訊,這樣就可以確保所有訂單只會被計算一次,從而得到正確的電子商務數據。
要使用DataLayer的觸發器,只需要在GTM新增一個自訂事件觸發器,填入DataLayer觸發器的名稱(前面有提到過這個是可以自訂的)就可以開始使用此觸發條件。
代碼使用自訂事件(DataLayer觸發條件)當作觸發條件時,可以看到代碼確實會在DataLayer自動生成的觸發條件觸發。
更多DataLayer資訊可以參考官方文件。
Postsnavigation
←GTM入門介紹–認識代碼、觸發器與變數全新GoogleTagManager預覽模式完整使用教學→
數據顧問服務
數據酷顧問團隊提供企業專屬的數據解決方案
了解詳情
文章許願池
想看什麼文章主題?
我們會儘快為您安排
填表單許願
數據顧問服務
數據酷顧問團隊提供企業專屬的數據解決方案
了解詳情
文章許願池
想看什麼文章主題?我們會儘快為您安排
填表單許願
數據顧問服務
數據酷顧問團隊提供企業專屬的數據解決方案
了解詳情
文章許願池
想看什麼文章主題?我們會儘快為您安排
填表單許願
GTMDataLayer資料層是如何運作的?不使用DataLayer就無法取得網站資訊了嗎?使用DataLayer存取資料DataLayer資料層的應用範圍變數觸發器
ScrollToTop
延伸文章資訊
- 1gtm4p.productClickEEC not fired and ecommerce data not ...
addProductToCartEEC ) datalayer-checker.js:61 "event": "gtm4wp.addProductToCartEEC", "ecommerce":...
- 2How to get values from dataLayer object - Stack Overflow
- 3How to Pull Ecommerce Data From Data Layer in GTM
You can navigate to any of the product pages on your website and then click on the 'Datalayer Che...
- 4Datalayer Checker_2.3.15_chrome扩展插件下载安装 - 插件小屋
Sublimetrix 很高兴发布具有多项新功能和改进设计的Datalayer Checker 2! 新功能: - 平面和Json 视图 - 复制到剪贴板变量(快速GTM 变量映射)
- 5DataLayer Checker Chrome Extension - Air360 Help Center
Air360 Data Layer Checker lets you check DataLayer variables right from your browser. Easily trou...