跳到主要內容

如何使用 GTM 開啟 Cookie 同意聲明模式 - CMP 基礎篇

如何使用 GTM 開啟 Cookie 同意聲明模式 - CMP 基礎篇

你是否有發現許多網站都有 Cookie 同意聲明的對話窗,你可以進行同意或拒絕使用 Cookie 進行個資分析!尤其是國際級的大型網站,為了符合 GDPR (歐盟一般資料保護規定)或是 CCPA (美國加州消費者隱私法)的關係,需要讓使用者可以自行決定個資運用。雖然台灣並沒有強制要求網站需要聲明 Cookie 同意聲明,不過你還是可以讓使用者有選擇的權利!

而且只要在 GTM (Google Tag Manager) 進行設定,透過第三方同意聲明管理平台 CMP (Consent Management Platform) 就可以製作出具有使用者界面以及細部權限設定的功能,例如數據分析保存 analytics_storage、廣告行銷保存 ad_storage、網站或應用程式功能保存 functionality_storage 以及個人化數據保存 personalization_storage 等。想了解更多資訊,可詳閱 GTM 同意聲明設定說明文件

同意聲明類型 說明
analytics_storage 啟用與數據分析相關的儲存功能
ad_storage 啟用與廣告相關的儲存功能
functionality_storage 啟用支援網站或應用程式功能的儲存功能
personalization_storage 啟用與個人化相關的儲存功能

GTM 中目前有兩家 CMP 平台可以使用,接下來我將選用 Cookiebot 這個 CMP 平台進行示範,是因為這家 CMP 的聲明文案有正體(繁體)中文可以使用,並且可以自行修改文案內容。首先註冊一個 Cookiebot 的帳號。免費帳號可以使用一個網域(子網域是分開計算的)以及 100 個頁面以下的網站,超過就需要考慮付費,或者自行設計介面與功能。註冊完後,接下來是 Cookiebot 設定步驟教學:

網域設定

Cookiebot 網域設定

1. 設定網域:輸入不含 https:// 的網域名稱,後方的掃描頻率 Scan frequency 只有每月 Monthly 可以選,不需要設定。

2. 設定內部測試網域:如果有內部測試網域可輸入此欄,沒有就留空。

3. 使用者同意期限:最多可達 12 個月,表示 Cookie 同意聲明會間隔多久才詢問使用者。設定為 0 表示只有目前瀏覽階段才會記憶,下次再重新進入網站就會再詢問。

對話窗設定

Cookiebot 對話窗設定

1. 模板樣式:總共有三種樣式可以選擇。Swift:全版模式、Elemental:傳統置中模式、Custom:自訂模式,使用 HTML、CSS、Javascript 自行設計介面樣式。

2. 同意方式:Implied Consent 默認同意表示用戶若不做任何選擇繼續瀏覽就代表同意;Explicit Consent 明確同意表示用戶必須做出選擇,否則對話窗就會一直出現。

3. 出現位置:選擇對話窗出現的方式,除了上下左右以外也有下推、上下滑入、彈出以及覆蓋的方式。如果想要看看呈現效果如何,可以點擊左側的 PREVIEW 按鈕預覽。

4. 繼續瀏覽定義:如果同意方式選擇了 Implied Consent 默認方式,那麼就需要定義什麼是繼續瀏覽,例如 Page scroll 捲動頁面、或是 Page refresh 更新頁面。我個人建議是選擇更新頁面,以免一捲動對話窗就立刻消失。

5. 按鈕類型:可選擇 Decline only 只有拒絕按鈕;或 Accept only 只有同意按鈕;建議可以選擇 Accept/Decline 讓同意與拒絕同時可選;另外還有更多細部選項的 Multilevel 以及 Inline Multilevel 但過多的選項可能造成用戶困惱,不建議選擇;另外還有適用  CCPA 的 Do not Sell(Opt-in) 不要出售我的個人資料的選項。

6. 關閉按鈕:可以顯示關閉按鈕。但默認同意模式下也是代表同意的意思。

7. 主題顏色:有白色以及暗色可選,另外有 Custom 自訂設定方式。

8. 圖示:可以選擇是否要顯示圖示,預設的圖示可以變換顏色或者你可以自行上傳圖片。

9. 目標分配:可以選擇要對所有人顯示的 All Visitors 或是只針對歐洲用戶的 Visitors from the EU only 另外也可以使用 Visitors from specific countries and/or regions 自行勾選國家或地區顯示同意聲明對話窗。

小工具設定

Cookiebot 小工具設定

1. 啟用小工具:啟用後會在角落出現按鈕,可以隨時修改同意聲明。

