透過 Google Tag Manager (GTM) 實作Google Consent Mode

GA4 網站分析商務實戰 Jul 18, 2024
快速導覽

前言

在前一篇文章「什麼是 Consent Mode?」中我們介紹了什麼是 Google Consent Mode 之後,本篇文章我們將以網站為例,一步一步帶領各位讀者透過 Google Tag Manager (GTM) 工具在自己的網站中導入 Google Consent Mode。

如同前一篇文章所提到的,Google Consent Mode 最主要的識別參數有四個,包含「ad_storage」、「ad_user_data」、「ad_personalization」以及「analytics_storage」。每個參數在官方文件中都有各自的定義,當使用者授權或是拒絕時,則 Google 對應的平台可收集或是執行的內容是什麼。舉例來說,當「ad_personalization」被拒絕時,則代表使用者拒絕接受個人化廣告,因此 Google 廣告平台就不會接收到再行銷功能以及個人化廣告的訊號。

針對同意模式的四個參數以及描述,整理如下(*資料來源:官方文件):

同意類型

描述

ad_storage

允許儲存 (例如使用 Cookie) 廣告相關資料。

ad_user_data

設定向 Google 傳送用戶資料作廣告用途的同意。

ad_personalization

設定採用個人化廣告的同意。

analytics_storage

允許儲存 (例如使用 Cookie) 數據分析資料,如到訪時間長度。

此外,在維護 Google Consent Mode 的訊號時總共需要傳送兩個狀態,包含預設和更新後的狀態。舉例來說以網頁為例,假設當使用者第一次進站,預設 (default) 要將使用者的同意狀態設定為「拒絕」時,您可以傳送以下 gtag 代碼:

gtag('consent', 'default', {
  'ad_storage': 'denied',
  'ad_user_data': 'denied',
  'ad_personalization': 'denied',
  'analytics_storage': 'denied'
});

而當使用者更新同意聲明狀態時,則改傳送更新 (update) 的資訊,則後續 Google 系統就可以取得使用者更新後的同意聲明狀態,並進一步調整代碼的收集與應用範圍。gtag 的範例如下:

gtag('consent', 'update', {
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
  'ad_storage': 'granted',
  'analytics_storage': 'granted'
});

至於我們該如何傳送預設 (default) 以及更新 (update) 的資訊給 Google 呢?接下來我們將透過一個 GTM 代碼範本,來幫我們完成這件事。

本次實作的範例,我們將使用「Consent Mode (Google tags)」的這個代碼範本,來協助我們傳送 Google Consent Mode 預設以及更新時的參數資訊。從 GTM 匯入代碼範本的操作步驟如下:

  1. 開啟 GTM 後,切換到左下角的範本,然後點擊右上角的「搜尋範本庫」

2. 點擊右上角的放大鏡小圖示

3. 在搜尋框裡面,可以幫我輸入關鍵字 consent 之後呢,往下可以看到有一個範本名稱叫做:Consent Mode (Google tags) 這個範本,點擊這個範本

4. 接著點擊「新增至工作區」

5. 這邊會列出一些需要授權的詳細內容,確認後點擊「新增」

6. 看到這個畫面,就表示成功將這個範本新增到 GTM 中

成功匯入 Consent Mode (Google tags) 代碼範本後,接下來我們首先要處理的就是使用者第一次進站時預設 (default) 的參數授權狀態。我們可以依據需求調整預設的授權狀態。以歐盟區域為例,通常在使用者還沒授權之前,最好預設都是拒絕 (denied) 的狀態會比較符合規定,因次這邊的範例,我們就將全部的參數的預設值,都調整成 denied 的狀態。詳細的操作步驟如下:

  1. 開啟 GTM 後,切換到 GTM 的代碼這邊,然後點擊右上角的「新增」

2. 點一下「代碼設定」

3. 代碼的類型,選擇剛剛新增的範本「Consent Mode (Google tags)」

4. 進來後,首先在「Consent Command」這邊,其實有兩個選項可以選擇,一個是 Default,另一個是 Update 。因為我們現在要來處理的是初始化的狀態,所以這邊就先選擇 Default

5. Required for Google services 這個區塊,裡面列出所有 Google Consent Mode 目前有的參數類型,這邊就會需要針對每個參數,給它對應授權狀態。以本次範例為例,我們就將全部的參數的預設值,都調整成 denied 的狀態

6. 接下來是觸發條件,點擊一下觸發條件

7. 因為必須在使用者一進站,在所有的代碼觸發之前,就要將 Google Consent Mode 的預設狀態給送出來,因此這邊的觸發條件請統一選擇「Consent Initialization – All Page」

8. 觸發條件選擇好之後,接著我們給予這個代碼一個可以識別的名稱,然後按下儲存,這樣就完成代碼設定

完成預設 (default) 的參數授權狀態設定後,下一個動作就是針對使用者更新同意聲明狀態後,需要再傳送一次更新 (update) 的參數授權狀態。

但是在開始設定之前,會需要先知道所使用的同意聲明平台廠商 (consent management platform, CMP) 工具,或是甚至是請公司內部的 IT 幫忙建立的 Consent Mode 平台,當使用者點擊授權按鈕後,這些授權的資訊會怎麼被送出來或是存在哪裡,以及可以如何取得對應於 Google 所需要的四個參數資訊。

這部分不同的 CMP 管理工具的作法都不太一樣,有的是儲存在 Cookies 裡面,有的會將資訊直接拋送到 DataLayer 中,所以這部分必須要依據所使用的工具來進行調整,但主要需要確認的原理是一樣的,

