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

2020.09.24

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プライバシー規則に基づきつつユーザー体験を向上させるために非常に役立つ機能ですね。

前提

実装(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を確認してみます。

Google Analytics用のCookieが同意後に取得されているので、成功です。

さいごに

ここ数年思っていた、「GDPRはいいけども、Cookie利用同意を得られない場合、WEBメディアのPVカウントはどうなるんだろう・・・」という疑問に対する一つの答えだと思います。

設定も簡単なので、Cookiebot+Google のコンビは非常におすすめです!


クラスメソッドヨーロッパは Cookiebot を提供する Cybot A/S(本社:デンマーク・コペンハーゲン)と正式にパートナー契約を結んでいます。

日本語での導入サポートや日本円建て請求など GDPR 等のプライバシー法対応に関して様々なお手伝いが可能ですので、ご興味のある企業様はこちらからお問い合わせください。

またユーロ建てクレジットカード払いで直接 Cookiebot をご利用されたい場合も、こちらのリファーラルリンクからサインアップしていただくと、弊社からの導入サポートが付属しますので、是非ご利用ご検討ください。


参考記事: https://support.cookiebot.com/hc/en-us/articles/360009192739-Google-Tag-Manager-and-Automatic-cookie-blocking

https://developers.google.com/gtagjs/devguide/consent

https://support.cookiebot.com/hc/en-us/articles/360003979074-Using-Google-Gtag-with-Cookiebot