Google Tag Manager是一個免費的超級應用，它在Google Analytics Suite中非常重要，可以大幅簡化我們收集網站數據用於分析，還可以提升用戶體驗並增進SEO的效果。HubSpot One以往多次在Google Tag Manager教程中使用了dataLayer。比如《如何利用GTM記錄下拉菜單選項》和《如何根據不同地區訪客來觸發GTM標籤》。在GTM中dataLayer是一個底層核心概念，理解datalayer有助於幫助我們更好地管理各種觸發條件。本文我們就聊一下dataLayer是什麼，我們又該如何使用datalayer。
dataLayer是什麼？
dataLayer是GTM在瀏覽器中增加的環境變量，它是一個全局變量。是window下的一個子對象。它是一個範圍為頁面生命週期的變量，而不是以會話為生命週期的變量。因此如果你的網站是SPA（single page application）要格外注意dataLayer的生命週期。
如果你的網站使用了GTM那麼你可以通過下面的方法找到dataLayer。
- Chrome瀏覽器按F12，打開DevTools。選擇Console。
- 在命令行中輸入window.dataLayer或者直接dataLayer。
- 執行命令在返回結果中展開dataLayer。
我們在上圖的結果中可以看到，其實dataLayer是一個數組，包含了各個對象。第一次我們運行了window.dataLayer獲得了4個dataLayer對象，第二次獲得了6個對象。這從length屬性可以看出變化，原因是HubSpot One的網頁有計時器，觸發了gtm.timer30和gtm.timer事件，GTM把這兩個事件推送到了dataLayer。在GTM的調試模式下你也可以在Data Layer欄看到數組裡的所有dataLayer對象。
值得一提的是gtm.js是一個JS庫。它是GTM的container標籤用到的。如果這個dataLayer對像不存在那麼你的GTM就掛了，因為當gtm.js載入時，會觸發gtm.js這個事件。
gtm.dom對應DOMContentLoaded，你可以在Console右面第二個network中的下方狀態欄找到。當事件發生時，gtm.dom會被推送到dataLayer。
另外gtm.load也是container標籤用到。如果這個不存在，那麼表示網站內容還未被完全讀取。 load這個事件我們已經在以往的文章中多次介紹。當網頁完全載入後gtm.load事件將被觸發，被推送到dataLayer。
如何使用dataLayer？
你可以在HTML中添加<script>標籤放入dataLayer的值，格式為json。
< script > dataLayer = [ { 'author' : 'Hermes Ma' } ] ; </ script >
上面這個例子中我們定義了dataLayer，它包含了一個對象，對象裡有一個值。
由於設計和部署的非常有可能不是同一人，為了避免這種情況。建議始終用dataLayer的push方法進行賦值。範例如下：
< script > window. dataLayer = window. dataLayer || [ ] ; dataLayer. push ( { 'author' : 'Hermes Ma' } ) ; </ script >
首先我們會檢查一下是否dataLayer已經存在了，如果已存在那麼就自己等於自己，否則就新建一個空數組。然後把要賦的值推入隊列。
這裡我們要理解GTM的dataLayer機制，它是一個隊列，而且永遠返回最新的那個對象的值。要謹記的是不推薦通過JS去更改已經被推入dataLayer的對象的值，用push 。
在上面的例子中如果我們使用Data Layer Variable來獲取author和gender的值的話GTM會分別從最後一個對像開始找是否有author的值和gender的值，最終會得到Herme Ma和female 。
在GTM中使用dataLayer
dataLayer為我們提供了理想的存取數據的容器。在揭開了dataLayer的神秘面紗後我們再說說如何在GTM中使用dataLayer。
首先是從dataLayer中獲取所存儲的值。你可以通過Data Layer Variable來實現。接著之前的例子，上圖中填入Data Layer Variable Name，假設是author ，那麼你便可以獲得值Hermes Ma 。
其次是將值推入dataLayer。就如我們之前強調的，除了初始的賦值你可以在HTML文檔中hardcode，我們推薦用push方法。我們可以在Custom HTML Tag中用JS來完成這一過程。
我們甚至可以通過將event推入dataLayer來自定義事件。如dataLayer.push({‘event’ : ‘read more’}); 。
你可以新建一個Custom Event的Trigger來標誌push了event後的各種騷操作。
至此，我們介紹了dataLayer和如何在GTM中使用dataLayer，它可以讓你的數據和事件管理更加靈活。歡迎通過HubSpot One的微信公眾號參加討論。