開始使用GTM之前,先認識Google Tag Manager中的代碼、觸發條件與變數

相信有在持續追蹤 awoo部落格的讀者,應該有看過之前的標記管理工具GTM介紹GTM安裝GA教學,不過你是否還是對Google Tag Manager的代碼、觸發條件以及變數這三者的關係感到霧颯颯嗎?本篇文章會更詳細的說明他們之間代表的意義。

開始先確定好所要建立的代碼類型(例如:Google Analytics、Google Optimize或是自訂代碼等等),再決定這段代碼的觸發條件(例如:打開視窗觸發、點擊等等),而變數則是代碼或是觸發條件中為了某個值預留的具名位置(例如產品名稱、價格值或日期)。
代碼、觸發條件、變數關係圖
下面更詳細的介紹變數、觸發條件、代碼三者各自的意義。

GTM – 變數(Variable)

相信如果有寫過程式語法的人,應該都對於「變數」這個詞不陌生,而在GTM上的變數跟程式中的變數代表意義是大同小異的。我們需要先建立變數並定義這些變數的類型是什麼或是代表的值為何,例如之前「Google Tag Manager 教學:第一次裝Google Analytics就上手」文章中提到新增一組Google Analytics追蹤程式碼編號的變數,那這組變數類型為Google Analytics設定,而變數的值就是Google Analytics追蹤程式碼的編號。建立好的變數除了安裝GA用到外,也方便後續有其他設定需要用到GA追蹤程式碼編號的時候可以重複使用,減少設定的重工。

變數(Variable)類型

在Google Tag Manager 中變數類型會因容器類型為網頁(Web)或是手機應用程式(APP)而有所不同(本篇文章會主要介紹網頁的類型),網頁現在主要類型會分為下面這幾種:

  • 導覽
    • HTTP 參照網址
    • 網址
  • 網頁變數
    • 第一方 Cookie
    • 未定義值
    • 自訂 JavaScript
    • 資料層
    • JavaScript 變數
  • 網頁元素
    • 自動事件變數
    • DOM 元素
    • 元素可見度
  • 公用程式
    • 常值
    • 自訂事件
    • 環境名稱
    • Google Analytics (分析) 設定
    • 對照表
    • 隨機數字
    • 規則運算式表格
  • 容器資料
    • 容器 ID
    • 容器版本號碼
    • 偵錯模式

如果想知道各類型變數代表的意思可以參考Google說明文件:網頁適用的使用者定義變數類型,這邊就不另外闡述了。

GTM內建變數


內建的變數會因為容器類型是網頁、AMP、Android 或 iOS而有所不同,以網頁容器來說:會有點擊、錯誤、表單、紀錄、網頁、捲動、公用程式、影片、可見度這幾個大類型的內建變數,以點擊為例:預設的變數有點擊元素、點擊類別、點擊 ID、點擊目標、點擊網址、點擊文字可以供使用,而內建變數不夠用的話也可以新增自定義變數,如果想了解其他更多內建變數,可以前往看GTM內建變數資訊

GTM – 觸發條件(Trigger)

觸發條件其實就跟字面上的意思是一樣的,當網頁或是應用程式的某個條件被觸發,代碼就會在網頁上啟用,而通常觸發條件可以分為幾種:網頁瀏覽、網頁點擊、網頁元素可見度、網頁表單提交、網頁紀錄變更、JavaScript 錯誤、網頁捲動、網頁計時器、網頁影片(YouTube)、自訂觸發事件。
下面列舉幾個觸發條件類型說明:

網頁瀏覽

網頁瀏覽的觸發條件是指使用者進去網頁的各個流程點,通常流程分為:

  1. 進入網頁後瀏覽器開始剖析頁面。
  2. 開始建構網頁的DOM。(不懂什麼是DOM元素的可參考 維基百科:文件物件模型)
  3. 開始載入網頁資源(例如JS、圖片等等外部資源)

 

網頁元素可見度


這項觸發條件可以設定當網頁中的某個元素在頁面中顯現的時候觸發。
例如:

  • 網頁載入後某個元素載入完成後出現
  • 點擊導覽列跳出的下拉導覽列
  • 捲動頁面到某個定點才會出現的元素
  • 其他可能透過JS或CSS 觸發條件後才會出現的元素

網頁元素可見度的觸發條件可設定每個網頁只會觸發一次或是每個元素觸發一次。

  • 每個網頁一次

不論這個元素在頁面有多少個或是重複顯現,都只會在該元素首次顯現後觸發一次,不過如果網頁重新整理或前往瀏覽其他頁面再回來則會再次啟動觸發條件。

  • 每個元素一次

顧名思義,就是當觸發條件的元素有多個數量,每個元素都只會觸發一次,不會有同個元素被觸發多次的情況,或是所有元素只被觸發一次。

  • 每個元素在畫面上顯示時

當設定的元素只要在頁面上顯示一次就會被觸發一次。
如果想要了解其他更多觸發條件,可以到Google官方文件:GTM觸發條件

GTM – 代碼(Tag)的意義

大家應該知道GTM是一款標籤代碼管理工具,代碼就是指由分析、行銷或支援供應商提供的程式碼片段(例如:Google Analytics、Adometry、Crazy Egg),協助將產品整合至網站或行動應用程式,方便後續的管理。

如果內建的代碼沒有所需要的(例如 Facebook Pixel),也可以使用自訂HTML,來安裝並管理代碼。文章前面提到的觸發條件以及變數,在設計的時候要先想好你是要建立什麼的代碼,再來決定觸發條件跟變數應該如何去設定。
例如:我們想利用GTM來追蹤頁面某個元素的點擊數,並傳送事件到Google Analytics做紀錄。
1.先想會需要怎樣的「變數」,而我們要追蹤頁面點擊的話,需要點擊元素的ID或是Classes,由於GTM有內建的點擊變數,可以啟用就好。

2.設定好需要的變數後,預想怎樣的觸發條件下要算點擊次數,是只有連結類型的或是所有頁面元素符合條件的都要計算?

假設選擇所有元素,接下來選擇這項觸發條件的啟動時機,是否只追蹤部分點擊,例如變數Click Class或特定ID的元素。

  1. 變數跟觸發條件都設定完成後,就可以新增代碼了,由於我們要將數據傳給Google Analytics,所以代碼類型選Google Analytics,追蹤的為點擊事件,所以追蹤類型要選擇事件,如果不太懂類別、動作、標籤的話,可以參考關於事件,觸發條件則選擇剛剛建立的。


以上介紹GTM的代碼、觸發條件與變數,希望可以讓大家更熟悉GTM,建議大家在使用GTM之前,可以先了解各個觸發條件、變數類型代表的意義為何,再來實際試著建立一組代碼,就能夠更加的瞭解代碼、觸發條件與變數代表的意義。