目的
身為網站開發者或運營，我們通常會想了解會員在網站的操作行為，並期待將其事件數據整合在 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，在報表 > 參與 > 事件，你就可以看到從前端程式傳來的自訂事件
留言