2. 選擇小工具在那個角落:有左上、左下、右上、右下。

3. 小工具邊緣距離調整:選項會隨著不同角落變動。

4. 小工具關閉時的顏色:有白色、黑色以及自訂色

5. 小工具開啟時的顏色:有白色、黑色以及自訂色 

Cookiebot 小工具畫面

同意聲明描述模板

Cookiebot 同意聲明描述模板

這裡可以修改同意聲明的詳細描述模板,你可以點擊左側第四個 PREVIEW 按鈕可以檢視詳細同意聲明內容的樣式,這裡的 Template 模板選項可以使用預設 Default 或是自訂 Custom 如果是要修改文案內容,則是要切換到下一個頁籖 Content 內容修改。

同意聲明描述內容

Cookiebot 同意聲明描述內容

1. 選擇文案語系:這裡可以選擇任一語系來修改文案內容,其中 Chinese(Traditional) 是繁體中文。

2. 預設語系:這裡可以選擇 ZH-HANT -  Chinese(Traditional) 讓繁體中文為預設顯示語系。

3. 自動偵測使用者語系:如果你的網站使用者國籍多元,記得勾選此項。

程式代碼

Cookiebot 程式代碼

由於我們是要在 GTM 運行 CMP 只需要 Domain Group ID 後方的序號即可。

在 GTM 設定 Cookiebot

在 GTM 中選擇 Cookiebot

接下來的重頭戲,就是在 GTM 中設置 Cookiebot 首先左側選單選擇「代碼」再新增一個代碼,點擊「代碼設定」區塊,然後選擇「精選社群同意聲明管理平台範本」再點擊「Cookiebot CMP」你可以發現這裡有兩家 CMP 平台,你也可以試試看另外一家會不會更加適合你。

Cookiebot CMP 設定方式

將範本代碼新增到工作區後,再將 Cookiebot 複製的 Domain Group ID 序號貼到 Cookiebot ID 上即可,再來添加觸發條件請選擇「Consent Initalization - All Pages」這個觸發將會是第一個觸發的代碼,這是為了比 GA 等追蹤代碼還要早發生,你可以使用 GTM 的預覽模式觀察到。竟然同意聲明是最早執行的代碼,你還可以預設同意聲明的預設值是要同意 granted 或者拒絕 denied

設定預設同意聲明狀態

點開代碼設定,找到 Default Consent State 設定區塊,點擊 Add region 新增地區,由於不同地區的規範會有所不同,例如美國加州地區應該預設為拒絕 denied 如果是在台灣可以先設置為同意 granted 另外在設置地區代碼時,請使用 ISO 3166-1 alpha-2 代碼,例如台灣的代碼為 TW 請見一下圖片設定

Cookiebot 預設同意聲明設定
完成以上步驟就可以預覽或發佈了!待下回,將進一步介紹如何利用使用者設定好的同意聲明去控制追蹤代碼的觸發與否,例如使用者不同意時,要如何不去觸發如 GA 點擊事件追蹤或是 Facebook Pixel 等追蹤代碼。


留言

這個網誌中的熱門文章

LINE Bank 夢想帳戶利息試算工具

Line Bank 推出的 夢想帳戶 是屬於零存整付的階梯式利率,基本的定期存款牌告利率為 0.725% ~ 1.245% 之間,再按照你的存款目標每月存入,如果當前存款金額達到目標總金額的 26% ~ 50% 會加碼 0.1%,51% ~ 75% 加碼 0.2%,76% ~ 100% 加碼 0.2%,合併計算後期的利率最高達為 2.12%,優惠期限目前公告到 2024/12/31 止。但因為是階梯式利率,實際上拿回的利息不會那麼多。雖然官網有提供試算的範例,但每個人的存款目標與期數都不一樣,因此我製作了一個線上試算利息與實際利率的工具,方便大家試算...

分享 Google 日曆的中華民國 113 ~ 114 年 (2024 ~ 2025 休假行事曆也包含勞動節)

以下是 Google 日曆按照行政院人事行政總處公告的中華民國 114 年 (2025) 政府行政機關辦公日曆表製成的,並且再加入 5/1 勞動節。 請使用此 鏈接開啟 Google 日曆 點擊右下角的《+Google Calendar》匯入,另有 iCAL 格式 提供其他應用程式匯入。

Adobe 的影音系列軟體改中文語系

Adobe 影音系列的軟體,如 Premier Pro、After Effects... 都沒有繁體中文語系,但還是有簡體中文語系可以使用的,需透過修改控制台 (Console) 設定,或是修改 application.xml 檔案來達成...