Cloudflare Zaraz で同意（Consent）フォームを自動挿入する
前回、Cloudflare Zaraz をやってみた記事をアップしました。
今日はそれに続いてZarazのもう一つの機能であるCookie取得の同意画面の自動挿入を行います。
Cookieの取得同意はGDPRなどで非常に重要であり、実装を忘れたサイトやページがあると罰則の対象となってしまう可能性があるため、CDN経由で同意画面の表示を強制化させることは開発者にとってメリットがあります。
さっそくやってみる
前回の手順に基づき以下のWebがホスティングされているとします。
マネージメントコンソールのZaraz→Consentをクリックします。
Enable Consent Managementのチェックをオンにします。
Default Languageを日本語に変更します。
同意ダイアログで表示させる日本語文字列を入力します。
ユーザーが反応すべきボタンの文字を入力します。
ボタンは全部で３つあります。
１．全部同意
２．全部拒否
３．同意
１と３の違いですが、複数の同意を求めなければならないタイプのサイトの方が一般的です。外部ツールが１個だけ埋まっているケースの方が少ないためです。通常は「全部同意」のみが表示されクリックするケースが多いため、ボタンは２つです。例えばGA4はOKだが他のクッキーは拒否したい場合などがあります。Zarazでは明示的にこれを区別ししています。同意を押すと、次に別のクッキーへの同意が現れます。
3番目のボタンを消す場合は、後述のCSS機能を使います。
Add new Purposeを押します。
デフォルトでは英語になっていますが、ドロップダウンから日本語に変更させ以下のように同意を求めるダイアログに表示させる文言を入力しSaveを押します。
作成されたpurposeをtoolに挿入します。
一度CSSは空欄にしておきます。
前述のクッキーへの同意画面をカスタマイズする場合、例えば以下を挿入することで、３つ目のボタンを削除できます。
#cf_consent-buttons__save {
display: none;
}
この画面でセットされるクッキーの名前を変更させることもできます。今回はデフォルトのzaraz-consentにします。通常この機能はユーザーに何の影響も与えませんが、例えば再度全ユーザーに同意を取り直したい場合、クッキー名を変えておくことで全ユーザーが次回サイト訪問時に同意が求められることになります。
Saveします。
サイトにアクセスするとこんな画面が出てきます。
ボタンを押すと画面が遷移します。
同意をしても拒否してもCookieに先ほど名前を付けたzaraz-consentがセットされています。
またセットされるクッキーは複数ありますのがそのドメインはすべてCloudflare経由ドメインになっています。
拒否ボタンを押した場合GA4連携はされませんので以下になります。GA4関連クッキーはセットされていません。
Discussion