以本次範例來說,當使用者選擇完授權結果按下按鈕後,會將使用者選擇的結果拋送 DataLayer 資訊。其中包含 mk_cm_cookies_consent_update 的事件,以及 Google Consent Mode 所需要的四個參數,更新後的授權狀態是 granted 或是 denied 。

所以我們就會需要利用到這些資訊,來設定我們的觸發條件,以及針對不同參數的授權與否。

首先我們先從 GTM 裡面建立幾個變數,來撈取 Consent Mode 四個參數分別的授權狀態,詳細的操作步驟如下:

  1. 開啟 GTM 後,切換到變數這個頁籤,來建立變數

2. 到下面的「使用者定義的變數」,點擊「新增」

3. 點擊「變數類型」

4. 以本次範例為例,因為資訊都拋送到 DataLayer ,所以類型就選擇「資料層變數」

5. 在資料層變數名稱這裡需要輸入 DataLayer 拋出來的參數名稱,比方說現在先建立 ad_personalization 這個參數,因此在 GTM 資料層變數名稱這邊我們就輸入一模一樣的文字「ad_personalization」,版本請選擇預設的「版本2」,接著給予變數可以識別的名稱,然後點擊右上角的儲存,就完成變數的設定。因此後續可以參照一樣的流程,將另外三個參數也建立起來


設定完變數之後,接下來我們來處理觸發條件的部分。一樣如同前面所提到的,本次範例當使用者選擇完授權結果按下按鈕後,會在 DataLayer 拋送一個事件 mk_cm_cookies_consent_update 的事件,因此我們就可以透過捕捉這個事件名稱來作為我們的觸發條件。詳細的操作步驟如下:

  1. 開啟 GTM 後,切換到觸發條件這個頁籤,然後點擊右上角的「新增」

2. 選擇觸發條件類型

3. 因為當使用者按下授權決定的按鈕之後,會拋送 DataLayer 事件,所以觸發條件類型,我們要選擇「自訂事件」來捕捉

4. 拋送的事件名稱是「mk_cm_cookies_consent_update」,所以在事件名稱這邊,就要輸入一模一樣的名稱,然後下面的啟動時機,維持原本預設的「所有的自訂事件」。最後給予觸發條件一個識別的名稱,然後點擊右上角的儲存,就完成觸發條件的設定


準備好會使用到的變數與觸發條件後,最後我們就可以來建立更新狀態的代碼了,詳細的操作步驟如下:

  1. 開啟 GTM 後,切換到 GTM 的代碼頁籤,點擊右上角的「新增」

2. 選擇代碼類型

3. 類型選擇一開始我們匯入的 「Consent Mode (Google tags)」 代碼範本

4. 因為這次是要處理更新的狀態,所以 Consent Command 這邊要換成「Update」

5. 接下來要針對每個 Google Consent Mode 的變數,分別給予使用者授權後的結果。這時候剛剛建立的那四個變數就可以派上用場了

6. 比方說第一個 ad_storage,就要選擇我們剛剛建立的 ad_storage DataLayer 變數

7. 依序把四個主要的變數都對應起來

8. 下面的 Other signals ,這部分在本次 Google Consent Mode V2 的版本中並不是絕對需要給予的資訊,所以可以依據各自的需求來做調整。以本次範例來說,就直接都給予同意,也就是 granted 的值

9. 選擇代碼的觸發條件

10. 選擇剛剛建立的自定義事件

11. 給這個代碼一個可以識別的名稱,然後點擊右上角的儲存就完成囉

既然代碼設定完畢了,接下來當然就需要再教大家,怎麼樣來驗證我們設定的結果是否正確。驗證的方式可以直接利用 GTM 的預覽功能來進行驗證。詳細的操作步驟如下:

  1. 開啟 GTM 後,點擊右上角的「預覽」按鈕

2. 輸入網頁網址,按下「Connect」按鈕

3. 可以先看一下 Consent Default 的狀態所記錄的資訊是否正確。找到 Summary 這裡的觸發時機 Consent Initialization ,看一下是不是有觸發我們設定的 Default 代碼,以及進一步再確認,所拋送的 Google Consent Mode 參數狀態

4. 在左邊 Summary 先切換到 consent 這個事件,然後右半邊的頁籤,把它換到 Consent 這個頁籤,就可以看到在 Default 初始化的狀態,實際的 Consent 參數授權狀態分別是什麼

5. Defalut 資訊我們確認完後,可以先回到頁面上去點選一下 CMP Banner 跳出的資訊,調整授權狀態後,再回到 GTM 預覽畫面,看看剛剛設定的 Update 代碼是否有被觸發,以及進一步來確認 Google Consent Mode 的參數是否也正確反應使用者授權的結果

6. 把頁籤切換到 Consent,再確認 Google Consent Mode 的參數是否正確反應使用者授權的結果


結語

以上就是透過 GTM 來實作網站導入 Google Consent Mode 的方法囉!雖然本次僅針對網站的部分跟各位讀者做介紹,若您針對其它平台也想瞭解的話,也可參考以下的官方文件:

平台類型

官方參考資料

網頁 (Web)

https://go.data360.cc/consent_mode_web

應用程式 (APP)

https://go.data360.cc/consent_mode_app

AMP 網頁

https://go.data360.cc/consent_mode_amp

伺服器端代碼管理工具 (Server-Side)

https://go.data360.cc/consent_mode_server

Measurement Protocol (MP)

https://go.data360.cc/consent_mode_mp



Tags