GTM 和 gtag.js 的差異
GTM（ Google Tag Manager ）和 gtag.js 都是作用於在網站上安裝 Google Analytics 的工具，雖然兩者的目標相同，但實現方式卻有所不同，這篇教學會介紹 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 的追踪代碼管理工具選，可以根據自己的需求，選擇適合的工具進行追蹤。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～