【GA4】【GTM】如何設定夾帶 user_id 的事件？

用 gtm 搭配程式碼來觸發事件！

2024/04/25

前言

行銷需求想要做到的是：
- login 之後，把 user_id 作為「使用者參數」帶給 GA4 。
- 如此一來，這樣就可以設定 GA4 的篩選器，以區分有登入和沒登入觸發的事件，分析登入與未登入的事件數據。
這次以 GTM 來做流程示範。

重點

簡單講解各種工具、程式的職責：

GTM：負責設定代碼，主要作為事件的觸發與變數處理，將代碼觸發後的事件發送給 GA4。
dataLayer(in GTM)：負責把「資料設定給」 GTM，不會直接經由 GTM 把 event 送給 GA4 。（實作部分會講解怎麼透過 dataLayer 來設定值，然後用 GTM 設定觸發做事件的發送）
- 其中使用的 method：push(Record<string, any> payload)
GA4：負責「接住」GTM 傳送過去的事件，來做各種行銷評估。

實作

1. GTM 設定 GA4 相關之初始化 tag

代碼 → 新增（在右上角）
未命名代碼（在左上角），取個易讀好懂的代碼名稱
代碼設定 → Google Analytics (分析) → Google 代碼
依序填入
- 代碼 ID：GA4 來的代碼，如下圖所示，到 GA4 把它給複製過來。
- 配置設定：配置參數 & 值，設定 user_id 和 {{user_id}} 即可（記得大括號也要原封不動寫上去）
最後，還要設定「變數」
1. 變數 → 變數設定 → 資料層變數
2. 資料層變數名稱填入 user_id

2. 程式內觸發 `dataLayer` 設定

把登入後取得的 user id，處理成一個「看不出」user 真正資訊的 user_id。（因為 Google 的規定，需要處理 user_id 為「看不出是原本使用者」的資訊。）
- e.g. 若以 email 作為 user 識別，可以把 email 做個 hash 運算：abc123@gmail.com → adajg29efadfkj;24jd90#9u2
- e.g. 如果是以 username 作為 user 識別，user id 透過 hash 來轉換： abc123 → sfaj;asfj2asdj1$jka

在登入後觸發 dataLayer.push()

//...

async function login(username: string, password: string) {
	try {
		const res = await signRepo.login(username, password);
		window.dataLayer && window.dataLayer.push({
			user_id: hash(username),
		})
	} catch(e) {
	}
}

3. GTM 設定觸發條件：兩種做法

方法一：直接帶著剛剛用 dataLayer 設定好的使用者參數，在 GTM 設定「代碼」的方式做觸發

以下範例為「點擊任一連結」時，發送 click_with_user_info 的事件到 GA4，並一起帶著「使用者參數」過去（也就是 user_id）

事件名稱自己訂，這個會跟 GA4 事件串接有關，審慎命名喔！

!https://imgur.com/6fcO2as.jpg
方法二：設定「自訂事件」，送給 GTM 做觸發
1. 首先，修改剛剛的 login 函式，將 event 作為參數值一起呼叫函式。
```
//...

async function login(username: string, password: string) {
	try {
		const res = await signRepo.login(username, password);
		window.dataLayer && window.dataLayer.push({
			event: 'login', // 多這個 event 的 key, value
			user_id: hash(username),
		})
	} catch(e) {
	}
}
```
2. 接下來，到觸發條件設定「自訂事件」，把上一步的 event 給「接起來」，事件名稱跟剛剛在 event 這個欄位設定的要完全一樣。
3. 接著，設定代碼，將觸發條件設為剛剛設定好的 login「自訂事件」，這樣就可以把剛剛透過 dataLayer 物件傳送的自訂事件，交由 GTM 觸發事件給 GA4。

4. 補充說明

Q: 如何把設定好的 user_id 給重設？（比方說用在 log out 之後，要把 user_id 給清空）

A: 再次呼叫 dataLayer.push，但把 user_id 的值設為 null 就行了。如下 sample code

function handleLogout() {
    window.dataLayer.push(function () {
        this.set('user_id', null);
    })
}

小結

為何要用 GTM 設定 user_id？有什麼好處？

user_id 透過 dataLayer.push 設定好之後，可以在其他 GTM 代碼中，也夾帶著這個 user_id 做事件觸發。

REF

#程式開發

#GA4

繼續閱讀 Related posts

【GA4】【GTM】如何設定夾帶 user_id 的事件？

用 gtm 搭配程式碼來觸發事件！

前言

重點

實作

1. GTM 設定 GA4 相關之初始化 tag

2. 程式內觸發 `dataLayer` 設定

3. GTM 設定觸發條件：兩種做法

4. 補充說明

小結

為何要用 GTM 設定 user_id？有什麼好處？

REF

目錄

72企鵝

【GA4】【GTM】如何設定夾帶 user_id 的事件？

用 gtm 搭配程式碼來觸發事件！

前言

重點

實作

1. GTM 設定 GA4 相關之初始化 tag

2. 程式內觸發 dataLayer 設定

3. GTM 設定觸發條件：兩種做法

4. 補充說明

小結

為何要用 GTM 設定 user_id？ 有什麼好處？

REF

目錄

72企鵝

2. 程式內觸發 `dataLayer` 設定

為何要用 GTM 設定 user_id？有什麼好處？