ウェブサイトへのCookieに関する同意モードの組み込み

今やどのサイトでも見るようになったCookieの同意を、ウェブサイトに組み込む際のざっくりとしたまとめです。

ユーザーの同意を管理する理由

Googleがまとめてくれています。

Manage user consent - Analytics Help

ざっくり全体イメージ

Google Analyticsで分析する場合のざっくり全体イメージです。
同意されていないと分析データとしては送られないというものです。

ざっくり全体イメージ

気になるのは、タグマネージャでプレビューで確認する限り、同意されていなくてもスクロールやクリックなどのイベントは取得されているように見えます（タグマネージャまでは）

同意モードの設定の流れ

Googleが解説してくれています。動画を見ると分かりやすかったです。

Consent mode on websites and mobile apps - Analytics Help

1. タグマネージャのコンテナの設定で同意の概要を有効にする

2. タグマネージャのタグで同意の設定をする

3. サイトにJavaScriptを組み込む（バナーも）

4. タグマネージャのプレビューで初期状態を確認する

同意管理プラットフォーム（CMP）とも連携できるようになっているようです。
CMPを使ったことは無いのですが、バナー表示なども簡単に行えるようなプラットフォームでしょうか。

サイトへの組み込みは動画内のJavaScriptが参考になります。
動画内でGitHubなども見てねと言っていましたが探すのが大変そうでした。

以下はサイトのタグマネージャの直前に実装すべきスクリプトです。

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }

  if (localStorage.getItem("consentMode") === null) {
    gtag("consent", "default", {
      analytics_storage: "denied",
    });
  } else {
    gtag(
      "consent",
      "default",
      JSON.parse(localStorage.getItem("consentMode"))
    );
  }
</script>

<!-- Google Tag Manager -->

以下はバナー例です。

<div id="consentBanner" style="display: none">
  <p>
    This site uses cookies for analysis purposes. Do you consent to the use
    of cookies?
  </p>
  <button id="acceptCookies">Agree</button>
  <button id="declineCookies">Disagree</button>
</div>

以下はバナーによりLocalStorageを制御するスクリプト例です。

window.onload = function () {
  var consentGiven = localStorage.getItem("consentMode");
  if (consentGiven === null) {
    document.getElementById("consentBanner").style.display = "block";
  }

  document
    .getElementById("acceptCookies")
    .addEventListener("click", function () {
      localStorage.setItem("consentMode", "true");
      consentUpdate("granted");
      document.getElementById("consentBanner").style.display = "none";
    });

  document
    .getElementById("declineCookies")
    .addEventListener("click", function () {
      localStorage.setItem("consentMode", "false");
      document.getElementById("consentBanner").style.display = "none";
    });
};

function consentUpdate(consentState) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: "consent_update",
    analytics_storage: consentState,
  });
}