回上一頁

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

一、GTM是什麼?

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

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

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

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

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

沒使用GTM之前

沒使用GTM之前

GTM教學(一)-基礎概念與追蹤碼實作因此當行銷人自己用GTM埋設網站代碼時,就能大大的減少和資訊人員的來回溝通以及時間虛耗,我們可以看到以電商網站而言過往會部署不同代碼在不同的頁面,但如果是只以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,指的是使用者只要到過你網站任何一頁都會觸發代碼,能夠幫助搜集用戶數
    .

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

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

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

  • 進到GTM後台在工作區的地方有個預覽點下去會顯示如下圖
    .
    接著你回到網頁上重新整裡就會看到下方出現一個區塊,這部分只有你自己看得到,其他人是看不到的,它可以讓你看到下方有哪些代碼已經有被觸發,哪些還沒,例如我埋設Google Ads的再行銷代碼在所有頁面,所以當我載入任何一頁它都應該被觸發,因此就會出現在Tags Fired On This Page那欄。未來不管你埋設多少代碼都可以在發佈前(發佈後也可)就先檢查代碼是否能正常運作哦!
    .
Send this to a friend