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

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

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

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

Tag manager 設定邏輯

設定 trigger(觸發) => 設定 tag(代碼) => publish(提交) ps. 每個步驟中都可以使用變數

查看 html 標籤

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

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

chrome devtool
chrome devtool

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

chrome devtool2
chrome devtool2

按鈕 HTML

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

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

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

I.觸發條件

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

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

tag manager trigger
tag manager trigger

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

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

tag manager tagsmaple4
tag manager tagsmaple4

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。

tag manager triggerlist
tag manager triggerlist

II.變數

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

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

  • javascript function return - 回傳留言欄位的內容
function(){ return document.getElementById('commentValue').value }

tag manager tagtitle
tag manager tagtitle

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

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

III.代碼

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

tag manager 支援代碼

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

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

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

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

tag manager tagsmaple5
tag manager tagsmaple5

 追蹤 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>

tag manager tagsample
tag manager tagsample

接下來,到觸發區塊點選點選 自訂事件,在輸入剛剛 push event 的名稱 getAdblock。

tag manager tagsample3
tag manager tagsample3

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

tag manager tagsample2
tag manager tagsample2

這樣就大功告成了!!

ps.記得點開 tag manager 預覽模式,來看一下代碼有沒有成功跑起來。

工作實作心得

記得我兩年前第一次接觸 tag manager,評語是 這鬼東西太複雜難用了吧 。但不知道是不是兩年間有改版,最近回頭接觸的感想,發現其實滿好用的!特別是預覽模式,很清楚的在發布前測試有沒有設定正確。

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

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

感謝閱讀!