GA4 升級筆記 Part's 2 - 事件

首頁關於我

Google Analysis

Mark Ku

January 05, 2025

1 min

GA 與 GTM 的關係

Google Analytics (GA)

GA 是一款網站分析工具，主要用於收集並分析用戶行為數據。透過 GA，您可以深入了解網站訪問量、用戶行為、轉換率等數據。而 GA 的報表數據，通常是透過 Google Tag Manager (GTM) 傳送的。

Google Tag Manager (GTM)

Google Tag Manager (GTM) 是在 2012 年 10 月 1 日正式推出的。它是 Google 為了解決網站標籤管理的複雜性而開發的工具，旨在讓行銷人員和網站管理員能更方便地管理追蹤代碼和標籤，而不需要頻繁依賴工程師修改程式碼，GTM 就像為網站開啟了一扇靈活的 JavaScript 後門。

在談到 GA 事件前，我們必須在網站先埋設追蹤代碼

進入 GA4，按照以下路徑操作：

設定 → 資料收集和修改 → 選擇資料串流。
點擊 代碼設定 → 安裝操作說明 → 選擇 手動安裝，並將提供的程式碼嵌入網站。

注意 GTM 的容器 ID 和 GA 的評估 ID 很容易混淆。

以下是兩者的比較：

特性	GA 評估 ID	GTM 容器 ID
功能	用於追蹤和分析數據	用於管理和部署多個標籤
格式	`UA-XXXXXX-Y` / `G-XXXXXXXXXX`	`GTM-XXXXXXX`
直接部署方式	嵌入 GA 追蹤代碼	嵌入 GTM 容器代碼
靈活性	僅能追蹤單一工具數據	支援多個工具的標籤管理
適用對象	偏向技術人員或需求簡單的網站	適合需要頻繁調整標籤的行銷團隊

如果你的需求只是單純追蹤 GA 數據，且網站結構簡單，可以直接使用 GA 評估 ID；但如果需要管理多個標籤（如 GA、Facebook Pixel、AdWords 等），或經常進行測試與調整，使用 GTM 容器 ID 會更靈活。

GA4 的事件分類

GA4 的事件分成四大類，我們可以根據需求選擇適合的事件類型。

1. 自動蒐集事件

這類事件無需額外設定，只要嵌入 GA4，就會自動開始收集。例如：頁面瀏覽（Page View）。

2. 加強型測量事件

需要在資料串流中開啟「加強型測量」，啟用後會自動收集常見互動數據，例如：

滑動捲動（Scroll）
外部連結點擊（Outbound Clicks）
站內搜尋（Site Search）> 依據 url 的參數
影片參與（Video Engagement）
檔案下載（File Download）

3. 建議事件

建議事件需要依照官方指引進行設定，並透過埋設程式碼將資料送到 GA。例如：

登入（Login）
登出（Logout）
訂購（Order）
電子商務事件（Ecommerce Events）

針對電子商務網站，以下是常見的建議事件：

view_item_list: 商品列表瀏覽
view_item: 商品詳情瀏覽
add_to_cart: 將商品加入購物車
add_payment_info: 填寫付款資訊
purchase: 完成購買

詳細指引請參考官方文件。

4. 自訂事件

如果預設事件和建議事件無法滿足需求，可以透過自訂事件來蒐集客製化數據，並生成符合業務需求的報表。

自訂事件的應用範例：

分析用戶喜歡點擊的按鈕類型。
追蹤用戶偏好的登入方式（例如 Google、Facebook、Email）。

接著，我們將建議事件/自訂事件的參數透過 GTM 傳遞到 GA

1. 在網站前端透過 gtag 將商品傳遞參數至 GTM ，以 add_to_cart 為例

gtag('event', 'add_to_cart', {
  currency: 'USD', // 幣別
  value: 29.99, // 總價值
  items: [
    {
      item_name: 'Gaming Keyboard', // 商品名稱
      item_id: 'SKU12345', // 商品 ID
      price: 29.99, // 商品價格
      quantity: 1, // 商品數量
      item_brand: 'HYTE', // 品牌
      item_category: 'Peripherals', // 類別
      item_variant: 'Black', // 商品變體
    },
  ],
});

2. 接著，我們先訪問 Google tag manager，設定變數 -> 變數 -> 新增

依據傳入參數屬性，逐一建立變數，以傳遞給GA的事件參數

<script type="text/javascript">
(function(c,l,a,r,i,t,y){
    c[a]=c[a]||function(){
        (c[a].q=c[a].q||[]).push(arguments)
    };
    t=l.createElement(r); t.async=1; 
    t.src="https://www.clarity.ms/tag/"+i;
    y=l.getElementsByTagName(r)[0];
    y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "h6t6k0bky81");
</script>

注意：將 h6t6k0bky81 替換為你自己的 Clarity 專案 ID。