Google Tag ManagerとCookiebot CMPでCookie同意の実装

:::note warn
本記事は2021年1月時点での内容になります。最新情報については公式サイトなどを確認願います。
:::

GDPR対策が必須となった昨今ですが、「具体的に何をやったら良いの？」とお悩みの方も多いと思います。Google AnalyticsやGoogle広告、Facebook広告のタグなどの発火をどういう時に止めなければならないのか？どういうときなら発火しても良いのか？といった条件を考えるだけでなく、自分でゼロから実装するのは正直かなり大変です。

そこで今回はとりあえず最低限やっておかなければならない事を簡単にやってしまおう、ということで、Google Tag Managerと[Cookiebot](https://www.cookiebot.com/)を使ってCookieの使用の同意と回答方法ごとの対処法を紹介します。

## Cookiebotとは

[Cookiebot](https://www.cookiebot.com/)はGDPRやCCPAで決められたCookieの扱いに対応するために、訪問者に情報収集の対象を決めるためのポップアップを表示したり、その内容に応じて取得できるものを選定できるサービスを提供しています。

[費用](https://www.cookiebot.com/en/pricing/)は無料（100ページまで）、9ユーロ/月（500ページまで）など複数あります（2021年4月時点）ので、あなたのサイト規模によって選んでください。

## アカウント取得

まずは、[Cookiebot](https://manage.cookiebot.com/en/signup)のサイトで会員登録してキーを取得します。このキーはあとで使うので保管しておいてください。

## Cookiebot CMP タグの作成

こからはGoogle Tag Managerでの作業になります。まずは、Cookie同意のポップアップを表示させるタグ「Cookiebot CMP」を作成します。

Google Tag Managerの「タグ」メニューから「新規作成」を選び、タグテンプレートをインポートして、「Cookiebot CMP」をインポートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3939399/5eeb2d59-be7a-59da-f54d-d3067c00e58c.png)

続いて、先ほどCookiebotで取得したキーを「Cookiebot ID」に入力します。最後にトリガーは「すべてのページ」を選択して保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3939399/19af62fd-3378-54dd-8e55-03a8e1dcdf8b.png)

## Cookie Consent変数の作成

次に変数を作成します。Tag Managerの「変数」メニューから「新規作成」を選び、テンプレートから「Cookiebot Consent State」をインポートします。（似たような名前の別のテンプレートがあるので要注意）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3939399/083a9b24-859c-3c3c-93d3-342bb04122a6.png)

変数名を「Cookie Consent」として保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3939399/490c6251-bf58-6990-cb24-5f6cc8bf246f.png)

## タグ発火を抑制するトリガーの作成

続いて、タグを発火させる／させないの実働部分のトリガーを作成します。まずはマーケティング目的のタグを発火させないための「Cookie Consent Marketing – blocking」トリガーから作成します。※ここからは作成する際の基本的な箇所の説明は省略します。

- トリガー名：Cookie Consent Marketing – blocking
- トリガータイプ：カスタムイベント
- イベント名： .* （正規表現一致を使用にチェック ）
- 条件：Cookie Consent が marketing を含まない

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3939399/fd93ead5-6e1b-4b2c-ea40-7cea621ff554.png)

次に統計目的のタグの抑制に使う「Cookie Consent Statistics – blocking」トリガーを作成します。

- トリガー名：Cookie Consent Statistics – blocking
- トリガータイプ：カスタムイベント
- イベント名： .* （正規表現一致を使用にチェック ）
- 条件：Cookie Consent が statistics を含まない

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3939399/d3717430-8e3e-b2f4-84fd-6c4913206ec0.png)

## マーケティング関連タグのトリガーを変更

Google AnalyticsのタグやGoogle広告、Facebookタグなどのトリガーを変更します。
Google Analyticsのすべてのタグのトリガーの「例外」部分に先ほど作成したCookie Consent Statistics – blockingトリガーを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3939399/d3b41dee-fb75-16d5-999e-5cccb28fa2b5.png)

同様に、Google広告やFacebook広告、その他マーケティング用に作られたタグについては、Cookie Consent Marketing – blockingトリガーを除外に追加します。

最後に、Tag ManagerのWorkspaceを公開したら完了です。

実際に対象のサイトを開くと、下記のようなポップアップが表示され、選択した内容に応じてタグが発火しないようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3939399/26dbc51d-de35-29f0-eb4c-9891b6422bb3.png)

上記のポップアップでNecessary以外の3つのチェックボックスを外してOKボタンを押してから、Cookieの「CookieConsent」を見ると、以下のようにfalseが入っていることがわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3939399/bace1087-c266-e5eb-d8ef-912881aada96.png)

GDPRやCCPA対策が必要になった場合、仕組みの作成を自作もしくは外注で対応することも可能ですが費用がかかりますし、また今後さらに規制内容が変更になる可能性もあります。そういった事を考えるとこのようなサービスを利用してリスクを回避するのも一案だと思います。