【GTM 追蹤學】三步驟入門 Google Tag Manager (GTM) 教學

GTM 入門第一堂課 - GTM 埋設

Google Tag Manager (GTM) 是一款讓行銷人在不需更改網站原始碼的情況下,就輕鬆的新增 Google Ads 或 Meta 廣告追蹤碼、GA 追蹤碼,同時擁有版本控制和權限控管的 Google 程式碼管理工具。

GTM 教學入門三步驟

本篇教學將 GTM 入門分成三個步驟:從帳戶創建、GTM 程式碼埋設教學、到檢查埋設結果,帶你 5 分鐘快速入門 Google Tag Manager (GTM) 代碼管理工具教學。

步驟 1. 創建 GTM 帳戶

  1. 首先到 Google 代碼管理工具 https://tagmanager.google.com/,點擊「建立帳戶」
  1. 填入「帳戶名稱」和「容器名稱」,命名之後都可以做調整
  2. 選擇 「網路」(Web) 的追蹤後,點選「建立」

步驟 2. 埋設 GTM 程式碼

▍手把手埋設 GTM 程式碼教學

  1. 點擊 GTM 網頁中預覽旁邊的 “GTM-XXXXXXX” 文字 (如下面圖示)
  1. 接下來要複製二號框框中的程式碼,請工程師將以下程式碼埋設在「所有頁面」的「<head>」最上方。
  2. 然後複製三號框框中的程式碼,請工程師將以下程式碼埋設在「所有頁面」的「<body>」的正後方。

▍補充 1. 埋設 GTM 在網站上後,這段程式碼會做些什麼事情?

  1. 首先他會建立一個 dataLayer 的全局變數,如果之前已經建立過則會沿用已經存在的 dataLayer
  2. 再來會向 dataLayer 推送一個開始時間的標記
  3. 最後會在最上方增加一個 <script> 標籤,並從 www.googletagmanager.com 中引入 gtm.js

▍補充 2. GTM 可否同時埋設多組不同的 GTM 程式碼?

如果在網頁上埋設多組不同代碼的 GTM,會有衝突嗎?答案是不會,因為在載入的過程中 GTM 會偵測 dataLayer 是否已經載入,所以同時埋設多組 GTM 的情況並不會有衝突。

步驟 3. 檢查 GTM 安裝結果

▍方法一:利用 GTM 預覽功能

  1. 在 GTM 裡面右上方點擊 預覽 (preview)
  2. 輸入你埋設的網站網址,例如 https://www.maxlist.xyz
  3. 如果看到以下畫面,有載入你的 GTM 則代表埋設正常

▍方法二:利用 Chrome 擴充套件 Tag Assistant

推薦使用 Goolge 自己推出的 Tag Assistant 擴充套件,使用上非常簡單,只需要在第一次載入後重新整理頁面,就可以看網站上有引用的 GTM、GA、Google Ads 程式碼囉。

顯示上會有四種顏色

  1. 綠色:正常標記
  2. 藍色:正常運作,但有改善空間
  3. 黃色:程式碼有需要修正的問題
  4. 紅色:程式碼有嚴重問題

▍方法三:檢視原始程式碼

  1. 進入網站後,在網頁上空白處點擊右鍵,選擇檢視”網頁原始碼”
  2. 埋設正確的話,你會看到 <html> 後面有一段 GTM 自動生成的 <script>,會引入 gtm.js
  3. <head> 標籤後方會看到,第一段 GTM 程式碼
  4. <body> 標籤後方會看到,第二段 no script 的 GTM 程式碼

最後本篇文章「三步驟入門 Google Tag Manager (GTM) 代碼教學」,就到這邊告一個段落,感謝收看!


與 GTM 相關系列文章

最後我是 Max,過去曾在「新加坡蝦皮」擔任資深數據分析師,管理蝦皮所有國家的 Google Tag Manager,也曾在「圖靈數位」為上百家的網站埋設和清理 GTM,如果你有GTM 企業內訓需求電子商務埋設檢查GTM 埋設需求歡迎與我聯繫

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *