同意モードのテンプレートを作成する

この記事は、Google タグマネージャー（GTM）を使っているウェブサイトで同意管理ソリューションを運用するデベロッパーを対象としています。

このページでは、Google タグマネージャーに備わった同意タイプを紹介し、ご利用の同意管理ソリューションにそれらを組み込む方法を説明します。

タグテンプレートを用意すると、サイトの開発者がコーディングなしで同意ソリューションを組み込めるため、時間と労力を節約できます。

サイトの開発者は同意モードテンプレートを使ってデフォルトの同意ステータスを設定し、サイト訪問者の同意の有無を Google タグマネージャーに伝えることができます。これにより、同意モードに対応している Google タグと第三者タグの機能を最大限に引き出せます。

作成した同意モードテンプレートは、社内用に実装することも、コミュニティテンプレートギャラリーで一般公開することも可能です。同意モードテンプレートを提供している同意管理プラットフォーム（CMP）プロバイダは、Google の同意モードドキュメントに社名が記載され、テンプレートが Google のテンプレートギャラリーの選択ツールに掲載される機会が得られます。

gtag consent コマンドを使ったテンプレートは作成せず、代わりに Tag Manager API の updateConsentState を使用してください。gtag コマンドは、他のあらゆる保留中メッセージよりも処理順が後になるため、次のイベントが始まるまでに処理されない場合があります。詳しくは、データレイヤー情報の処理方法をご覧ください。

Google タグと第三者タグは、同意ステータス（granted または denied）に基づいてデータの保存動作を調整します。これらのタグには、次の同意タイプのいずれについても同意チェックを組み込めます。

同意タイプ	説明
`ad_storage`	広告に関連する情報の保存（Cookie など）を有効にします。
`ad_user_data`	インターネット広告の掲載を目的として Google にユーザーデータを送ることに対する同意を設定します。
`ad_personalization`	パーソナライズド広告への同意を設定します。
`analytics_storage`	サイトの滞在時間など、分析に関連する情報の保存（Cookie など）を有効にします。
`functionality_storage`	言語設定など、ウェブサイトやアプリの機能をサポートする情報の保存を有効にします。
`personalization_storage`	おすすめの動画など、パーソナライズに関連する情報の保存を有効にします。
`security_storage`	認証機能、不正行為防止、その他のユーザー保護など、セキュリティに関連する情報の保存を有効にします。

同意モードは訪問者による同意の可否を把握し、その選択に基づいてタグが動作することをタグの同意チェックが確認します。新しい同意テンプレートを作成する際は、次のベストプラクティスを確認して実施してください。

gtag consent は使用せず、代わりにタグマネージャーの同意モード関連 API の setDefaultConsentState と updateConsentState を使用します。

重要: gtag コマンドは、他のあらゆる保留中メッセージよりも処理順が後になるため、次のイベントが始まるまでに処理されない場合があります。詳しくは、データレイヤー情報の処理方法をご覧ください。
タグが配信されたら即座に、[同意の初期化 - すべてのページ] トリガーを使ってデフォルトの同意ステータスを設定します。
CMP は訪問者にできるだけ早くメッセージを表示して、該当するすべての同意タイプについて同意か拒否を選択できるようにする必要があります。
訪問者が同意の可否を選択したら、CMP はその更新された同意ステータスを渡す必要があります。

1. 新しいテンプレートを作成する

この実装方法では、テンプレートの 1 つのフィールドを使ってデフォルトの同意ステータスを保持し、実装コードが実行時にそのフィールドを読み取って、デフォルトの同意ステータスを設定します。更新コマンドのコードでは、訪問者の同意の可否を保存するために、同意ソリューションによって設定された Cookie の読み取りを試みます。また、訪問者が同意の可否をまだ指定していない場合や、可否を変更した場合にも対処できるように、updateConsentState のコールバックもセットアップします。

同意テンプレートを作成するには:

Google タグマネージャーのアカウントにログインします。
左側のナビゲーションで、[テンプレート] を選択します。
[タグテンプレート] ペインで [新規] をクリックします。

デフォルトの同意ステータスを設定するには:

[フィールド] タブを選択し、[フィールドを追加] > [パラメータ表] をクリックします。
名前を「defaultSettings」に変更します。
フィールドの入力欄を展開します。
[表示名] を「Default settings」に変更します。
[列を追加] をクリックし、[テキスト入力] を選択して名前を「region」に変更し、[列の値は一意である必要があります] チェックボックスをオンにします。
列の入力欄を開き、表示名を「Region (leave blank to have consent apply to all regions)」に変更します。かっこ内の記述は、テンプレート利用者向けの説明です。詳しくは、地域別に同意のデフォルト値を設定をご覧ください。
[列を追加] をクリックして [テキスト入力] を選択し、名前を「granted」に変更します。
列の入力欄を展開し、表示名を「Granted Consent Types (comma separated)」に変更します。
[列を追加] をクリックして [テキスト入力] を選択し、名前を「denied」に変更します。
列の入力欄を開き、表示名を「Denied Consent Types (comma separated)」に変更します。

