はじめに

この記事は、Google Analyticsの同意モードについて、その概要とセットアップ方法を共有するためのものです。

想定する読者

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

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

対象とする環境

Google Analytics 4
Google Chrome 105.0.5195.125

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

GDPRについての注意

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

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

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

Google Analyticsとは

Google Analyticsとは、Googleが提供するWebサイトのアクセス解析ツールです。ユーザーがWebサイトを訪問後、どのように振る舞ったかの分析をレポート形式で出力します。

同意モード（Consent mode）とは

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

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

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

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

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

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

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

Google Analyticsのセットアップ

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

<!-- 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>

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

Cookie同意の管理

同意モードの状態はAPIを経由して管理します。同意状態の管理をゼロから実装することもできますが、多くの開発者が管理UIをプラグインとして公開しています。一例としてCookie Consentをご紹介します。

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

Cookie Consentはdeferで読み込まなければいけません。html要素を追加するため、DOM構築後でないと正常に動作しないためです。ご注意ください。

動作確認

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

デフォルト

初回読み込みや、同意ボタンを押さずに再読み込みした場合、クッキーは生成されません。

同意後

同意ボタンを押すと、Google Analytics用のクッキーが生成されます。

拒否

拒否ボタンを押すと、ユーザーが拒否したという内容のクッキーが生成されます。

cc_cookieはCookie Consentプラグインが生成したクッキーです。Googleには送信されません。

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

参考記事