目的

身為網站開發者或運營，我們通常會想了解會員在網站的操作行為，並期待將其事件數據整合在 Google Analysis 中，以便了解使用者的行為事件，作為網站開發及運營的改善依據。 如: 用戶有沒有登入、結帳、選擇什麼付款方式，是不是有完成訂單等。

運作原理

會員網站執行特定功能時，前端網站透過 Google tag manager api 指令，觸發事先設定好事件，轉發到指定 Google analysis中。

事前準備

• 建立 Google Analysis 帳號，並設定好域名
• 在你的網站，埋入 Google Analysis 代碼
• 在你的網站，埋入 GTM 代碼

步驟

首先，登入 GA後，設定 > 資料串流 > 選取你的資料串來來源 > 複製評估 ID

登入GTM > 建立帳戶

接著，我們將 GA 帳號和 GTM 進行關聯，並將其名命為 “GA4整合”，代碼 > 新增 > Google Analytics (分析)：GA4 設定 > 貼上先前從 GA複製的評估 ID > All Pages > 儲存

在你的前端網站，透過前端程式碼去推送事件給 GTM，並透過 GTM 挷定好的事件推送給 GA。

export const checkoutViewEvent = (params: GTMProducts[]) => {
  if (window.dataLayer) {
    window.dataLayer.push({ ecommerce: null });
    window.dataLayer.push({
      event: 'checkout',
      ecommerce: {
        checkout: {
          actionField: {
            step: 1,
          },
          products: params,
        },
      },
    });
  }
};

建立自訂事件 > 觸發條件 > 新增 > 選自訂事件 >事件名稱填 前端 push 的 event name > 儲存

將剛建立的自訂事件關聯到先前的 “GA4整合”

代碼 > 新增 > Google Analytics (分析)：GA4 事件 > 選取 “GA4整合” > 事件名稱 checkout > 觸發條件 checkout > 儲存

我們可以透過預覽功能除錯，來確認 GTM 是不是有收到事件，並將其轉發到 GA

最後，提交

因為事件追蹤、自訂維度和自訂指標，需要靜待等待 24~48小時才會更新，登入 GA，在報表 > 參與 > 事件，你就可以看到從前端程式傳來的自訂事件

參考資料

Google Analytics 4 事件追蹤指南（2022）

GTM 安裝 Google Analytics 4 網站資料串流教學

新版GA4電子商務事件，新舊差異與Purchase轉換一次解析

GA Event Tracking in GTM – Pass-Through Data Layer