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

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

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

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

google tagmanager

Tag manager 設定邏輯

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

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

查看html標籤

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

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

chrome devtool

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

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

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

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

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

II.變數

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

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

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

tag manager tagtitle
上面的名稱我取作 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,最後觸發條件再選擇送出留言。

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

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

tag manager tagsample3

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

tag manager tagsample2

這樣就大功告成了!!

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

工作實作心得

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

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

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

感謝閱讀!