google代碼管理工具 tagmanager 使用方式

分享一下使用Google代碼管理工具遇到的各種踩雷情況跟解決方法，本文章是2025.1發布，之後有新的版本設置可能會有些不一樣。

首先第一步，在你的網站安裝程式碼

如果你是用比較常見的架站工具例如wordpress，那有提供相關的外掛可以直接用

如果你是用vue或react自己編寫網頁，那就是透過gtag.js來實踐，再加上開發框架相關套件，就可以透過觸發的方式，但必須要另外安裝。

• 這邊主要講解如何使用gtagmanager網頁的功能來與Google Analytics(GA)綁定
  另外也要先設定GA的帳號才可以進行綁定
  
  

名詞解釋

• 容器：放置代碼的網站位置，通常一個容器就是配一個網站
• 觸發條件：在遇到什麼情況下會記錄你的事件
• 代碼：每一組代碼必須要配合至少一個觸發條件，因此觸發條件跟代碼必須互相綁定才能發揮作用。

綁定方式

以下以連結到GA的方式為例：

代碼設置：選擇G A
G A底下還有兩個選項，一個是Google代碼，另一個是G A
我們要先建一個Google代碼

• • ID：你的GA代碼的ID(G-xxxxxx)
  • 選項：選擇allpage瀏覽頁面

綁定好這個以後我們就可以開始進行其他的代碼綁定，像是點擊某個元素或是送出表單
這一部分的話，我們一樣選G A，然後選擇傳送G A
評估ID同樣是GA代碼的ID(G-xxxxxx)

在貼上的時候網頁就會自動判斷這個代碼有沒有存在

設定變數

接下來我們點選變數這個標籤，並且點選右上的設定。

可以看到有一些已經勾選好了，為了後續因應大部分的情況，我會將點擊底下的欄位全部勾選。

如果你的網站會有表單或是影片，也可以勾選你需要的欄位。

這樣後面我們要傳送事件的時候就能更靈活的運用這些變數。

觸發條件

由於我用到的功能大部分都有限制條件，這部分建議要稍微看懂程式碼(不用會寫，看得懂就可以)，

如果你用到的功能是

• 單純記錄瀏覽網頁或是影片
• 全部網頁都通用

那就不需要加上條件，快速設定就好了

簡單示範

例如我今天有一段連結是

<a class='click_outerlink' id='2'>點擊到外部連結</a>

那我會這樣設置

• 事件名稱：click_outerLink

如果今天類似的連結很多，我就會加入事件參數

• 事件參數：click_outerLink，通常會跟事件名稱一樣
• 值：依據想要顯示的內容或是方便性，選擇click Text, click URL等等變數。
• 觸發條件：選擇你已經設定好的觸發條件

(以上僅是個人經驗)

可能遇到的情況與問題

• 點擊包含

點擊的時候有分成點擊元素跟連結，這部分必須要看你的HTML是怎麼設定的。

這兩個差異在於點擊元素會將任何文字或是圖片都算在裡面，基本上你有按滑鼠都會算一次，點擊連結，通常會用到a標籤。

點選連結時a標籤如果沒有類別(class)或是id可能會不好判定當前的元素，所以可能要確定你想顯示的是哪一些內容，再進行處理。

• 點擊的元素包含

原本以為這個是只要父元素有的內容都可以算在裡面，後來發現必須是點擊的那個元素包含哪些內容才可以，如果要往上一層的元素，那就要使用css選擇器。

• 測試代碼

• 綁定好代碼之後，再還沒送出之前可以用預覽去進行測試，記得一定要同時開啟代碼管理工具的網頁以及測試的頁面，只要跳出測試頁面就會顯示斷線，我的話是使用雙螢幕去測試，也就是一個打開測試頁面另一個觀看目前點擊的情況，就能比較即時判斷哪邊有問題，只有一個螢幕的也可以用分割畫面來做。

• 預覽情況下變更代碼

  在測試的情況中只要有代碼或是觸發條件變更就要斷開重新預覽一次再連線，因為你連線的頁面條件會使用一開始，也就是原始的觸發條件去產生的，我們在每次測試的時候可以看到當前執行的動作判定結果。

• 測試連結

  不一定是要線上的網站，如果你是用開發工具寫網頁的，可以連線到localhost，在這種情形下如果只是進行網頁端的變更(修改class, id等等)，而不是修改觸發條件的話，可以馬上看出變化。
  
  
  

參考資料

https://rexhung0302.github.io/2020/09/13/20200913/
https://steam.oxxostudio.tw/category/ga4/gtm/gtm-ga4-event.html
https://mktgholic.com/google-tag-manager/how-to-use-css-selectors-in-gtm/