すべてのコレクション
公開
公開後の設定
Cookiebot を利用して Cookie 利用の同意モーダルを実装する
Cookiebot を利用して Cookie 利用の同意モーダルを実装する
Awaya avatar
対応者:Awaya
一週間前以上前にアップデートされました

💡 この機能は、有料プラン契約プロジェクトでご利用いただけます

Cookieを利用する外部サービスを公開サイト上で利用する場合には、その Cookie 利用を閲覧者が最初に同意・拒否できる仕組みを導入する必要があります。

現時点では、STUDIO 単独では実現できません。CMP(同意管理プラットフォーム)をGoogleタグマネージャー経由で STUDIO に導入することで、次のような同意モーダルを実装できます。

閲覧者がこれらに同意しない限り、そのCookieを必要とする外部サービスは、閲覧環境(公開サイト上)で動作しません。閲覧者は同意・拒否を後から選び直すこともできます。

ここでは一例として Cookiebot を GTM 経由で STUDIO に設置する方法をご紹介します。


目次


Cookiebot をプロジェクトに導入する

1)Cookiebot のアカウントを作成する

Cookiebot の公式サイトへアクセスし、「Try for free」をクリック。

アカウントを作成します。アカウント作成は無料です。

アカウント認証メールが通知されるので、認証キーを入力して登録を完了します。

設定画面に移動します。まずは、公開サイトのドメインを入力。

次に、「Content」タブで言語を日本語に変更します。

画面左にある「Save」ボタンをクリックすると、ここまでの設定を保存します。

これで最低限の設定が完了しました。

「Your script」タブにある Domains Group ID を後ほど使うので、コピーしておきます。

2)Cookiebot を Google タグマネージャーで導入する

有料プランで利用できる外部Apps連携で、あらかじめGoogleタグマネージャーを連携しておきます。

その上で、Googleタグマネージャー上で Cookiebot の連携に必要なタグを追加します。「コミュニティテンプレートギャラリー」に「Cookiebot CMP」があるので、それを Workspace に追加します。

設定した「Cookiebot CMP」をクリックし、先にコピーしておいた「Domains Group ID」を「Cookiebot ID」欄に貼り付けます。

トリガーには、「Consent Initialization」を設定。これを保存し、ワークスペースのバージョンを公開すれば完了です。

Googleタグマネージャーを連携した公開サイト上で、 Cookiebot の同意モーダルが表示されるようになります。

2) 公開サイト上で利用する Cookie を制御する

Cookiebot を連携しただけでは、公開サイトで利用している外部サービスの Cookie 利用を制御できません。ここでは Apps と埋め込みボックス(iframe)の事例をいくつか紹介します。

ここで紹介していないサービスも、事例を参考に設定をお試しください。

1)外部サービスのApps連携をGoogleタグマネージャーで連携しなおす

Apps連携で連携した外部サービスの Cookie は、Google タグマネージャーで連携している Cookiebot では現時点では制御できません。

制御できるようにするには、以下の手順が必要です。

  • それらの外部サービスはApps連携を使わずにGoogle タグマネージャーで連携し直しす

  • 外部サービス連携用タグの詳細設定「同意設定 (BETA) > タグの配信時に追加同意が必要」を有効化し、トリガーには「cookie_consent_update」というカスタムイベントを設定

Cookiebot 公式サポート記事にも解説があるので、併せてご参考ください。

【事例1】Intercom

Intercom 公式記事を参考に、あらかじめGoogleタグマネージャーで連携します。

設定したIntercom連携用のタグに対し、 Cookiebot で Cookie を制御するための設定をします。

まず、タグの「詳細設定」トグル内の「同意設定 (BETA)」で、「タグの配信時に追加同意が必要」にて選択できる項目を追加します。

そして、以下の内容でトリガーを新しく追加します。
※ 参考元:Cookiebot 公式サポート記事

  • タイプ:カスタムイベント

  • イベント名:cookie_consent_update

  • このトリガーの発生場所:すべてのカスタム イベント

このような設定になりました。Workspaceを更新して公開サイトへアクセスし、Cookieの利用を許可するまでIntercomが起動しないことが確認できたら完了です。

【事例2】Google アナリティクス v4

現時点で、STUDIOでGoogleアナリティクス v4 を連携するにはGoogleタグマネージャーが必要です。

既に連携のために必要なタグを設定しているとして、そのタグの設定を変更します。

まず、タグの「詳細設定」トグル内の「同意設定 (BETA)」を開きます。

「組み込み同意チェック」に表示されている「ad_storage」「analytics_storage」の2つを、「タグの配信時に追加同意が必要」で選択し追加します。

そして、以下の内容でトリガーを新しく追加し、設定します。
※ 参考元:Cookiebot 公式サポート記事

  • タイプ:カスタムイベント

  • イベント名:cookie_consent_update

  • このトリガーの発生場所:すべてのカスタム イベント

これで Workspaceを更新して公開サイトへアクセスし、Cookieの利用を許可するまでGoogleアナリティクスの管理画面にアクセスデータが反映されないことを確認できたら完了です。

2)外部サービスの埋め込みコード(iframe)を調整する

YouTube, Vimeo などの埋め込みサービスも、公開サイトで Cookie を利用している場合があります。しかし、各サービスのiframeコードをそのまま埋め込んでも、それらの Cookie を Cookiebot は制御できません。

しかし、iframeコードの記述を一部調整することで、制御ができるようになります。

Cookiebot 公式サポート記事にも解説があるので、併せてご参考ください。

【方法】

  • srcdata-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 の料金について

1ドメインかつ100ページ以内のサイトであれば無料で利用できます。

ただし、一括同意、同意の統計、テスト環境といった一部機能に制限があります。


有料の場合、ユーザーが任意のプランを選ぶのではなく、実際の利用状況に応じて変動するようですのでご注意ください。正確な情報は、こちらをご覧ください。

■ 閲覧中のサイトが利用している Cookie を確認する方法

一例を紹介します。Chromeブラウザをご利用であれば、アドレスバーの左にある鍵アイコンをクリックすると、「Cookie」メニューがあります。

クリックすると、そのサイトで利用しているCookieの詳細を確認でき、閲覧者は手動でブロック・削除もできます。

■ GDPR、CCPA、個人情報保護法への準拠について

上記でご紹介した内容は「GDPR、CCPA、個人情報保護法」などに準拠することを保証しているわけではございませんのでご注意ください。今後、安心してサービスをご利用いただけるよう STUDIO の機能としての提供も検討をしておりますので、ご要望お気軽にチャットよりご連絡ください。

クッキー

こちらの回答で解決しましたか?