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

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

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

marketing/GoogleTagManager(gtm)教學觸發、代碼、變數設定介紹October16,2018·9minRead目錄Tagmanager設定邏輯查看html標籤按鈕HTMLI.觸發條件tagmanager觸發簡易介紹網頁瀏覽點擊使用者主動參與其他II.變數III.代碼追蹤adblock實作範例工作實作心得之前有介紹過如何在tagmanager安裝ga追蹤碼，埋設tagmanager的追蹤碼到網頁後，再來開始進入tagmanager設定，首先點選觸發建立好觸發邏輯，再進入代碼增加ga追蹤碼，綁定設定好的觸發點，再點選提交上去，就完成設定了。

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

以留言板為範例。

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

文章連結：tagmanager安裝追蹤碼 Tagmanager設定邏輯 設定trigger(觸發)=>設定tag(代碼)=>publish(提交) ps.每個步驟中都可以使用變數 查看html標籤 所有的設定都會走上面的流程，每個代碼都一定要包含觸發。

這邊我們先做一個觸發，時機點是在送出留言的時候。

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

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

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

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

I.觸發條件 先來開始tagmanager第一個步驟，設定觸發條件。

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

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

我們選擇點擊元素，依狀況不同設定進階條件。

選擇要執行的網頁路徑、clickid填上submitComment。

tagmanagertagsmaple4 tagmanager觸發簡易介紹 tagmanager官方觸發條件介紹 網頁瀏覽 網頁瀏覽 使用者一進入網頁，就會觸發網頁瀏覽。

DOM就緒 當使用者進入網頁後，會開始讀取DOM(html)內容，從上往下跑一次，跑到底就會觸發DOM就緒。

視窗已載入 當讀取完成DOM之後，會繼續執行載入檔案內容，例如圖片、影片、jscss檔案、iframe等等，當這些都載入完成，就會觸發視窗已載入。

點擊 僅連結 使用者點選連結(LinkText)，才會觸發。

所有元素 使用者隨意在頁面上做點擊動作，就會觸發。

例如我點了網頁的空白區塊，就會觸發了。

使用者主動參與 YouTube影片 當網站上嵌入youtube影片，觀看影片的各種狀況，開始、暫停、完成播放，觀看影片的百分比設定。

元素可見度 網頁上物件出現在畫面上，都可以算是觸發元素可見度。

包括載入出現、滾動出現、變化樣式css等等。

捲動頁數 針對滾動整個網頁觸發，用來計算滾動的百分比，可以讓自己定義要追蹤的比率。

表單提交 使用者提交表單就會觸發，

送出

formhtml架構才會觸發，如果是使用javascriptajax傳輸，就不會觸發到表單提交。

其他 JavaScript錯誤 使用window.onError來監聽錯誤，會提供錯誤訊息、錯誤網址、錯誤行號碼等資訊。

自訂事件 dataLayer.push({event:{eventName}})，會依照dataLayer中event觸發。

計時器 可以設定某個動作觸發開始計時，之後再依照設定的時間倒數後在觸發另一個事件。

記錄變更 當使用history.pushState()時會被觸發，可以處理spa的網址變化，運用在react-router。

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

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

javascriptfunctionreturn-回傳留言欄位的內容 function(){ returndocument.getElementById('commentValue').value } tagmanagertagtitle 上面的名稱我取作commentvalue，也就是說之後只要其他地方輸入{{commentvalue}}就可以取得留言的內容。

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

III.代碼 這部分就是tagmanager的核心，經由設定觸發條件，然後執行代碼。

tagmanager整合非常多的不同工具，除了facebookpixel…。

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

簡單講就是，你在tagmanager的追蹤設定，不會影響到原本網站上的程式架構。

網站上一定會埋一堆哩哩摳摳的程式碼，對工程師來說每建立一個新頁面都要用整包，畫面不乾淨也不好維運。

它可以幫助你追蹤碼分離掉。

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

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

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

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

這邊來用tagmanager代碼區塊的自訂html。

建立一個javascript，這段是要判斷google-auto-placed有沒有在html上，這是google自動廣告會帶的className，如果沒有這個class，就代表使用者有裝設adblock。

然後使用dataLayer.push({event:'getAdblock'})產生自訂事件。

代碼區塊使用自訂html tagmanagertagsample 接下來，到觸發區塊點選點選自訂事件，在輸入剛剛pushevent的名稱getAdblock。

tagmanagertagsample3 進入代碼區塊，建立一個ga事件，再輸入事件類別、動作、標籤，觸發就選擇剛剛建好的觸發條件。

tagmanagertagsample2 這樣就大功告成了!! ps.記得點開tagmanager預覽模式，來看一下代碼有沒有成功跑起來。

工作實作心得 記得我兩年前第一次接觸tagmanager，評語是這鬼東西太複雜難用了吧。

但不知道是不是兩年間有改版，最近回頭接觸的感想，發現其實滿好用的！特別是預覽模式，很清楚的在發布前測試有沒有設定正確。

會一直介紹tagmanager的原因，絕對不是因為我最近每天工作都要接觸tagmanager(眼神死…)，是tagmanager功能真的太強大了，對前端開發來說也減少非常多的工時，省去在專案上處理各種ga(xxx)的麻煩、突兀，轉而關注處理dataLayer。

最後最後，如果你是行銷人，然後會用tagmanager的話，我非常敬佩你。

感謝閱讀！tag_manager·google_analytics←Node.jsExpressMongoDBRESTfulApi留言板實作教學Uploadprogressbardrag&drop圖片拖拉上傳進度條→