Google Tag Manager(gtm)教學觸發、代碼、變數設定介紹

之前有介紹過如何在 tag manager 安裝 ga 追蹤碼，埋設 tag manager 的追蹤碼到網頁後，再來開始進入 tag manager 設定，首先點選觸發建立好觸發邏輯，再進入代碼增加 ga 追蹤碼，綁定設定好的觸發點，再點選提交上去，就完成設定了。

雖然上次有順手寫掉事件設定，但沒有特別介紹每個設定的邏輯，這次會帶更多細節。以留言板為範例。

假設我們要追蹤送出留言，建立一個事件，拿進 ga 當作轉換目標。

文章連結：tag manager 安裝追蹤碼

Tag manager 設定邏輯

設定 trigger(觸發) => 設定 tag(代碼) => publish(提交)

ps. 每個步驟中都可以使用變數

查看 html 標籤

所有的設定都會走上面的流程，每個代碼都一定要包含觸發。這邊我們先做一個觸發，時機點是在送出留言的時候。

我們先打開連結 => 留言板，打開 chrome devtool( 滑鼠右鍵 -> 檢查 )，點選上面的 Elements，點擊左上角的游標標誌。

再把游標移到網頁上，會發現出現選取整個區塊，這時候移動到送出按鈕，用游標點擊一下，會發現右邊的 html 會變成選取樣式。

按鈕 HTML

<button type="button" id="submitComment" class="btn btn-secondary">
  送出
</button>

這時候會發現按鈕的 id submitComment，通常來說一個頁面的 id 只會存在一個，所以我們會用這個 id 被點擊來作為觸發點，如果你要用 className 也是沒問題，只要處理好判斷即可。

學會查看網頁的 html 很重要，學會這個工具的話，對你在設定追蹤數據有很大幫助。

I.觸發條件

先來開始 tag manager 第一個步驟，設定觸發條件。

打開 tag manager 網頁 tagmanager，點擊觸發條件 => 新增。

這時候點擊觸發條件設定，右邊會展開一大堆選項，大概分類為網頁瀏覽、點擊、使用者主動參與、其他，這四種。

我們選擇點擊元素，依狀況不同設定進階條件。選擇要執行的網頁路徑、click id 填上 submitComment。

tag manager 觸發簡易介紹

tag manager 官方觸發條件介紹

網頁瀏覽

網頁瀏覽使用者一進入網頁，就會觸發網頁瀏覽。
DOM 就緒當使用者進入網頁後，會開始讀取 DOM (html)內容，從上往下跑一次，跑到底就會觸發 DOM 就緒。
視窗已載入當讀取完成 DOM 之後，會繼續執行載入檔案內容，例如圖片、影片、js css 檔案、iframe 等等，當這些都載入完成，就會觸發視窗已載入。

點擊

僅連結使用者點選連結 (<a href="domain/pathname">Link Text</a>)，才會觸發。
所有元素使用者隨意在頁面上做點擊動作，就會觸發。例如我點了網頁的空白區塊，就會觸發了。

使用者主動參與

YouTube 影片當網站上嵌入 youtube 影片，觀看影片的各種狀況，開始、暫停、完成播放，觀看影片的百分比設定。
元素可見度網頁上物件出現在畫面上，都可以算是觸發元素可見度。包括載入出現、滾動出現、變化樣式 css 等等。
捲動頁數針對滾動整個網頁觸發，用來計算滾動的百分比，可以讓自己定義要追蹤的比率。
表單提交使用者提交表單就會觸發，<form><button>送出</button></form>form html 架構才會觸發，如果是使用 javascript ajax 傳輸，就不會觸發到表單提交。

其他

JavaScript 錯誤使用 window.onError 來監聽錯誤，會提供錯誤訊息、錯誤網址、錯誤行號碼等資訊。
自訂事件 dataLayer.push({event:{eventName}})，會依照 dataLayer 中 event 觸發。
計時器可以設定某個動作觸發開始計時，之後再依照設定的時間倒數後在觸發另一個事件。
記錄變更當使用 history.pushState()時會被觸發，可以處理 spa 的網址變化，運用在 react-router。

II.變數

變數可能會比較抽象，簡單介紹一下什麼叫做變數，變數可以當作賦予某個值一個名稱，至於為什麼要命名變數，因為方便我們之後可以直接拿這個變數名稱來使用。

打開變數區塊=>點擊新增，會看到 tag manager 會預設好幾個比較常用到的變數，click text、url、pathName 等等，下方還可以讓你新增使用者自己的變數，有很多種可以新增，比較常用的會是 dataLayer 帶變數、還有 javascript function return。

javascript function return - 回傳留言欄位的內容

function(){
  return document.getElementById('commentValue').value
}

上面的名稱我取作 comment_value，也就是說之後只要其他地方輸入 {{comment_value}} 就可以取得留言的內容。

這邊如果不會寫 javascript 的話，也可以使用內建好的變數，記得要勾選後才能被取用。

III.代碼

這部分就是 tag manager 的核心，經由設定觸發條件，然後執行代碼。tag manager 整合非常多的不同工具，除了 facebook pixel…。

tag manager 支援代碼

我們以 ga 設定事件為例子，原本你在 ga 設定事件，會需要在網站上寫ga('send', 'event', 類別, 動作, 標籤 )，在這邊都視覺化了，每個類別、動作、標籤都分欄位讓你輸入，所以不用會寫 javascript，你也可以輕易設定事件，更重要是不需要透過工程師幫你處理。

簡單講就是，你在 tag manager 的追蹤設定，不會影響到原本網站上的程式架構。網站上一定會埋一堆哩哩摳摳的程式碼，對工程師來說每建立一個新頁面都要用整包，畫面不乾淨也不好維運。它可以幫助你追蹤碼分離掉。

點擊代碼新增 => 選擇 google analytics，使用 ga 的事件。

再來建立類別、動作、標籤，標籤這邊用我們建立的變數comment_value，最後觸發條件再選擇送出留言。

追蹤 adblock 實作範例

上面講了一遍後，再來試著操作一遍，需求是，要追蹤來我的 blog 的人，有多少人使用 adblock，使用 ga 事件來記錄。

以需求來看，觸發點就會是載入頁面後，判斷廣告區塊沒有正常顯示，所以我們要建立一個觸發，執行 ga 事件的代碼。

這邊來用 tag manager 代碼區塊的自訂 html。建立一個 javascript，這段是要判斷 google-auto-placed 有沒有在 html 上，這是 google 自動廣告會帶的 className，如果沒有這個 class，就代表使用者有裝設 adblock。然後使用dataLayer.push({event: 'getAdblock'})產生自訂事件。

代碼區塊使用自訂 html

<script>
  if (document.getElementsByClassName('google-auto-placed').length === 0) {
    dataLayer.push({
      event: 'getAdblock'
    });
  }
</script>