Cookie 利用の同意モーダルを実装する方法
注意：
本手順には外部サービスの手順も含まれています。外部サービスの仕様や動作、記事内の手順以外についてはチャット窓口でのサポート対象外となる可能性があります。
記事内の外部サービスの画面や仕様は2024年4月時点の情報です。記事と異なる場合、外部サービスにて最新情報をご確認ください。
Cookieを利用する外部サービスを公開サイト上で利用する場合には、その Cookie 利用を閲覧者が最初に同意・拒否できる仕組みを導入する必要があります。
現時点では、Studio 単独では実現できません。CMP（同意管理プラットフォーム）をGoogleタグマネージャー経由で Studio に導入することで、次のような同意モーダルを実装できます。
閲覧者がこれらに同意しない限り、そのCookieを必要とする外部サービスは、閲覧環境（公開サイト上）で動作しません。閲覧者は同意・拒否を後から選び直すこともできます。
ここでは一例として Cookiebot を GTM 経由で Studio に設置する方法をご紹介します。
Cookiebot 導入手順
1. Cookiebot の設定
Cookiebot公式サイトへアクセスし、「Free Trial」をクリックします。アカウント作成は無料です。
登録したメールアドレスに届く認証リンクをクリックしてアカウントを認証します。次に、Cookiebot にログインして公開サイトのドメインを入力します。「Next」をクリックします。
「Content」タブで言語に日本語を追加し、日本語をデフォルト言語に設定します。最低限の設定が完了したので「Next」をクリックします。
スクロールダウンして表示される「Domains Group ID」をコピーしておきます。
「Domains Group ID」は設定画面内「Implementation」タブからも確認できます。
2. Google タグマネージャーの設定
有料プランで利用できる外部Apps連携で、あらかじめGoogleタグマネージャーを連携しておきます。
その上で、Googleタグマネージャー上で Cookiebot の連携に必要なタグを追加します。
タグの設定で「コミュニティテンプレートギャラリー」から「Cookiebot CMP」を Workspace に追加します。
設定した「Cookiebot CMP」をクリックし、先にコピーしておいた「Domains Group ID」を「Cookiebot ID」欄に貼り付けます。
トリガーには、「Consent Initialization」を設定。これを保存し、ワークスペースのバージョンを公開すれば完了です。
Googleタグマネージャーを連携した公開サイト上で、 Cookiebot の同意モーダルが表示されるようになります。
公開サイト上で利用する Cookie を制御する
Cookiebot を連携しただけでは、公開サイトで利用している外部サービスの Cookie 利用を制御できません。以下、Apps と埋め込みボックス（iframe）の事例をいくつか紹介します。
外部サービスのApps連携をGoogleタグマネージャーで連携しなおす
Apps連携で連携した外部サービス（例：Intercom、Googleアナリティクスv4）をGTM経由で再連携し、Cookiebotでの制御を可能にします。
具体的には以下の手順が必要です。
外部サービスはApps連携を使わずにGoogle タグマネージャーで連携し直しす
外部サービス連携用タグの詳細設定「同意設定 (BETA) > タグの配信時に追加同意が必要」を有効化し、トリガーには「cookie_consent_update」というカスタムイベントを設定
Cookiebot 公式サポート記事にも解説があるので、併せてご参考にしてください。
【事例１】Intercom
Intercom 公式記事を参考に、あらかじめGoogleタグマネージャーで連携します。
設定したIntercom連携用のタグに対し、 Cookiebot で Cookie を制御するための設定をします。
まず、タグの「詳細設定」トグル内の「同意設定 (BETA)」で、「タグの配信時に追加同意が必要」にて選択できる項目を追加します。
そして、以下の内容でトリガーを新しく追加します。
※ 参考元：Cookiebot 公式サポート記事
タイプ：カスタムイベント
イベント名：cookie_consent_update
このトリガーの発生場所：すべてのカスタム イベント
このような設定になりました。Workspaceを更新して公開サイトへアクセスし、Cookieの利用を許可するまでIntercomが起動しないことが確認できたら完了です。
【事例２】Google アナリティクス v4
GoogleアナリティクスをGoogleタグマネージャー経由で設定しているとして、そのタグの設定を変更します。
まず、タグの「詳細設定」トグル内の「同意設定 (BETA)」を開きます。
「組み込み同意チェック」に表示されている「ad_storage」「analytics_storage」の２つを、「タグの配信時に追加同意が必要」で選択し追加します。
そして、以下の内容でトリガーを新しく追加し、設定します。
※ 参考元：Cookiebot 公式サポート記事
タイプ：カスタムイベント
イベント名：cookie_consent_update
このトリガーの発生場所：すべてのカスタム イベント
これで Workspaceを更新して公開サイトへアクセスし、Cookieの利用を許可するまでGoogleアナリティクスの管理画面にアクセスデータが反映されないことを確認できたら完了です。
外部サービスの埋め込みコード（iframe）の調整
YouTube, Vimeo などの埋め込みサービスの Cookie を Cookiebot で制御するには、iframeコードの記述を一部調整する必要があります。
Cookiebot 公式サポート記事にも解説があるので、併せてご参考ください。
【方法】
srcをdata-srcに変更data-cookieconsent="marketing"を追加
【サンプル】
Before:
<iframe src="https://www.youtube.com/embed/xxxxxxxxxxx" frameborder="0" allowfullscreen=""></iframe>
After:
<iframe data-src="https://www.youtube.com/embed/xxxxxxxxxxx" data-cookieconsent="marketing" frameborder="0" allowfullscreen></iframe>
【設定による弊害】
この設定を行うと、エディタ、ライブプレビュー上で埋め込みコンテンツが表示されなくなります。また、閲覧者が公開サイトでの Cookie 利用を拒否した場合、閲覧者にはこれらの埋め込みコンテンツも表示されなくなるのでご注意ください。
備考
Cookiebot の料金について
Cookiebotは、1ドメインかつ50ページ以内であれば無料プランで利用可能ですが、一部機能に制限があります。詳細はCookiebot料金ページで確認してください。
閲覧中のサイトが利用している Cookie を確認する方法
一例としてChromeブラウザでは、アドレスバー左の鍵アイコンから「Cookie」メニューを開き、サイトで使用されているCookieを確認できます。これにより、ユーザー自身でCookieのブロックや削除が可能です。
GDPR、CCPA、個人情報保護法への準拠について
上記でご紹介した内容は「GDPR、CCPA、個人情報保護法」などに準拠することを保証しているわけではございませんのでご注意ください。
機能のご要望や改善依頼は、Studio Community Japanの「機能・改善リクエストスペース」にて受け付けています。
クッキー