If you can't measure it, you can't improve it.
GTM教學(一)-基礎概念與追蹤碼實作

GTM教學(一)-基礎概念與追蹤碼實作

Steven最近與Hahow好學校合作的線上課程上線囉！
期待在課程與你相見😊  https://hahow.in/cr/tagmanager
.
你是不是也曾遇過，常常在埋設網站追蹤碼時要跟工程師來回解釋以及修改代碼感到厭煩？或是常常一封信寄去了，等對方完成代碼部署又過了一個春天(喂～沒那誇張啦！)，但不可否認的是埋設網站代碼的時間常常虛耗在信件來回和溝通上，這也是為什麼行銷人你會需要GTM來拯救你！

本篇文章就來帶領你從零到一認識GTM的基礎邏輯與架構以及代碼的簡易埋設，讓你從此擺脫與工程師之間的愛恨情仇！

一、GTM是什麼？

GTM是一種代碼管理系統，它可以讓使用者直接在後台新增、修改或移除代碼，例如：Google Analytics的分析代碼、Google Ads的再行銷代碼等等，之後要修改也可以直接在後台更新，不需要再請工程師改來改去進而減少錯誤的發生，是一種能夠解決行銷人與工程師之間埋設代碼問題的實用工具！

二、為什麼你該用GTM快速埋設網站代碼？

一般來說許多代碼在網站架設時是不會埋設進去的，通常是在我們確認好行銷目標後，才決定要埋設什麼代碼，例如可能後續有下廣告，就需要追蹤廣告轉換的相關數據等等。而不論廣告代碼或是其他系統代碼通常有四種屬性：

  • 轉換
  • 分析
  • 再行銷
  • 其他

但每一次埋設代碼都需要請資訊人員做一次部署，從告知埋設位置→提供代碼文件→回報時程→最後偵錯與修正，有時候常常要花很長的時間。

因此當行銷人自己用GTM埋設網站代碼時，就能大大的減少和資訊人員的來回溝通以及時間虛耗，我們可以看到以電商網站而言過往會部署不同代碼在不同的頁面，但如果是只以GTM埋設的話就只會看到一種代碼，要修改及自行偵錯也會變得容易許多哦！

三、帳戶架構

在正式進入實作之前，我們要先了解帳戶的基本邏輯與架構是什麼，後續操作起才能得心應手。
新建帳戶時你會看到的是以下三個必填欄位：

  • 帳號：可以想像成是一間公司
  • 容器：網站的名稱
  • 容器使用位置：就是你埋設GTM的地方

創立完成進到後台管理介面，主要分成以下幾大部分：

  • 管理區：此區可以管理這個帳戶底下的使用者權限以及提交代碼
  • 功能區：代碼操作與埋設都在這邊做修改
  • 操作記錄：紀錄是誰修改或新增了什麼代碼
  • 版本區：當正式提交代碼後，就會出現+1的版本紀錄(也就是每改一次提交後就會多一個新的版本)

說明一下管理區的權限部分分成管理員與使用者，當你們是一個團隊一起使用，就會顯得相當重要哦！

  • 管理員：可以把使用者加進來
  • 使用者：可以在容器內做一些其他的設定

使用者又可以細分為五種身份，你可以想像成每個人擁有不同能力和能做的事不一樣。

  • 禁止存取：使用者不能在帳戶內看到相關容器，例如公司底下有三個網站，他只負責一個，另兩個與他無關就設為禁制存取
  • 讀取：類似唯讀，可以看到容器內的東西，但無法進行修改
  • 編輯：可以建立工作區及編輯，但不能建立版本及發佈(代碼在未發佈前都是還沒生效的)
  • 核准：可以編輯、建立版本和工作區，但不能發佈
  • 發佈：使用者擁有完整權限，可建立、編輯並發佈版本和工作區

接下來功能區這部分是在操作的時候一定會用到的區域，主要分為幾個部分

  • 代碼：要啟動的動作是什麼。可以想像成交通警察在馬路上指揮很多車輛(代碼)，什麼時候是哪些車輛應該啟動
  • 觸發條件：網頁載入或是執行某項動作時用來判別是否啟動代碼的根據，每個能被完整執行的代碼，都需要有一個正確的觸發條件，例如：載入某個頁面、點擊某個按鈕等等
  • 變數：代碼被觸發原因可能是載入某個頁面或點擊什麼按鈕，那個未知的頁面或按鈕就叫做變數，簡單來說就是控制代碼觸發的準則
    例如：把商品加入購物車後代碼被觸發是因為網址載入了/cart 的頁面

