SEM Technology

Googleタグマネージャーの同意モード(Consent Mode)の利用方法を徹底解説

新機能
徹底解説

記事公開日:

Googleタグマネージャーの同意モード(Consent Mode)の利用方法を徹底解説

Google Marketing Livestream 2021でGoogleタグマネージャーの同意モード(Consent Mode)が発表されました。この機能自体は、1年くらい前からGoogleの公式ヘルプページにも記載はありましたが、今回改めて同意モードが正式にローンチされたという解釈で良いと思います。実際、このイベントのタイミングに合わせて、GoogleタグマネージャーのUIにも同意モードに関する機能追加が行われました。

本記事では、この同意モード(Consent Mode)の利用方法を解説していきたいと思います。

同意モード(Consent Mode)とは？

2018年にヨーロッパで開始されたGDPRやカリフォルニアのCCPAなどの法規制により、WebサイトでCookieを利用する際にはユーザーの同意を得なければならないようになってきました。日本ではまだ法整備されていないですが、日本国内のサイトでも、ページ閲覧時にページ下部にCookie利用の同意を求めるメニューが表示され始めたことに気づいている人も多いと思います。

Cookie同意に対する適切なタグの動作

Cookie同意バナーを用いる場合の動作フローとしては、ページの読み込み時にCookieの同意バナーを表示し、ユーザーの同意を得た上で関連するCookieを利用する必要があります。つまり、ページが読み込まれたとしても、ユーザーからの同意が得られるまではCookieを利用するタグの実行を行うのはストップする必要があります。一方で、ユーザーの同意を得たあとであればCookieの利用は問題ありません。

Cookie同意前のタグの実行について、どのような挙動になるべきかについては様々な考えがあるようです。具体的には、Cookie同意が得られるまでは関連するタグの実行は一切行わないようにするケースと、Cookieを利用しない範囲でタグの実行を行うケースとがあるようです。Googleタグマネージャーの同意モードを使ったGoogle系タグ(現時点では、Google広告タグ、Floodlightタグ、Googleアナリティクスタグ、コンバージョンリンカータグ)は、後者である「Cookieを利用しない範囲でタグの実行を行う」という挙動を行うようです。

Cookie同意が得られていない時に、Cookieを利用しない範囲でタグを適切に動作させることは、それぞれのツールに対する高い知識が必要であり、一般のサイト開発者がそのような実装を行うことは至難の技といえます。結果、多くのサイトでは、Cookieの同意が得られない場合は関連するタグの実行を一切行わないようにしているようですが、その場合データの欠損といった問題が発生します。

そういった理由もあり、今回の新機能である「同意モード(Consent Mode)」がローンチされたものと思われます。

今回合わせて試したCookie管理ツールの紹介

今回は、「Civic」というスコットランドの会社が提供している「Cookie Control」というCookie管理ツールを利用して同意モードの検証を行っています。やはり、Cookie管理ツールはGDPRの発祥の地とも言えるヨーロッパ圏の会社が提供しているケースが多そうです。Cookie Controlを選定した理由として、Googleタグマネージャーのテンプレート・タグが現時点で存在しないことがあります。

もちろん、テンプレート・タグが存在する場合、Cookie管理ツールをGoogleタグマネージャーに統合する難易度が下がりますが、その分ブラックボックスが増えてしまい同意モードの挙動について詳しく知ることを難しくします。手軽にCookie管理を行うことが目的ではなく、同意モードの挙動をきちんと把握することが目的であるため、このCookie Controlで試すことにしました。また、Cookie Controlには、無料プランが存在することも選定理由の1つとなります。

同意モード(Consent Mode)の実装方法

同意モード実装前の状態

今回は本番サイトではなく、同意モードの検証のために準備したテストサイトで実装してみます。テストサイトは、全10ページくらいでお問合せフォームも含んだ静的サイトとなっています。このテストサイトに新規に作成したGoogleタグマネージャーのコンテナをインストールします。

インストールしたコンテナには、検証のために

  • Googleアナリティクスのページビュータグ
  • Google広告のコンバージョン・リンカータグ
  • Google広告のコンバージョン・タグ
  • Google広告のリマーケティング・タグ
  • Yahoo広告のリマーケティング・タグ
  • Yahoo広告のコンバージョン・タグ

を設置済みの状態からスタートします。この時点では、まだCookie管理ツール「Cookie Control」は導入していない状態となります。当然、想定通り、Cookieの同意バナーなどは表示されず、またページ読み込みに合わせて各種タグが実行されることを確認済みです。

