Google Analytics の Cookie をユーザーが同意した場合だけ書き出す方法

未分類
スポンサーリンク

GDPR(EU一般データ保護規則)では Cookie が個人関連情報とされ、他社に提供することで提供先での個人識別が可能になる場合には、本人の同意が必要という決まりがあります。

Google Analytics の Cookie を発行する前に、ユーザーの同意を得るように対応する案件を行ったので、備忘録として記録しておきます。

使用するサービス

この記事で紹介する方法は、下記のサービスを組み合わせて使う場合の解説になります。

  • Google アナリティクス 4
  • Google Tag Manager
  • Cookie Consent v2.8.0

Google Analytics の設定

アカウントは作成済みとして、プロパティを追加するところからの手順です。

  1. Google Analytics にログインして、「設定」(歯車アイコン)からアカウントを選択
  2. プロパティを作成
  3. プロパティの設定とビジネスの概要を選択して「作成」
  4. データストリームの設定でプラットフォームは「ウェブ」を選択
  5. ウェブサイトのドメインを入力して、ストリーム名は任意の名前を入力

完了画面に表示される「測定 ID」は、次のステップの Google Tag Manager の設定に使用します。

Google Tag Manager の設定

こちらもアカウントは作成済みとして、コンテナを追加するところからの手順です。

  1. 管理タブからコンテナを追加する。
  2. 「新しいタグ」から「タグの設定」で進めていき、「測定 ID」には Google アナリティクス 4 のストリームと同じものを入力する。
    ※その際「同意設定」をオンにしておいてください。
  1. 配信トリガーは「All Pages」を指定しました。
  2. タグの名前にはデフォルトの「Google アナリティクス GA4 設定」という名前で保存しました。

以上で、Google Tag Manager の設定は完了です。

Cookie Consent の設定

同意管理プラットフォーム(Consent Management Platform)で調べると、Cookiebot など色々なサービスがありますが、今回は無料で運用できる Cookie Consent を採用しました。

Cookie Consent のダウンロード

公式サイト(https://github.com/orestbida/cookieconsent)より「cookieconsent.js」と「cookieconsent.css」をダウンロードし、任意のディレクトリに配置する。

Cookie Consent をカスタマイズする

公式サイトの 2. Installation & Usage ⇒ 3. Configure and run ⇒ As external script を参考にして、「cookieconsent-init.js」を作成・カスタマイズします。

おそらく一番大変な部分はここで、設置するサイトに合わせて Cookie ポリシーや Cookie Table を記載します。

上記の例では「_ga」の項目で正規表現を有効(is_regex: true)にしているので、名前が「_ga」で始まる全ての Cookie が制御できます。正規表現を無効にすると、セッションを管理している Cookie「_ga_<container-id>」は一致しなくなるので、制御対象から外れます。

HTML に反映する

仕上げとしてサイトに反映していくのですが、Google のタグ設定ガイドにも記載されている様に、呼び出すコードの順序が大事です。

まず最初に「同意しない(されていない)」状態にしてから Google Tag Manager を呼び出さないと、Cookie が即時発行されてしまいます。

  1. 初期値を「同意しない」状態にする
  2. Google Tag Manager を読み込む(Cookie は発行されない)
  3. Cookie Consent を読み込む
  4. ユーザーが同意した場合にのみ Cookie を発行する
    ※同意した後から「拒否」にした場合には、発行した Cookie が削除される

また、同意した内容についてユーザーが後から変更できるように data-cc アクションの「c-settings」を設定したボタン(リンク)をサイト内に配置しておくと良いでしょう。

参考にしたサイト

GitHub - orestbida/cookieconsent: Simple cross-browser cookie-consent plugin written in vanilla js
:cookie: Simple cross-browser cookie-consent plugin written in vanilla js - GitHub - orestbida/cookieconsent: Simple cross-browser cookie-consent plugin written...
同意設定を管理する(ウェブ)  |  タグ  |  Google Developers
[GA4] ウェブサイトでの Cookie の使用 - アナリティクス ヘルプ
この記事では、Google アナリティクス 4 プロパティでの Cookie の使用について説明します。ユニバーサル アナリティクスで使用される Cookie について
2022年4月より施行される改正個人情報保護法について | 電脳情報局
var prism = 1; var codetheme=

コメント

タイトルとURLをコピーしました