Google Analyticsの同意モード（Consent mode）セットアップ

## はじめに

この記事は、[Google Analytics](https://analytics.google.com/analytics/web/provision/#/provision)の同意モードについて、その概要とセットアップ方法を共有するためのものです。

### 想定する読者

- Webサイトの開発を経験したことがある
- html, CSS, JavaScriptに関する知識がある

この記事では開発環境のセットアップやJavaScript自体に関する解説は取り扱いません。あらかじめご承知ください。

### 対象とする環境

- Google Analytics 4
- Google Chrome 105.0.5195.125

この記事ではGoogle Analytics 4を前提に解説します。記事を読む前にお手元の環境をご確認ください。

### GDPRについての注意

:::note warn
この記事を読まれる方は、EU一般データ保護規則（GDPR）に関する最新の情報を調査してください。
:::

この記事ではEU一般データ保護規則（GDPR）について触れます。しかし、GDPRとGoogle Analyticsの関係については各国の裁判所が評価を続けています。判断が覆る可能性もあるので、各自で最新の情報を必ず調査してください。

## Google Analyticsと同意モード（Consent mode）について

### Google Analyticsとは

[Google Analytics](https://analytics.google.com/analytics/web/provision/#/provision)とは、Googleが提供するWebサイトのアクセス解析ツールです。ユーザーがWebサイトを訪問後、どのように振る舞ったかの分析をレポート形式で出力します。

### 同意モード（Consent mode）とは

同意モード（Consent mode）とは、Google AnalyticsをEU一般データ保護規則（GDPR）に適合した形で動作させるモードです。

#### サードパーティークッキーとは

サードパーティークッキーとは、ユーザーとサイト運営者以外の第三者（サードパーティー）に送受信されるクッキーです。サイト運営者自身が送受信するクッキーはファーストパーティークッキーと呼びます。Google Analyticsで利用するクッキーは、Googleのサーバーに送信されるためサードパーティークッキーとなります。

#### サードパーティークッキーとGDPR

GDPRでは、サードパーティークッキーを個人を識別する情報としてみなします。その上でサードパーティークッキーを以下のような条件で発行するよう求めています。

- 同意を得るまでサードパーティークッキーを発行しない
- 同意が明確でない場合、拒否と同じ動作をする
- 同意した後も、ユーザーが簡単に拒否しなおせる仕組みを用意する

ファーストパーティークッキーはGDPRの規制対象とはなりません。

## Google Analyticsのセットアップ

公式ドキュメントの実装例を参考に、Google Analyticsをセットアップします。ユーザーの同意を得るまでサードパーティークッキーを発行しないよう、gtag.jsの読み込み時にデフォルト動作を指定します。

- [同意設定を管理する（ウェブ） : 実装例](https://developers.google.com/tag-platform/devguides/consent#implementation_example)
- [ユーザーの同意ステータスに基づいてタグの動作を調整する](https://developers.google.com/tag-manager/consent?hl=ja#configure_default_behavior)

```html
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=あなたのストリームのID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  //同意モードの初期化を行う。
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'analytics_storage': 'denied',
  });
  dataLayer.push({
    'event': 'default_consent'
  });
  gtag('js', new Date());
  //同意モードの初期化後に、gtagのconfigを呼び出す。
  gtag('config', 'あなたのストリームのID');
</script>
```

:::note warn
`consent`と`config`による初期化の順番はこの通りでなくてはいけません。`config`の後に`consent`を実行すると同意モードのデフォルト設定が反映されません。
:::

### Cookie同意の管理

同意モードの状態は[API](https://developers.google.com/tag-platform/devguides/consent#update_behavior)を経由して管理します。同意状態の管理をゼロから実装することもできますが、多くの開発者が管理UIをプラグインとして公開しています。一例として`Cookie Consent`をご紹介します。

https://github.com/orestbida/cookieconsent

Cookie Consentは初回読み込み時の同意ポップアップや、再設定時のモーダルウィンドウをWebサイトに挿入します。今回はこのプラグインを利用します。

:::note warn
Cookie Consentは[defer](https://developer.mozilla.org/ja/docs/Web/HTML/Element/script#attr-defer)で読み込まなければいけません。html要素を追加するため、DOM構築後でないと正常に動作しないためです。ご注意ください。
:::

### 動作確認

Google Chromeのデベロッパーツールをつかって、クッキーの動作確認を行います。デベロッパーツールを開き`アプリケーション`→`ストレージ`→`Cookie`→`ドメイン名`を選択します。

#### デフォルト

初回読み込みや、同意ボタンを押さずに再読み込みした場合、クッキーは生成されません。
![](https://www.evernote.com/l/AAm6CAURp6BCoqI-yBexIIusdl4ecdWW_VEB/image.png)

#### 同意後

同意ボタンを押すと、Google Analytics用のクッキーが生成されます。
![](https://www.evernote.com/l/AAm-3Jewi8NF4JVBDbFZWRBu3gxHpgdXqoYB/image.png)

#### 拒否

拒否ボタンを押すと、ユーザーが拒否したという内容のクッキーが生成されます。
![](https://www.evernote.com/l/AAkyAPUuJm9G_p3uMOfX0HQeqdBkynX4xnYB/image.png)
`cc_cookie`は`Cookie Consent`プラグインが生成したクッキーです。Googleには送信されません。

以上、ありがとうございました。

## 参考記事

https://psychoco.net/misc/cookie-consent