四、GTM埋Code實戰

接下來就進入實際操作的部分，就用埋設簡單的Google Ads再行銷代碼來實際說明。

  • 首先，當創建好一個GTM會跳出一串代碼，這串代碼是唯一你需要請工程師做的事(當然自己埋也不難，前提是網站在你手上)，請他們埋在網站的head和body裡面，這個動作只需要做一次就好，後續不管你埋多少代碼或是修改代碼都不需要再麻煩工程師囉！如果你不小心關掉也可以直接從紅框框中的GTM-TWVDLBW(每個帳戶不同)直接點下去也會看到哦！
    .
    .
  • 假設當你已經請工程師或自行把代碼埋完了，那該如何檢查呢？很簡單先去安裝一個小工具可以幫助偵測代碼的 Google Tag Assistant 安裝好後它會在你的網站右上角出現一個藍色微笑的圖示，點進去後可以比對GTM那串代碼名稱是不是跟你後台的一樣(此網站是使用黃道育老師課程中所用的練習網站)
    .

    .
  • 當用Google Tag Assistant偵測時，會出現四種顏色代表不同情況，如果要修正直接點選該顏色的代碼就會出現修正說明哦！
    綠色：正常標記
    藍色：正常運作但有改善建議
    黃色：有需要修正的問題
    .
    紅色：代碼有嚴重問題
    .
  • 接下來回後台點選代碼按新增會跳出一個代碼設定的內容，左上角可以依照代碼名稱簡單命名，好辨識即可
    .

    .
    命名完後點選代碼設定會跳出這個畫面，因為我們要埋設Google廣告的再行銷代碼已經有內建的了，也就是GTM本身已經和廣告商合作，只需要輸入一些編號即可，再行銷的部分只需要輸入Google Ads後台的ID即可。
    .

    .

    .
    最後再新增觸發條件選All Pages，指的是使用者只要到過你網站任何一頁都會觸發代碼，能夠幫助搜集用戶數
    .

    .
    最後就可以儲存並提交發佈了，記住！就像前面架構提到的代碼一定要提交發佈後才會生效哦！

五、如何檢查代碼是否埋設正確

假設你想確認到底代碼有沒有埋對、能不能正確被觸發，這裡教大家超實用一個小技巧-預覽工作區

This Post Has 8 Comments

  1. guangyaw

    22 7 月 2019 回覆

    請問原有網站使用舊有ga.js的追蹤碼,如果想使用GTM需要移除原有追蹤碼嗎?
    還是說此兩者的code可以共存?

    1. Steven

      10 8 月 2019 回覆

      嗨你好：-) 要視情況而定，如果你的網站本來有埋設GA code目的是追蹤事件、電子商務事件等等，那就不建議再用GTM追蹤一次，因為GTM無法讀取GA文件上的代碼函數，如果還是要用GTM埋，在不移除GA 追蹤碼的情況下，建議GTM埋原本還沒追蹤的事件就好，當然最好的方式就是GA code也用GTM埋就好囉！

  2. Esther

    16 6 月 2020 回覆

    Hi 您好，謝謝你分享了這麼深入淺出的教學

    想要請教一下，如果GTM出現黃標

    我是否要請工程師再埋一次，

    因為網站後台不再我手上…..。

    1. Steven

      28 6 月 2020 回覆

      Hi Esther,

      如果是 GTM 本身出現黃標，可以用 Tag Assistant 檢查一下，上面會寫原因，可以再反映給工程師做修正喔:-)

  3. Ray

    19 8 月 2020 回覆

    您好
    之前請工程師安裝了GTM及Global site tag
    但一直抓不到訂購轉化的數據
    請問下一步該怎麼處理？
    謝謝

    1. Steven

      1 9 月 2020 回覆

      Hi Ray,

      是指轉換數沒抓到嗎？那有在 GTM 設定在完成意麵要觸發嗎？

  4. MAGGIE

    26 8 月 2021 回覆

    請問原本是埋在網站的CODE 是可以擷取部分的碼埋在GTM嗎?

    1. Steven

      29 8 月 2021 回覆

      Hi Maggie,

      問題有一點點模糊，你是指例如 GA 全站代碼已經埋在網站上，然後再擷取一部分埋設在 GTM 嗎？
      如果是這樣，建議不要唷，因為這樣會重複觸發，但假設你是網站埋 GA Pageview，GTM 埋設事件代碼是沒問題的～

發佈留言

Close Menu