( Day 6 ) GTM 和 gtag.js 的差異

2023 iThome 鐵人賽

DAY 6

Modern Web

跟著 OXXO 一起學 GA4 ( Google Analytics 4 )系列第 10 篇

15th鐵人賽 ga4 google analytics

oxxo

2023-09-06 00:16:05

708 瀏覽

分享至

GTM（ Google Tag Manager ）和 gtag.js 都是作用於在網站上安裝 Google Analytics 的工具，雖然兩者的目標相同，但實現方式卻有所不同，這篇教學會介紹 GTM 和 gtag.js 的差異。

原文參考：GTM 和 gtag.js 的差異

GTM 簡介

GTM ( Google Tag Manager ) 是 Google 提供的免費網站標籤管理工具，它可以讓網站管理者更容易的新增、編輯和刪除網站上的追蹤程式碼 ( 例如 Google Analytics、Facebook Pixel、Google Ads Conversion Tracking...等 )，GTM 可以透過網頁標籤嵌入網頁，在不需要接觸網站原始碼的情況下，就能快速管理所有網站追蹤程式碼。

詳細設定參考：開始使用 GTM

只要將 GTM 容器程式碼放到網頁 HTML 中指定的位置，網頁開啟後就會透過 GTM 開始收集數據，基本的範例如下：

<!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 ( GTM ) -->
  <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>

gtag.js 簡介

gtag.js 是 Google Analytics 的 JavaScript 追踪代碼，它取代了以前的Analytics.js 代碼。gtag.js 可以直接嵌入網站代碼中，以收集使用者的行為數據，並更加精確地測量網站的流量與互動成效。

詳細設定參考：安裝 GA4 資料收集代碼

只要將 gtag.js 的資料收集代碼放到網頁 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>Document</title>

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-XXXXXX);
  </script>
</head>
<body>

</body>
</html>

區分 GTM 和 gtag.js

雖然 GTM 和 gtag.js 都可以使用 Google Analytics 來收集使用者的行為數據，但仍然一些重要的區別，以下列出 GTM 和 gtag.js 的幾個主要差異：

功能：
- GTM：全面的標籤管理系統，可以管理許多種不同的標籤和代碼，包括 Google Analytics、AdWords、Facebook Pixel...等。
- gtag.js：專門用於 Google Analytics 數據收集的輕量級追踪代碼。
實現方式：
- GTM：屬於中間層的「容器」，可以在不更改網站代碼的情況下進行管理和部署作業。
- gtag.js：直接嵌入到網站 HTML 中的追踪代碼，不需要通過中間層容器進行管理。
效率：
- GTM：因使用時需要通過中間層容器進行處理，可能會對網站速度產生輕微的影響。
- gtag.js：直接將資料傳遞至 Google Analytics，速度相對較快。
難易度：
- GTM：GTM 可能需要較長的學習曲線，去熟悉其控制介面和設定方式，且仍需學習 GA4 的用法。
- gtag.js：只需要知道程式碼安裝的位置和寫法，同樣也需要學習 GA4 的用法。
跨平台部署：
- GTM：可以跨多個平台進行部署，包括網站、移動應用程序和 AMP 頁面等等。
- gtag.js：只能在網站中使用，無法應用於移動應用程序或 AMP 頁面等其他平台。
版本控制：
- GTM：允許使用版本控制系統來管理和維護標籤與容器版本。
- gtag.js：沒有版本控制功能，所有更改都必須手動維護。

小結

GTM 可以讓管理者在網站上管理所有的跟踪代碼，非常適合不需要撰寫程式的行銷或管理人員，而 gtag.js 則於一種更加輕量級的解決方案，它專注於 Google Analytics 的數據收集，並可透過程式碼進行相關互動事件收集，較適合會撰寫程式的開發人員，總之，GTM 和 gtag.js 都是用於 Google Analytics 的追踪代碼管理工具選，可以根據自己的需求，選擇適合的工具進行追蹤。

跟著 OXXO 一起學 GA4 ( Google Analytics 4 )系列第 10 篇