省略可: 広告データの削除に関するサポートを追加するには:

[フィールドを追加] をクリックし、[チェックボックス] を選択して、フィールド名を「ads_data_redaction」に変更します。
[表示名] を「Redact Ads Data」に変更します。

詳しくは、広告データの削除に伴う Cookie 動作の説明をご覧ください。

省略可: URL パラメータを介した情報伝達に関するサポートを追加するには:

[フィールドを追加] をクリックし、[チェックボックス] を選択して、フィールド名を「url_passthrough」に変更します。
[表示名] を「Pass through URL parameters」に変更します。

詳しくは、URL パラメータを通じた情報伝達の説明をご覧ください。

実装コードを追加するには:

テンプレートエディタで [コード] タブを開きます。
下のコードサンプルのプレースホルダフィールドを編集します。
そのコードをコピーして、テンプレートエディタ内のボイラープレートコードを、コピーしたコードで置き換えます。
そのテンプレートを保存します。

// The first two lines are optional, use if you want to enable logging
const log = require('logToConsole');
log('data =', data);
const setDefaultConsentState = require('setDefaultConsentState');
const updateConsentState = require('updateConsentState');
const getCookieValues = require('getCookieValues');
const callInWindow = require('callInWindow');
const gtagSet = require('gtagSet');
const COOKIE_NAME = 'Your_cookie_name';
/*
 *   Splits the input string using comma as a delimiter, returning an array of
 *   strings
 */
const splitInput = (input) => {
  return input.split(',')
      .map(entry => entry.trim())
      .filter(entry => entry.length !== 0);
};
/*
 *   Processes a row of input from the default settings table, returning an object
 *   which can be passed as an argument to setDefaultConsentState
 */
const parseCommandData = (settings) => {
  const regions = splitInput(settings['region']);
  const granted = splitInput(settings['granted']);
  const denied = splitInput(settings['denied']);
  const commandData = {};
  if (regions.length > 0) {
    commandData.region = regions;
  }
  granted.forEach(entry => {
    commandData[entry] = 'granted';
  });
  denied.forEach(entry => {
    commandData[entry] = 'denied';
  });
  return commandData;
};
/*
 *   Called when consent changes. Assumes that consent object contains keys which
 *   directly correspond to Google consent types.
 */
const onUserConsent = (consent) => {
  const consentModeStates = {
    ad_storage: consent['adConsentGranted'] ? 'granted' : 'denied',
    ad_user_data: consent['adUserDataConsentGranted'] ? 'granted' : 'denied',
    ad_personalization: consent['adPersonalizationConsentGranted'] ? 'granted' : 'denied',
    analytics_storage: consent['analyticsConsentGranted'] ? 'granted' : 'denied',
    functionality_storage: consent['functionalityConsentGranted'] ? 'granted' : 'denied',
    personalization_storage: consent['personalizationConsentGranted'] ? 'granted' : 'denied',
    security_storage: consent['securityConsentGranted'] ? 'granted' : 'denied',
  };
  updateConsentState(consentModeStates);
};
/*
 *   Executes the default command, sets the developer ID, and sets up the consent
 *   update callback
 */
const main = (data) => {
  /*
   * Optional settings using gtagSet
   */
  gtagSet('ads_data_redaction', data.ads_data_redaction);
  gtagSet('url_passthrough', data.url_passthrough);
  gtagSet('developer_id.your_developer_id', true);
  // Set default consent state(s)
  data.defaultSettings.forEach(settings => {
    const defaultData = parseCommandData(settings);
  // wait_for_update (ms) allows for time to receive visitor choices from the CMP
    defaultData.wait_for_update = 500;
    setDefaultConsentState(defaultData);
  });

  // Check if cookie is set and has values that correspond to Google consent
  // types. If it does, run onUserConsent().
  const settings = getCookieValues(COOKIE_NAME);
  if (typeof settings !== 'undefined') {
    onUserConsent(settings);
  }
  /**
   *   Add event listener to trigger update when consent changes
   *
   *   References an external method on the window object which accepts a
   *   function as an argument. If you do not have such a method, you will need
   *   to create one before continuing. This method should add the function
   *   that is passed as an argument as a callback for an event emitted when
   *   the user updates their consent. The callback should be called with an
   *   object containing fields that correspond to the five built-in Google
   *   consent types.
   */
  callInWindow('addConsentListenerExample', onUserConsent);
};
main(data);
data.gtmOnSuccess();

