Googleの同意モード(Consent Mode)がリリースされたので、ユーザー同意に基づいてアナリティクスタグを配信してみる

小西諒

2020.09.24

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

2020年9月3日、GoogleがConsent Mode（同意モード）をリリースしました！

この新機能によりCookieを利用せずにGoogle系のタグを細かく配信できるようになったので、今回はGoogle Tag Manager/gtag.jsと、簡単にCookie利用の同意バナーを実装できるCookiebotを組み合わせて、ユーザーからの同意に応じてGoogle Analyticsタグをカスタマイズして配信する、ということをやっていきます。

ユーザーの同意ステータスに基づいて、Google関連タグの配信をカスタマイズできる機能です。

例えば、せっかくウェブサイトに来訪してくれているのにPVにカウントされない状況を防ぎつつ、ユーザーが許可した時にのみCookieを利用する、といったことが可能になります。

詳しくはこちらの記事によく書かれていますので、参考にしてください。

【朗報】GDPR/CCPA対応ツール「Cookiebot」が「Google 同意モード」に即対応し、gtag.js や Google Tag Manager (GTM) との相性が抜群に！

GDPRなどのeプライバシー規則に基づきつつユーザー体験を向上させるために非常に役立つ機能ですね。

前提

Google Tag Manager（以下GTM）もしくgtag.jsを利用している
Cookiebotに登録済み（参考記事: GDPR対応のためにGatsbyサイトにCookiebotを埋め込んでみた）

実装（GTMを使っている場合）

コード側の変更箇所

ステップ1: <head>内で、Google Tag Managerがウェブサイトで最初に読み込まれているスクリプトであることを確認します。

ステップ2: Google Tag Managerのスクリプトにdata-cookieconsent="ignore"属性を追加します。

これにより、Cookiebotに影響されずGoogle Tag Managerが常に読み込まれるようになります。

ステップ3: Google Tag Managerのスクリプトのすぐ上に（<-ここ重要）、下記のタグを埋め込んでください。

<script data-cookieconsent="ignore">
    window.dataLayer = window.dataLayer || [];
    function gtag() {
        dataLayer.push(arguments);
    }
    gtag("consent", "default", {
        ad_storage: "denied",
        analytics_storage: "denied",
        wait_for_update: 500,
    });
    gtag("set", "ads_data_redaction", true);
</script>

ステップ4: Google Tag Managerのスクリプトの直後に、自動Cookieブロック機能(data-blockingmode="auto")を備えたCookiebotスクリプトを挿入します。スクリプトはCookiebot管理画面から取得できます。

以上のステップにより、サイトに埋め込まれた他のタグの配信を、同意を得るまでブロックすることができます。

Google Tag Managerの確認

すでにGTMを通じてGAタグを配信している人は特に何もすることはないのですが、若干混乱しやすいので書いておきます。

Google AnalyticsはConsent Modeに対応しているので、トリガーは「All Pages」のままで大丈夫です。「All Pages」が条件になっていても、同意するまではCookie取得をブロックしてくれます(後述）。

CookiebotにはCookie利用への同意があるまでタグ配信をブロックする機能があるのですが、今回はそれを使うと同意前のPVカウントができないため、利用しません。

例えばFacebook Pixelなど、記事執筆時点でConsent Modeに対応していないタグは、「All Pages」ではなくCookiebotの指定するトリガーによる配信が必要（参考記事: Google Tag Manager and Automatic cookie blocking）なのでご注意ください。

現時点でConsent Modeに対応しているタグは以下の通りです。

Google Ads (Google Ads Conversion Tracking and Remarketing)
Floodlight
Google Analytics
Conversion Linker

実装（gtag.jsを使っている場合）

gtag.js（Global Site Tag）は、Google AnalyticsやGoogle Adsのタグを従来より簡単に、まとめて配信することができるスニペットです。 GTMではなくgtag.jsを使っている場合、コード変更はもう少し簡単になります。

<head>内かつgtag.jsのスニペットより上で同意用のタグを読み込みます。実際のコードは下記のようになります。

<script data-cookieconsent="ignore">
    window.dataLayer = window.dataLayer || [];
    function gtag() {
        dataLayer.push(arguments);
    }
    gtag("consent", "default", {
        ad_storage: "denied",
        analytics_storage: "denied",
        wait_for_update: 500,
    });
    gtag("set", "ads_data_redaction", true);
</script>

<!-- ↓ gtag.jsのスニペット ↓ -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-00000000-0" data-cookieconsent="ignore"></script>
<script data-cookieconsent="ignore">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-00000000-0');
</script><!-- ↑ gtag.jsのスニペット ↑ -->

これで準備は完了です！

さて、ウェブサイトを開き、ChromeのデベロッパーツールからCoookieを確認してみます。