Google Tracking Code 安裝設定

在開始追蹤使用者行為之前，我們必須先將 Google 的「全域網站代碼」 (Global Site Tag, 即 gtag.js) 安裝到網站的每一個頁面上。這段程式碼是 Google 所有追蹤服務（包含 GA4、Google Ads、Campaign Manager 等）的基礎。

取得追蹤 ID

首先，你需要取得對應服務的 ID：

Google Analytics 4 (GA4)

  1. 進入 Google Analytics 管理介面。
  2. 點選「資料串流」(Data Streams) > 選擇你的網站串流。
  3. 複製 評估 ID (Measurement ID)，格式通常為 G-XXXXXXXXXX。
  1. 進入 Google Ads 帳戶。
  2. 點選「工具與設定」>「評估」>「轉換」。
  3. 建立或選擇一個轉換動作，在安裝代碼的選項中，你可以找到 轉換 ID (Conversion ID)，格式通常為 AW-XXXXXXXXXX。

安裝 Gtag.js

將以下程式碼放置在網站 HTML 的 <head> 標籤內，建議放在所有其他 script 之前，以確保能盡早開始捕捉數據。

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

  gtag('config', 'TAG_ID');
</script>

請將網址參數中的 TAG_ID 和 gtag('config', ...) 中的 TAG_ID 替換成的你的 GA4 評估 ID (例如 G-ABC123456) 或 Google Ads 轉換 ID (例如 AW-987654321)。

程式碼與運作原理解析

這段程式碼分為兩個部分：

  1. 載入程式庫 (<script async ...>)：

    • 從 Google 伺服器非同步 (async) 下載 gtag.js 核心程式庫。
    • 非同步載入是為了避免阻擋網頁主要內容的渲染。

  2. 初始化函式 (<script> ... </script>)：

    • window.dataLayer：這是 Google Tag Manager 和 gtag.js 用來儲存數據的全域陣列。如果它不存在，就初始化為空陣列。
    • function gtag()：這是一個 helper function，它的作用非常簡單，就是把接收到的參數 push 到 dataLayer 陣列中。gtag.js 核心程式庫載入後，會讀取 dataLayer 中的資料並執行對應動作。
    • gtag('js', new Date())：記錄程式碼開始執行的時間戳記。
    • gtag('config', 'TAG_ID')：這是最重要的指令。它告訴 gtag.js 初始化指定的帳戶容器，並自動開始傳送預設的 page_view 事件。
重點觀念：即使 gtag.js 檔案還沒下載完成，下方的 gtag() 函式呼叫依然有效，因為它只是先把指令推送到 array 裡排隊。這確保了追蹤碼不會因為網路延遲而遺失早期的指令。

同時安裝 GA4 與 Google Ads

如果你的網站需要同時追蹤 GA4 和 Google Ads，不需要 複製兩次完整的程式碼。你只需要載入一次 gtag.js，然後呼叫兩次 config 即可。

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

  // 初始化 GA4
  gtag('config', 'G-XXXXXX');

  // 初始化 Google Ads
  gtag('config', 'AW-YYYYYY');
</script>

這樣做的好處是共用同一個 dataLayer 和 script 資源，效能更好。

進階 Config 設定

config 指令還可以接受第三個參數，用於設定全域的行為。常見的應用場景包括：

關閉頁面瀏覽自動傳送 (Send Page View)

如果你是單頁應用程式 (SPA) 或需要手動控制 Page View 的發送時機，可以將 send_page_view 設為 false：

gtag('config', 'G-XXXXXX', {
  send_page_view: false,
});

設定使用者 ID (User ID)

如果你有會員系統，且使用者已登入，傳送 User ID 可以幫助你作跨裝置追蹤：

gtag('config', 'G-XXXXXX', {
  user_id: 'USER_12345',
});

設定除錯模式 (Debug Mode)

在開發環境中，你可以強制開啟除錯模式，這樣資料就會出現在 GA4 的「DebugView」報表中：

gtag('config', 'G-XXXXXX', {
  debug_mode: true,
});

安裝完成後，你的網站就開始具備基本的流量統計功能了。