次に、同意ステータスへのアクセスと Cookie へのアクセスに関する権限を設定します。

同意ステータスの管理権限を追加するには:

[権限] タブを選択し、[同意ステータスにアクセス] をクリックします。
[同意タイプを追加] をクリックします。
入力欄をクリックして、表示されるプルダウンメニューから [ad_storage] を選択します。
[書き込み] のチェックボックスをオンにします。
[追加] をクリックします
ad_user_data、ad_personalization、analytics_storage について、2～5 の手順を繰り返します。必要な場合は、他の同意タイプも同じ手順で追加します。
[保存] をクリックします。

Cookie へのアクセス権限を追加するには:

[権限] タブを選択し、[Cookie 値の読み取り] をクリックします。
[特定] の下の欄に、ユーザーの同意の可否を特定するためにコードで読み取る必要がある Cookie の名前を 1 行に 1 つずつ入力します。
[保存] をクリックします。

2. 単体テストを作成する

テンプレート用のテストの作成については、テストをご覧ください。

3. テンプレートを同意ソリューションと連携させる

次のコードは、同意管理ソリューションのコードにリスナーを追加することで、このテンプレートを連携させる方法を示した一例です。

// Array of callbacks to be executed when consent changes
const consentListeners = [];

/**
 *   Called from GTM template to set callback to be executed when user consent is provided.
 *   @param {function} Callback to execute on user consent
 */
window.addConsentListenerExample = (callback) => {
  consentListeners.push(callback);
};

/**
 *   Called when user grants/denies consent.
 *   @param {Object} Object containing user consent settings.
 */
const onConsentChange = (consent) => {
  consentListeners.forEach((callback) => {
    callback(consent);
  });
};

同意ステータスを更新する

サイト訪問者が同意の可否を表明したら（これは通常、同意モードのバナーを操作することで行われます）、テンプレートのコードは updateConsentState API を使って同意ステータスを適切に更新する必要があります。

注: updateConsentState の呼び出しは、ユーザーが同意モードのバナーを操作したページの後続ページでなるべく早く実行する必要があります。可能であれば、外部コードではなくテンプレートのサンドボックス化コードを使って、ユーザーの同意の可否を Cookie から直接読み取るようにします。updateConsentState を呼び出す前に、ネットワークリクエストなどの非同期タスクを実行する必要がある場合は、setDefaultConsentState を呼び出す際に wait_for_update フィールドで 500 ミリ秒以上の待機時間を必ず指定します。これによって、Google タグが配信される前にタスクが完了するよう、時間を確保できます。詳しくは、非同期型の同意管理プラットフォームと連携するをご覧ください。

下のコードは、訪問者がすべてのデータ保存タイプに同意した場合の updateConsentState 呼び出しの例です。先ほどと同様に、この例では granted の値がハードコードされていますが、実際には CMP で収集された訪問者の同意の可否を使って、実行時に値が特定されます。

const updateConsentState = require('updateConsentState');

updateConsentState({
  'ad_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
  'analytics_storage': 'granted',
  'functionality_storage': 'granted',
  'personalization_storage': 'granted',
  'security_storage': 'granted'
});

地域別の動作について

特定の地域からの訪問者に適用するデフォルトの同意ステータスを設定するには、テンプレートの中で地域を指定します（ISO 3166-2 に準拠）。地域の値を使用することで、地域ごとの規則を遵守することが可能になります。このとき、指定した地域以外の訪問者からの情報を失うこともありません。setDefaultConsentState コマンドで地域が指定されていない場合、そのコマンドで指定した値は他のすべての地域に適用されます。

たとえば次のコードでは、スペインとアラスカからの訪問者については analytics_storage のデフォルトステータスを denied に設定し、他のすべての地域からの訪問者については analytics_storage のデフォルトステータスを granted に設定しています。

const setDefaultConsentState = require('setDefaultConsentState');

setDefaultConsentState({
  'analytics_storage': 'denied',
  'region': ['ES', 'US-AK']
});
setDefaultConsentState({
  'analytics_storage': 'granted'
});

具体性の高い指定が優先

地域ごとのデフォルト同意ステータスを設定するコマンドが同じページ内に複数ある場合、該当する中で最も具体的な（狭い）地域指定が優先されます。たとえば、米国（US）向けの ad_storage デフォルト値が 'granted' に、米国カリフォルニア州（US-CA）向けの ad_storage デフォルト値が 'denied' に設定されている場合、カリフォルニア州からのユーザーに適用されるのは、より具体性の高い US-CA の設定です。

