2ヶ月以上空いてしまったがWordPressでのCookie同意制御 #1の続き。
前回設定では同意設定前挙動が制御できていない状態だったので、そこを制御できるようにしていく。
さて無料版でどこまで頑張れるのか・・・🤔
📗概要
今回のゴールは「Google Tag Manager (GTM) での Consent Mode 対応」（Cookie同意設定前の挙動を制御）。
前回選定したWordpressプラグイン🍪 WPConsent – Cookie Consent Banner for Privacy Compliance (GDPR / CCPA)を用いてUser Consentに準じたGTM制御を設定する。プラグインのインストール＋設定は前回エントリ「WordPressでのCookie同意制御 #1」を参照。
📗GTM側の設定
まずGTM側から。How to Trigger Google Tag Manager Tags Based on User Consent を参考に設定していく。最終的なGTM構成要素は以下（変数名はマイルール😿）
🔢GTM変数
| 🔢DLV#Consent@Statistics | 統計系サービスの同意状態を管理するDataLayer変数 |
| 🔢DLV#Consent@Marketing | マーケ系サービスの同意状態を管理するDataLayer変数 |
🎯GTMトリガー
| 🎯Consent@OnStatisticsProcessed | 統計系サービスの同意状態に準じて発火するカスタムイベント |
| 🎯Consent@OnMarketingProcessed | マーケ系サービスの同意状態に準じて発火するカスタムイベント |
🔖GTMタグ
| 🔖GA4@Base | Googleタグを管理するタグ |
参考ページに書かれている主要対応ステップは以下
- Creating a Custom Event Trigger to listen for the consent event.
- Creating Data Layer Variables to read the user’s specific choices.
- Configuring Your Tags to use the new trigger and variables as firing conditions.
ただ、この順番だと作業が入れ子になるため今回はGTM変数から設定していく。
🔢GTM変数の設定
以下２つの変数を追加
🔢DLV#Consent@Statistics
- タイプ：データレイヤー変数
- データレイヤー変数名：
wpconsentPreferences.statistics - データレイヤーバージョン：2
🔢DLV#Consent@Marketing
- タイプ：データレイヤー変数
- データレイヤー変数名：
wpconsentPreferences.marketing - データレイヤーバージョン：2
👩🏻💻GTMトリガーの設定
続いてトリガーを２つ設定。
📋️備考
参考ページに記載されているサービス別制御 (Capturing Consent for Specific Services (Advanced))は個別サービスのデータレイヤー変数名に確証が持てなかったので今回は割愛。
🎯Consent@OnStatisticsProcessed
- タイプ：カスタムイベント
- イベント名：
wpconsent_consent_processed - 発生場所：一部の場所
- 発生条件：
{{🔢DLV#Consent@Statistics}} / 等しい / true
🎯Consent@OnMarketingProcessed
- タイプ：カスタムイベント
- イベント名：
wpconsent_consent_processed - 発生場所：一部の場所
- 発生条件：
{{🔢DLV#Consent@Marketing}} / 等しい / true
👩🏻💻GTMタグの設定
🔖GA4@Base
- タグの種類：Googleタグ
- タグID：GA4の測定ID
- トリガー：
🎯Consent@OnStatisticsProcessed,🎯Consent@OnMarketingProcessed
📗動作確認
以上でGTMのConsent連携の基本設定は完了。GTMのプレビューモードで動作確認する。
念の為、動作確認前にWordpressのWPConsent管理コンソールのSetting#Cookies Configurationが以下になっているか確認。
- Default Allow = OFF
- Toggle Services = OFF
ブラウザのDevツールで対象サイトのStrageデータをクリアしてからGTMプレビューを実行。Cookie同意を設定しない状態で以下挙動を確認。
🔖GA4@Baseタグが配信されていないか？- GTMプレビュー画面で確認
- GA4のCollectリクエストが発生していないか？
- ブラウザDevツールのNetworkで確認 (collectで検索)
- 動画プレイヤーがブロックされているか？
- 対象ページにYoutube埋め込みがある場合
- 動画サムネイル上にブロックバナーが表示されていればOK
- WPConsent無料版がYoutube対応しているので制御される
上記すべてOKであれば、きちんとブロックできている状態😃
続いてCookie同意許可設定時挙動を確認。Cookie同意バナーで「すべて同意」を設定すると以下の挙動になる。
🔖GA4@Baseタグが配信される- GTMプレビュー画面で確認
wpconsent_consent_processedイベントが発火して🔖GA4@Baseタグが配信されてPage_viewイベントがヒット
- GA4のCollectリクエストが発生する
- ブラウザDevツールのNetworkで確認 (collectで検索)
- 対象ページにYoutube埋め込みがある場合、動画プレイヤーのブロックが解除される
- 対象ページにYoutube埋め込みがある場合
- 動画サムネイル上にブロックバナーが消えて再生ボタンが表示される
念の為、再度Cookie同意をすべて拒否して保存するとページがリロードされて未設定状態と同様の挙動を示す。
📗まとめ
今回の対応でCookie同意設定前のGoogle AnalyticsとYoutube埋込に対して通信を抑止できる状態になった。
ただし、サイトに他外部サービス（インスタ、X、Facebookなど）のコンテンツ埋め込みしている場合は制御できていない状態。
WPConsent無料版の対応外部サービスが明記されていない (Supported Scripts)ので状況推測になるが、WPConsentコンソールからサイトスキャンしてもインスタなどは検知されないので無料版WPConsent単体でデフォルト設定できるUser Consentに準じたGTM制御はここまでっぽい。
ということで、次回はWPConsent無料版で制御できない外部サービスを制御する方法についてまとめていく気持ち🐙