実際のGoogleタグマネージャーの設定は以下のようになっています。

Cookie Controlの導入

続いて、サイトにCookie Controlを導入していきます。Cookie Controlのサイトから無料範囲の設定でアカウント登録を行うと、以下のようにタグが出力されます。

このタグを、Googleタグマネージャーの「カスタムHTML」タグを使って全ページに配信(一旦トリガーは「All Pages」を指定)するように設定し、サイトを確認します。すると、当然ながら、ページ読み込み時(Googleタグマネージャーの「gtm.js」のタイミング)でCookieの同意バナーが表示されました。

Cookie Controlのデフォルトの言語が英語になっているため、ツールから出力されたタグをカスタマイズすることで日本語に変更し、またCookieのカテゴリ分類についても「アクセス解析ツール」「Web広告」の2つになるように、そしてCookie同意未設定の状態でページを読み込んだ場合はデフォルトでCookieバナーの表示を行うようにCookie Controlタグの改修を行います。改修方法は、Cookie Controlの開発者向けドキュメントを参考に行い、最終的に以下のようなコードにしました。

<script src="https://cc.cdn.civiccomputing.com/9/cookieControl-9.x.min.js"></script>
<script>
var config = {
  apiKey: 'xxxxxxxxxxxxxx',
  product: 'COMMUNITY',
  optionalCookies: [{
    name: 'analytics',
    label: 'アクセス解析ツール',
    description: 'サイト改善のための分析ツールとして「Googleアナリティクス」を用いています。このCookieを無効化するとブラウザ固有のIDがセットされず、断続的な統計データのみが送信されます。',
    cookies: [],
    onAccept : function(){},
    onRevoke: function(){}
  }, {
    name: 'ads',
    label: 'Web広告',
    description: 'サイトの閲覧や広告のクリック履歴がサイト内外で表示される広告の最適化に使われます。広告媒体には、GoogleとYahooの2つの媒体を利用しています。',
    cookies: [],
    onAccept : function(){},
    onRevoke: function(){}
  }],
  text: {
    title: '本サイトで読み書きするCookieについて',
    intro: '本サイトでは以下の目的でCookieを読み書きします。',
    necessaryTitle: '必要不可欠なCookie',
    necessaryDescription: 'ブラウザの設定で無効化できますが、サイトの機能が正常に動作しなくなることがあります。',
    accept: '許可する',
    acceptSettings: '許可する',
    reject: '拒否',
    rejectSettings: '拒否'
  },
  initialState: 'open',
  position: 'RIGHT',
  theme: 'DARK'
};

CookieControl.load( config );
</script>

このコードで表示されるCookie同意バナーは以下のようになります。

もちろん、今のままではCookieの同意バナーは表示されるものの、この同意に基づいたタグの動作になっていないので、Googleタグマネージャーの同意モードへの組み込みを行う必要があります。

Cookie Controlタグの実行タイミングを変更

今回のGoogleタグマネージャーのアップデートにより、デフォルトのトリガーとして、

  • Consent Initialization - All Pages(トリガータイプは「同意の初期化」)
  • Initialization - ALl Pages(トリガータイプは「初期化」)

という2つが追加されました。もともとあったトリガーと合わせると、これらのデフォルトのトリガーの実行順序は、

  1. Consent Initialization(gtm.init_consent)
  2. Initialization(gtm.init)
  3. Container Loaded(gtm.js)
  4. DOM Ready(gtm.dom)
  5. Window Loaded(gtm.load)

のようになります。これらのトリガーの中で「Consent Initialization」が最も先に実行され、このトリガーでCookieの同意バナーを実行するタグを配信するように変更する必要があります。

ということで、「Cookie Control」タグのトリガーを変更しました。

ただし、この状態ではタグの実行順序は制御できたものの、Googleアナリティクス・タグや広告タグがCookie同意ステータスに基づいた挙動になっていません。続いては、Cookie同意ステータスに基づいた挙動になるように実装を進めていきます。

Cookie Controlタグで同意モードを利用するように設定

現在は、Googleタグマネージャーが同意モードで実行するような設定になっていないのが問題の原因となります。そのため、同意モードを起動するように実装します。Google公式の開発者向けヘルプページを読み込んだ結果、以下のような実装をする必要がありそうです。

デフォルトの動作を拒否に設定