地域	`ad_storage`	動作
US	`'granted'`	カリフォルニア州以外の米国のユーザーに適用されます
US-CA	`'denied'`	US-CA（米国カリフォルニア州）のユーザーに適用されます
指定なし	`'granted'`	`'granted'` のデフォルト値を使用します。この例では、所在地が US（米国）でも US-CA（米国カリフォルニア州）でもないユーザーに適用されます。

追加のメタデータ:

gtagSet API を使うと、次の省略可能なパラメータを設定できます。

url_passthrough
ads_data_redaction
developer_id

これらの API は、GTM テンプレートのサンドボックス環境でのみ利用可能です。

広告クリック、クライアント ID、セッション ID の情報を URL で渡す

ユーザーが広告をクリックした後に、その広告主のウェブサイトを訪問すると、その広告の情報がランディングページ URL にクエリパラメータとして付加されている場合があります。コンバージョンデータの精度を高めるため、Google タグは通常この情報を、その広告主のドメイン上のファーストパーティ Cookie に保存します。

しかし ad_storage が denied の場合、Google タグはこの情報をローカルに保存しません。こうした場合に広告クリックの測定品質を高めるには、「URL パススルー」という機能を使うと、URL パラメータを介して広告クリックの情報をページを越えて渡すことができます。

同様に、analytics_storage が拒否に設定されている場合、URL パススルーを使うことで、イベントやセッションに基づく分析データ（コンバージョンなど）を、Cookie を使わずにページ間で受け渡すことができます。

URL パススルーを使用するには、以下の条件を満たしている必要があります。

同意ステータスに応じた動作が可能な Google タグがページに設置されている。
サイトが URL パススルー機能の使用にオプトインしている。
ページに同意モードが実装されている。
リンク先のドメインが現在のページのドメインと同じである。
URL に gclid ないし dclid が含まれている（Google 広告および Floodlight のタグのみ）

テンプレートでは、この設定を有効にするかどうかを利用者が指定できるようにしましょう。URL パススルーを有効にする（url_passthrough に true を設定する）には、次のテンプレートコードを使います。

gtagSet('url_passthrough', true);

広告データを削除する

ad_storage の値が denied（拒否）の場合、広告掲載を目的とした新しい Cookie は設定されません。また、google.com と doubleclick.net に過去に設定されたサードパーティ Cookie が使われこともありません。その場合も、Google に送信されるデータには、ページの完全な URL（URL パラメータ内の広告クリックに関する情報を含む）が含まれます。

ad_storage の値が denied（拒否）の場合に広告データをさらに削除するには、ads_data_redaction を true に設定します。

ads_data_redaction が true で ad_storage が denied（拒否）の場合、Google 広告タグと Floodlight タグによってネットワークリクエスト内で送信される広告クリック識別子は削除されます。

gtagSet('ads_data_redaction', true);

デベロッパー ID

Google 発行のデベロッパー ID をお持ちの CMP ベンダーの場合は、テンプレート内のなるべく早い段階で次のメソッドを使ってその ID を設定してください。

デベロッパー ID が必要になるのは、無関係な会社や法人によって複数のウェブサイトで貴社の実装コードが使われる場合に限ります。1 つの会社や法人で実装コードを使う場合は、デベロッパー ID を申請しないでください。

gtagSet('developer_id.<your_developer_id>', true);

ユーザー向けドキュメントを提供する

貴社のユーザーは、貴社の同意テンプレートを使って、ユーザーの同意情報を収集するタグをセットアップします。そこで、次のベストプラクティスを説明するドキュメントをユーザーに提供します。

設定テーブルで同意のデフォルト値を設定する方法。
表に列を追加して、地域別に同意のデフォルト値をセットアップする方法。
[同意の初期化 - すべてのページ] トリガーでタグを配信する。

次のステップ

タグマネージャーの全ユーザーに提供したいテンプレートがある場合は、コミュニティテンプレートギャラリーにアップロードしてください。

同意モードのテンプレートを作成する

同意モード用タグ テンプレートを使うメリット

同意ステータスと同意タイプ

新しい同意テンプレートを作成する

1. 新しいテンプレートを作成する

同意テンプレートを作成するには:

デフォルトの同意ステータスを設定するには:

省略可: 広告データの削除に関するサポートを追加するには:

省略可: URL パラメータを介した情報伝達に関するサポートを追加するには:

実装コードを追加するには:

同意ステータスの管理権限を追加するには:

Cookie へのアクセス権限を追加するには:

2. 単体テストを作成する

3. テンプレートを同意ソリューションと連携させる

同意ステータスを更新する

地域別の動作について

追加のメタデータ:

広告クリック、クライアント ID、セッション ID の情報を URL で渡す

広告データを削除する

デベロッパー ID

ユーザー向けドキュメントを提供する

次のステップ

同意モード用タグテンプレートを使うメリット