搜尋

開始使用 GTM

要使用 GTM 管理追蹤代碼之前,必須要先熟悉 GTM 的用法,這篇教學會介紹如何開始使用 GTM,從最基本的建立帳戶與新增代碼,一直到在網頁中安裝 GTM 容器代碼。

快速導覽:

登入 GTM

使用 Google 帳號登入 GTM,登入後可以建立帳戶,或查看自己 Google 帳號下的 GA 追蹤代碼。

GTM 網址:https://tagmanager.google.com/

GA4 ( Google Analytics 4 ) + GTM 教學- 開始使用 GTM - 登入 GTM

在「建立帳戶」頁籤裡,可以建立 GTM 的帳戶已變進行代碼管理,切換到「Google 代碼」頁籤,則可以管理自己 Google 帳號下擁有管理或觀察權限的 GA 追蹤代碼。

GA4 ( Google Analytics 4 ) + GTM 教學- 開始使用 GTM - Google 代碼

建立帳戶

要使用 GTM 必須先「建立帳戶」,該帳戶與個人帳戶不同,是專門用來管理 GTM 代碼的帳戶,點擊「建立帳戶」按鈕,簡單輸入帳戶名稱以及容器名稱 ( 通常是以網站網址作爲名稱 )。

在 GTM 裡,會使用「容器」安裝各種不同工具與代碼,每個帳號下可以具有有多個不同的容器,每個容器裡可以建立多個不同種類的代碼,容器彼此獨立互不影響。

GA4 ( Google Analytics 4 ) + GTM 教學- 開始使用 GTM - 建立帳戶

確認相關條款後,GTM 的帳戶就建立完成。

GA4 ( Google Analytics 4 ) + GTM 教學- 開始使用 GTM - GTM 的帳戶就建立完成

新增代碼

點擊左側「代碼」選項,點擊右上方的「新增」,就能在 GTM 的容器裡,新增相關的追蹤代碼。

GA4 ( Google Analytics 4 ) + GTM 教學- 開始使用 GTM - 新增代碼

點擊「代碼設定」欄位,就能選擇要加入的代碼類型,在「精選」的區域通常是 Google 自家追蹤代碼。

GA4 ( Google Analytics 4 ) + GTM 教學- 開始使用 GTM - 「精選」的區域通常是 Google 自家追蹤代碼

在「更多」區域通常是其他平台或服務的追蹤代碼。

GA4 ( Google Analytics 4 ) + GTM 教學- 開始使用 GTM - 其他平台或服務的追蹤代碼

如果有其他沒有在清單裡面的代碼,就需要使用「自訂 HTML 代碼」進行部署,甚至也可以使用「自訂圖片代碼」部署像素廣告代碼 ( 參考:自訂代碼 )。

GA4 ( Google Analytics 4 ) + GTM 教學- 開始使用 GTM - 自訂 HTML 代碼

安裝 GTM 容器代碼

如果要透過 GTM 執行各種代碼的追蹤,必須要先將 GTM 的容器代碼放到網站 HTML 裡,點擊「管理」頁籤,點選「安裝 Google 代碼管理工具」。

GA4 ( Google Analytics 4 ) + GTM 教學- 開始使用 GTM - 安裝 Google 代碼管理工具

點擊後,按照操作步驟,將 GTM 容器程式碼放到網頁 HTML 中指定的位置,放在 <head></head> 裡的是主要容器代碼,放在 <body></body> 裡的是在瀏覽器不支援 JavaScript 時才會啟用的代碼。

GA4 ( Google Analytics 4 ) + GTM 教學- 開始使用 GTM - 將 GTM 容器程式碼放到網頁 HTML 中指定的位置

將代碼放入網頁的程式碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GTM test</title>
  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','你的GTM容器ID');</script>
    <!-- End Google Tag Manager -->
</head>
<body>
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=你的GTM容器ID"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
</body>
</html>

認識 GTM 的 Data Layer

資料層 ( Data Layer ) 是 GTM 運作的基礎,也是 GTM 用於收集網站數據的關鍵。Data Layer 屬於一種 JavaScript 物件,目的在於儲存網站中所獲得的數據,讓 GTM 可以輕鬆地檢測到並追蹤這些數據,並在特定事件發生時進行觸發,GTM 可以更準確地追蹤使用者行為並收集更豐富的數據。

觀察安裝在 HTML 裡的 GTM 程式碼,可以發現裡面出現了「dataLayer」的文字,在程式碼中的 dataLayer 代表程式變數,目的是透過變數收集數據,並藉由 push 的命令將數據傳送到 GTM,因此透過 GTM 操作自訂事件時,常常會使用dataLayer.push的語法。

GA4 ( Google Analytics 4 ) + GTM 教學- 開始使用 GTM - 認識 GTM 的 Data Layer

小結

雖然 GTM 可以讓行銷或管理人員不需要寫程式就能追蹤數據,但在相關代碼安裝上,仍然需要開發或程式設計師協助,但只要網站安裝了 GTM 的容器代碼,就可以開始正式進行流量與數據的追蹤和分析了。

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

GA4 教學

介紹與設定

GA4 教學導讀 認識 GA4 通用版 GA 與 GA4 的差異 建立 GA4 分析資源 安裝 GA4 資料收集代碼 刪除/還原/移動帳戶資源

快速開始&測試

設定輔助程式 使用測試網頁 啟用示範帳戶

使用 GTM

認識 GTM 開始使用 GTM GTM 與 gtag.js 的差異 加入 Google 代碼 加入 GA4 事件代碼 設定觸發條件 設定變數 安裝 Facebook 像素

事件

加強型評估事件 自動收集事件 建議事件 自訂事件 修改與建立事件 標示轉換事件 設定轉換事件價值 設定電子商務事件

資料收集

啟用 Google 信號 使用 User-ID 建立目標對象 使用 DebugView 測試 資料&報表篩選器 資料保留期限&更新間隔 跨網域追蹤 使用 UTM 收集資料 Measurement Protocol 資料匯入 共用及匯出報表 連結 Search Console

資料解讀

認識維度和指標 自訂維度和指標 使用者屬性 工作階段&互動工作階段 參與度&跳出率 使用者&新使用者

報表

集合&主題&報表 首頁 深入分析 自訂報表、主題和集合 報表數據匯報 即時報表 到達網頁報表 網頁和畫面報表 事件報表 轉換報表 獲取新客報表 流量開發報表 電子商務購買報表 使用者購物歷程報表 回訪率報表 客層詳情報表 技術詳情報表

探索

認識探索報表 設定探索報表 任意形式 同類群組探索 漏斗探索 區隔重疊 路徑探索 使用者生命週期 使用者多層檢視

廣告&歸因

歸因模式&歸因分析 廣告數據匯報 所有頻道成效報表 模式比較報表 轉換路徑報表

實際應用

同時使用多組資料串流 追蹤 Email 開信率 追蹤網頁捲動高度 追蹤網頁元素點擊 觀察特定頁面成效 篩選並排除內部流量

GA4 認證考古題

如何進行與準備認證 考題 - 設定&觀念 考題 - 事件&維度&指標 考題 - 報表&探索&廣告 考題 - 其他