GTM 入門介紹 – 認識代碼、觸發器與變數

GTM 代碼是什麼？

所有 Google Tag Manager 代碼都是由程式語言組成，透過程式語言傳達指令給網站執行相關動作，對於不會程式語言的使用者也不需要擔心，因為幾乎所有的 GTM 代碼都已經被製作成視覺化代碼，只需要將對應的參數填入設定格中即可完成代碼設定。代碼設定完成後代碼並不會主動進行任何動作，每一個 GTM 代碼都可以設定一個或多個觸發器，當觸發器條件被完全滿足時，代碼才會被執行。

精選代碼

精選代碼是由 Google 所開發的，主要支援 Google 相關的工具，其中最常使用的包含 Google Analytics 追蹤與 Google Ads 轉換代碼。

第三方代碼

第三方代碼是由 Google 以外的開發者製作， Google 提供了自定義模版的開發功能，讓開發者能夠將自訂的代碼製作成視覺化代碼供他人使用。當 Google 提供的精選代碼沒辦法滿足需求時，可以試著在第三方代碼找找看，對於不會程式語言的使用者來說可以解決不少問題，舉例來說， Facebook pixel 轉換代碼、 Hotjar 、 Mouse flow 、 linkedin insight 等等都可以透過第三方代碼輕鬆完成安裝。

使用第三方代碼前必須要注意，畢竟代碼是由 Google 以外的廠商所開發，盡可能避免使用來源不明的代碼，避免資料外洩的風險。

自訂代碼

上述提到的精選代碼以及第三方代碼都是已經視覺化的代碼，但也因為如此，如果需要一些額外的自訂功能，往往會受到限制，如果精選和第三方代碼都無法滿足需求，自訂代碼會是另外一個解決方案。

自訂代碼其實就是直接將程式語言新增到網站上，應用範圍非常廣，不管是安裝代碼、修改網站CSS外觀甚至更改網站內容，都可以透過自訂代碼完成，基本上不會有任何限制；但也因為如此，使用時必須更加的注意，錯誤的自訂代碼輕則可能導致網站速度降低，重則有可能癱瘓整個網站，而惡意的自訂代碼則會造成網站數據外洩！

發佈版本如果有包含自訂代碼，一定要請工程師檢查代碼後再發布，可以透過容器權限的管理，將發布權限給到最後檢查的工程師手上，確保版本不會在檢查前被發布，詳細使用者權限介紹可以參考這篇文章。

更多代碼相關的說明可以參考官方文件。

GTM 觸發條件 (觸發器) 是什麼？

先前有提到過每一個完成設定的代碼都必須要配合一個或多個觸發器，在完成觸發器所有條件時才會被執行；當我們為一個代碼設置多個觸發器時，觸發器之間會有一個“或”字，代表著只要任何一個觸發器完成條件就會觸發代碼，除了觸發條件以外也可以為代碼設定例外狀況，只要條件符合例外狀況，即使其他觸發器完成條件代碼也不會被觸發。

網頁瀏覽觸發器

同樣都是網頁瀏覽卻有著三種觸發器可以選，唯一差別就在於觸發的順序，由先至後的觸發順序為 網頁瀏覽 –> DOM 就緒 –> 視窗已載入。 通常會依照代碼的重要性及優先性來決定要使用哪一個觸發器來當作觸發條件；舉例來說， Google Analytics 網頁瀏覽追蹤代碼是所有 GA 代碼最重要也是最早就要觸發的，所以普遍會使用網頁瀏覽觸發器做為觸發條件。

使用網頁瀏覽觸發器除了能夠優先觸發以外，也能夠避免數據的遺漏，因為網頁瀏覽觸發器是所有觸發器當中最早觸發的，和視窗以載入觸發器相比，兩者同樣為網頁瀏覽類別的觸發器，觸發時間卻有可能間格好幾秒，如果使用者在視窗載入以前就離開頁面，那麼使用視窗已載入當作觸發條件的代碼就不會被觸發。聽到這裡很多人會認為那就將所有網頁瀏覽行為的代碼都使用網頁瀏覽觸發器就好，但這麼做其實會造成網站本身的負擔，過多的代碼會讓使用者花更多的時間載入頁面，造成更高的頁面跳出率，在設定觸發條件時應按照代碼的重要性來決定使用哪一個觸發器當作觸發條件。

點擊觸發器

點擊觸發器可以追蹤使用者的點擊行為，僅連結觸發器只有在點擊網址時會觸發，所有元素觸發器會在點擊任何網站內的元件都會觸發，當使用者點擊網址時會先觸發所有元素的觸發器緊接著再觸發僅連結觸發器。

注意：當使用者點擊網站上的 iframe 元件時並不會觸發任何點擊觸發器， 因為 iframe 元件本身是將其他網站的內容內嵌到網站內的一部分，所以 iframe 的點擊實際上並不是發生在站內，也就無法使用站內的 GTM 追蹤，除非 iframe 的網站也有安裝 GTM 則另當別論。

使用者參與觸發器

使用者參與觸發器會在使用者與網站之間產生互動行為時觸發，包含以下四種：

• YouTube 影片播放
  • 所有內嵌 YouTube 影片都可以使用此觸發器來追蹤影片的播放、暫停、完成或是指定的播放百分比。
• 元素可見度
  • 可使用 CSS 選擇器或元素 ID 來指定元素，當元素出現在使用者畫面上時就會被觸發，通常會用來紀錄文章閱讀完成、活動 Banner 的出現次數。
• 捲動頁數
  • 實際上就是捲動百分比，可自訂水平或垂直瀏覽的行為，通常會用來紀錄開始瀏覽頁面 (5%)與瀏覽頁面到底部 (90%)的行為。
• 表單提交
  • 可紀錄使用者的表單提交行為，提供等待代碼與檢查驗證兩項功能，可以設定延遲確保觸發器能夠在頁面跳轉以前被觸發，以及確保觸發器只在表單成功提交時啟動。

其他觸發器

• JavaScript 錯誤
  • 發生系統沒有偵測出的 JavaScript 例外狀況 (window.onError) 時觸發。
• 自訂事件
  • 當以上提到的觸發器無法滿足需求時，可透過程式碼在指定的條件達成時發送自訂事件到當做觸發器。
• 觸發條件群組
  • 先前有提到過每一個完成設定的代碼都必須要配合一個或多個觸發器，預設的狀況下，只要任一個觸發器完成所有條件，就會觸發代碼，使用觸發條件群組可以將多個觸發器合併成一個新的觸發器，且必須要達成觸發條件群組內所有觸發器的所有條件才會執行代碼。
• 計時器
  • 可在固定的時間間隔傳送訊號，藉此來評估使用者在網頁上花了多少時間來完成某件事 (例如閱讀文章、填寫表單或完成購買)。
• 紀錄變更
  • 會在網址片段 (雜湊) 變更或網站使用 HTML5 pushState API 時觸發。

更多觸發器相關的說明可以參考官方文件。

GTM 變數是什麼？

如字面上的意思一樣，變數會儲存一個變動的值，需要時可直接拿來使用；舉例來說當頁面的標題設定為一個變數，不管在網站中的哪一個頁面只需要讀取該變數就可以獲得當前頁面的標題。

變數是 GTM 最重要的一部分，不管是代碼或是觸發器都有可以使用變數的地方， 辨識變數最快的方式就是看它的外觀，所有 GTM 的變數都會被{{}}包覆著 ( 例：{{變數}} )。

內建變數

GTM 提供了不少預設變數可使用，常用的變數包含網頁標題、網頁路徑、點擊、頁面百分比等等，總共有將近50個變數可使用，將需要的變數打勾即可在容器內使用該變數。

使用者定義變數

除了內建變數以外，也可以根據需求使用自定義變數， GTM 為大多數的使用情境提供了相對應的變數模組，所以在不使用程式語言的條件下就可以滿足大部分的需求。當然， GTM 也提供了自訂 JavaScript 變數模組，可以使用自定義 JavaScript 來取得網站所需變數，但要注意的是使用過多或過於複雜的 JavaScript 會影響網站運行速度，建議使用自訂 JavaScript 以前再次確認是否有其他預設變數模組可以使用，非必要情況之下能避免就盡量不要使用自訂 JavaScript 變數。

更多變數的說明可以參考官方文件。