「同意の初期化」のタイミングで、Googleタグマネージャーの同意モードのデフォルトの動作を一旦拒否に設定します。今回は、タグマネージャー内で既に実装しているタグ「Cookie Control Tag」のカスタムHTML内を以下のように編集します。

<script src="https://cc.cdn.civiccomputing.com/9/cookieControl-9.x.min.js"></script>
<script>
  <!-- ここから追加 -->
  function gtag(){ dataLayer.push(arguments); }
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'analytics_storage': 'denied'
  });
  dataLayer.push({
    'event': 'default_consent'
  });
  <!-- ここまでを追加 -->
    var config = {
...

これにより、一旦同意モードを拒否に設定することができ、Cookie利用を許可するコマンドを実行しない限り、Googleタグマネージャーから配信するGoogle系のタグがCookieを利用しないようになります。

ユーザーの設定に合わせて許可・拒否を設定

続いて、同意バナーに基づいてユーザーがCookieの利用を許可・拒否した時に、Googleタグマネージャーの同意モードの設定を更新するようにします。例えば、gtagコマンドを使って、

gtag('consent', 'update', {
  'ad_storage': 'granted'
});

のようなJavaScriptを実行すると、広告に関わるCookieを許可することができます。

これらを、Cookie Controlの同意バナーのアクションに基づいて実行するようにします。Cookie Controlの開発者向けドキュメントによると、同意バナーのアクションが行われると、各Cookieオプションの中のonAccept / onRevokeメソッドが呼び出されるようになっているようです。そのため、onAccept / onRevokeメソッドの書き換えも行います。

デフォルトの動作とユーザーの設定に合わせたコード

以上の「デフォルトの動作を拒否に設定」「ユーザーの設定に合わせて許可・拒否を設定」で変更した部分は以下のハイライトされた部分になります。

カスタムHTMLの全文は以下のようになっています。

<script src="https://cc.cdn.civiccomputing.com/9/cookieControl-9.x.min.js"></script>
<script>
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
  'ad_storage': 'denied',
  'analytics_storage': 'denied'
});
dataLayer.push({
  'event': 'default_consent'
});

var config = {
  apiKey: 'xxxxxxxxxxxxxx',
  product: 'COMMUNITY',
  optionalCookies: [{
    name: 'analytics',
    label: 'アクセス解析ツール',
    description: 'サイト改善のための分析ツールとして「Googleアナリティクス」を用いています。このCookieを無効化するとブラウザ固有のIDがセットされず、断続的な統計データのみが送信されます。',
    cookies: [],
    onAccept : function(){
      gtag('consent', 'update', {
        'analytics_storage': 'granted'
      });
    },
    onRevoke: function(){
      gtag('consent', 'update', {
        'analytics_storage': 'denied'
      });
    }
  }, {
    name: 'ads',
    label: 'Web広告',
    description: 'サイトの閲覧や広告のクリック履歴がサイト内外で表示される広告の最適化に使われます。広告媒体には、GoogleとYahooの2つの媒体を利用しています。',
    cookies: [],
    onAccept : function(){
      gtag('consent', 'update', {
        'ad_storage': 'granted'
      });
    },
    onRevoke: function(){
      gtag('consent', 'update', {
        'ad_storage': 'denied'
      });
    }
  }],
  text: {
    title: '本サイトで読み書きするCookieについて',
    intro: '本サイトでは以下の目的でCookieを読み書きします。',
    necessaryTitle: '必要不可欠なCookie',
    necessaryDescription: 'ブラウザの設定で無効化できますが、サイトの機能が正常に動作しなくなることがあります。',
    accept: '許可する',
    acceptSettings: '許可する',
    reject: '拒否',
    rejectSettings: '拒否'
  },
  initialState: 'open',
  position: 'RIGHT',
  theme: 'DARK'
};

CookieControl.load( config );
</script>

同意モードの挙動の確認

以上で、Googleタグマネージャーの同意モードの実装が完了となります。Googleタグマネージャーのワークスペースを公開し、Chrome開発者ツールを使って、ビーコンの送信内容やCookieの保存内容を確認してみます。ただし、広告系のタグはCookieの扱いが複雑なため、ここではGoogleアナリティクスのビーコンで使われる「cid」(クライアントID)パラメーターやCookieに保存する「_ga」の値を確認していきたいと思います。

最初にページを表示した時のGAタグ

最初にページを表示した時は、まだユーザーはCookieの利用に同意していない状態となります。この時、Googleアナリティクスにはビーコンの送信が行われますが、Cookie「_ga」には何も保存されていない状態となっています。

この状態でCookie同意バナーに何も触らないまま再びページの再読み込みをしてみます。すると、Googleアナリティクスに送信されるクライアントIDが1回目と2回目で変わっていることが分かります。これは、CookieにクライアントIDを保存していないため、1ページ目と2ページ目で別ユーザーと認識されており、Cookieを使わない時の適切な挙動と言えます。

また、同一ページ内でページビューとイベントのヒットをGoogleアナリティクスに送信するケースを確認したところ、これらもクライアントIDは異なる値で送信されました。これは、Googleタグマネージャーからのタグ発火の場合、発火するタグごとにGAトラッカーが生成され、トラッカーが共用されないのが原因と思われます。

Cookieの利用を許諾した時の動き

Cookie利用を許諾すると、Googleアナリティクスへのページビュー・ビーコンが送信されました。そしてこのタイミングでCookieにクライアントIDの情報が記録されることを確認できました。もちろん、CookieにクライアントIDの情報が記録されているため、同一ページ内でその後イベントの送信を行っても同じクライアントIDでヒットがGoogleアナリティクスに送信されます。また、別ページに遷移しても同様にクライアントIDを引き継いで送信できていることが確認できます。

最初にページを読み込んだ時と、Cookieの利用を許諾した時の両方でページビューが送信されるため、2重にページビューが送信されてしまいます。ただ、1回目と2回目ではクライアントIDが異なっていることと、Cookie利用を許諾した時のクライアントIDでページビューを送信しておかないと、参照元の情報などが欠損してしまうことから、仕方なくこのような動作になっているのかもしれません。

Cookieの利用を拒否した時の動き

一度許可したCookieを再度拒否してみます。すると即座にブラウザのCookieからGoogleアナリティクスに関連するCookieが削除され、意図通りの挙動が確認できます。つまり、Cookieの利用を拒否した時に、自身で関連するCookie情報をクリアしなくとも、Googleタグマネージャー側が適切にCookieの処理をしてくれるようです。

Google系以外のタグは？

Google系のタグについては、Googleタグマネージャーがよしなに処理してくれてそう、ということが分かりました。では、次にGoogle系以外のタグについても見ていく必要があります。今回の検証では、Yahoo広告のリマーケティング・コンバージョンタグを設置しているので、これらのタグの動きを確認してみました。

結果的には、該当タグの「追加同意チェック」のチェック項目を追加したり、その他色々試してみましたが、意図通りの動作をすることはありませんでした。これは、公式の開発者向けヘルプページで

ユーザーの同意ステータスに基づいたタグの動作の調整は、以下でサポートされています。

  • Google 広告
  • Floodlight
  • Google アナリティクス
  • コンバージョン リンカー

のように書かれていることからも分かります。適切な動きをGoogle側で把握・管理できないことからもこのような挙動は当然と言えば当然と言えそうです。

まとめ

今回は、Googleタグマネージャーに新たに統合された「同意モード(Consent Mode)」を実際に使ってみた様子を紹介しました。同意モードを利用する上で覚えておきたいことは以下の6点となります。

  • Cookie同意バナーの表示自体は、外部の専用ツールを使い、専用ツールで許可・拒否した結果をGoogleタグマネージャーに連携する必要がある。
  • Googleタグマネージャーの同意モードでは、Cookieを拒否したユーザーであってもタグの実行自体は行う。ただし、タグのフル機能を利用するのではなく、Cookieを利用しない範囲で利用可能な機能のみが実行されるようになっている。
  • Googleタグマネージャーの同意モードに対応しているタグは現時点では「Google 広告」「Floodlight」「Google アナリティクス」「コンバージョン リンカー」の4つのみである。
  • Cookie同意ツール側の設定変更も必要なため、最低限JavaScriptを理解していないと導入することは難しい。
  • 許可した時・拒否した時の細かな動作については、実際に利用する際には再度確認し直すのが良い。
  • 結局、Google系ツール以外の導入を考える時には、標準の同意モードの機能をそのまま流用することはできない。

個人的には、一番最後の点がネックになって、同意モードの普及には時間がかかるような気がしています。

「この記事が勉強になった」「他の人にも読んで欲しい」と思ったら、ぜひソーシャル・サービス上でシェアしてください。