Google の新しいタグ プラットフォームに関するドキュメントをご覧いただきありがとうございます。このサイトは公開ベータ版です。(フィードバック

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

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

Google タグ マネージャー(GTM)使用サイト向けの同意管理ソリューションを提供している場合は、Google の同意モードに対応するためのテンプレートを作成することを強くおすすめします。同意モード テンプレートを用意しておけば、利用者は同意モードの導入から使用している同意ソリューションとの連携までをコード編集なしで行うことができるため、時間と労力を大幅に節約できます。

同意モード テンプレートは、デフォルトの同意ステータスを設定し、サイト訪問者が表明した同意を Google タグ マネージャーに伝えるためのタグの作成をサポートします。これにより、同意モードに対応する Google およびサードパーティのタグを効果的に機能させることができます。

作成した同意モード テンプレートは、社内用に実装することも、コミュニティ テンプレート ギャラリーで一般公開することも可能です。同意モード テンプレートを一般提供している同意管理プラットフォーム(CMP)プロバイダは、同意モードのドキュメントの掲載対象となり、テンプレート自体もテンプレート ギャラリーの選択ツールの掲載対象となります。

このページでは、「同意ステータス」と「同意タイプ」の概要、および同意モード関連 API での使用方法を解説します。最後のセクションは、API を使ってタグ マネージャー テンプレートを作成する方法を具体例で紹介したものです。同意モードやタグ マネージャー テンプレートに関する基本的な知識は、以下の記事で学ぶことができます。

Google およびサードパーティのタグは、「同意ステータス」(granted または denied)に応じてデータ保存動作が調整されます。各タグには、次の「同意タイプ」のそれぞれについて、同意チェックを組み込むことができます。

同意タイプ 説明
ad_storage 広告に関連する情報の保存(Cookie など)を有効にします
analytics_storage 訪問時の滞在時間など、分析に関連する情報の保存(Cookie など)を有効にします
functionality_storage ウェブサイトまたはアプリの機能(言語設定など)をサポートする情報の保存を有効にします
personalization_storage パーソナライズ(動画のおすすめなど)に関連する情報の保存を有効にします
security_storage 認証機能、不正行為防止、その他のユーザー保護など、セキュリティに関連する情報の保存を有効にします

テンプレートでは、利用者が自サイトで使用している同意タイプのそれぞれについて、デフォルトの同意ステータスを設定できるようにしましょう。デフォルトの同意ステータスは、地域ごとに設定することが求められる場合もあります。

GTM 利用者は、テンプレートで作成したタグを、全ページで「同意の初期化」トリガーを使って配信する必要があります。これによって、該当タグを他のタグよりも前に配信することができます。テンプレートのコードは、指定されたデフォルト同意ステータスを、タグの配信後即座に設定するように記述する必要があります。その後 CMP は、該当するすべての同意タイプについて同意または拒否を表明できるプロンプトを、なるべく早く訪問者に表示する必要があります。訪問者が同意または拒否を表明したら、CMP は同意ステータスを更新し、適切なテンプレート API を介して受け渡します。同意モード機能が訪問者の同意内容を把握し、同意内容がタグの動作に反映されていることがタグの同意チェックによって確認されます。

タグ設定に GTM を利用するサイトにおける同意モードの実装では、同意ステータスの管理に GTM 専用の API(setDefaultConsentState および updateConsentState)を使用しましょう。これに加え、ads_data_redaction および url_passthrough を適切に設定するために、gtagSet API も使用できます。これらの API は、GTM テンプレートのサンドボックス環境でのみ利用可能です。

デフォルトの同意ステータスは、ページ読み込みの際なるべく早い段階で設定する必要があり、タグのトリガーには「同意の初期化」イベントを使用します。ユーザーが同意内容を表明するか、ユーザーの過去の表明内容が Cookie から読み込まれたら、同意ステータスの更新をなるべく早く GTM に伝達する必要があります。updateConsentState をトリガーする際のアプローチはいくつか考えられます。後述の例では、2 種類の方法を実演しています。

同意ステータスのデフォルト値を設定するには、setDefaultConsentState API を使用します。下のコードは、setDefaultConsentState 呼び出しの使用方法を例示したものです。デフォルト設定として、ad_storage は拒否、残りのデータ保存タイプは許可する内容になっています。また、訪問者の表明内容を CMP から受け取る時間を確保するため、wait_for_update が使用されています。

const setDefaultConsentState = require('setDefaultConsentState');

setDefaultConsentState({
  'ad_storage': 'denied',
  'analytics_storage': 'granted',
  'functionality_storage': 'granted',
  'personalization_storage': 'granted',
  'security_storage': 'granted',
  'wait_for_update': 500
});

サイト訪問者が(通常は同意バナーを操作して)同意内容を表明したら updateConsentState API によって同意ステータスを更新して表明内容を反映するよう、テンプレートのコードを記述します。

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

const updateConsentState = require('updateConsentState');

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

地域別の動作

特定の地域からの訪問者に適用されるデフォルト同意ステータスを設定するには、テンプレート内で地域を指定します。地域(region)値を使用することで、テンプレート利用者は地域ごとの規則を遵守しつつ、他の地域のユーザーからの情報の損失を防ぐことができます。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' が使用されます。この例では、米国または米国カナダ以外の地域のユーザーに適用されます。

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

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

ただし、ad_storagedenied であれば、この情報はローカルには保存されません。こういった場合の広告クリックの測定品質を向上させるには、「URL パススルー」という機能を使って、広告クリックの情報を URL パラメータを介してページ間で受け渡すことも可能です。

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

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

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

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

gtagSet('url_passthrough', true);

広告データを削除する

ad_storage が拒否されている場合、広告用の Cookie が新たに設定されることはありません。また、google.com と doubleclick.net で設定されていたサードパーティ Cookie が使用されることもありません。ただし、Google に送信されるデータには、広告クリックに関する情報を含んだ URL パラメータを含む、ページの完全な URL が含まれます。

ad_storage が拒否されている場合に広告データをさらに削除するには、ads_data_redaction を true に設定します。

gtagSet('ads_data_redaction', true);

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

デベロッパー ID

CMP ベンダーとして Google が発行するデベロッパー ID をお持ちの場合は、テンプレート内でなるべく早い段階でその ID を設定してください。コードは次のようになります。

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

実装例

この例では、同意管理ソリューション由来の Cookie を読み取って訪問者の同意内容を取得するテンプレートの作成方法を示します。これにより、ページ読み込みの際になるべく早い段階で、ユーザーが別のページで表明済みの同意内容を GTM に提供することができます。

例に沿って作業を行うには、デフォルト同意ステータスを格納するフィールドを、テンプレート内に 1 つ作成します。実装コードは、実行時にそのフィールドを読み取って、デフォルト同意ステータスを設定します。更新コマンドのコードは、同意ソリューションが訪問者の同意内容を格納するために設定した Cookie を読み取ろうとする内容です。さらに、訪問者がまだ同意内容を指定していない場合や、同意内容を変更した場合に対応するため、updateConsentState のコールバックをセットアップします。

主なステップは次のとおりです。

テンプレート エディタを使ってテンプレートを作成する

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

フィールドを追加する

  1. [項目] タブを選択して、[フィールドを追加] をクリックします。
  2. [パラメータ表] を選択します。
  3. 名前を「defaultSettings」に変更します。
  4. フィールドの入力欄を展開します。
  5. [表示名] を「Default settings」に変更します。
  6. [列を追加] をクリックし、[テキスト入力] を選択して名前を「region」に変更し、[列の値は一意である必要があります] チェックボックスをオンにします。
  7. 列の入力欄を展開し、表示名を「Region (leave blank to have consent apply to all regions)」に変更します。括弧内の記述は、テンプレート利用者向けのドキュメンテーションです。
  8. [列を追加] をクリックして [テキスト入力] を選択し、名前を「granted」に変更します。
  9. 列の入力欄を展開し、表示名を「Granted Consent Types(comma separated)」に変更します。
  10. [列を追加] をクリックして [テキスト入力] を選択し、名前を「denied」に変更します。
  11. 列の入力欄を展開し、表示名を「Denied Consent Types (comma separated)」に変更します。
  12. [フィールドを追加] をクリックし、[チェックボックス] を選択して、フィールド名を「ads_data_redaction」に変更します。
  13. 表示名を「Redact Ads Data」に変更します。

コードを追加する

下のコードをコピーし、山括弧で囲まれているパラメータ(Cookie 名とデベロッパー ID)を実際の値に置き換えます。編集後のコードを GTM の [コード] タブに貼り付けます(あらかじめ入力されているボイラープレート コードは上書きしてしまってかまいません)。貼り付け後、テンプレートを保存します。

// 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 = '<replace_with_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',
    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) => {
  // Set developer ID
  gtagSet('developer_id.<replace_with_your_developer_id>', true);
  // Set default consent state(s)
  data.defaultSettings.forEach(settings => {
    const defaultData = parseCommandData(settings);
    defaultData.wait_for_update = 500;
    setDefaultConsentState(defaultData);
  });
  gtagSet('ads_data_redaction', data.ads_data_redaction);
  // Check if cookie is set and has values that corresopnd 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 へのアクセスに関する権限の設定を行います。

同意ステータスの管理:

  1. [権限] タブを選択し、[同意ステータスにアクセス] をクリックします。
  2. [同意タイプを追加] をクリックします。
  3. 入力欄をクリックして、表示されるプルダウン メニューから [ad_storage] を選択します。
  4. [書き込み] のチェックボックスをオンにします。
  5. [追加] をクリックします。

手順 2~5 を繰り返します。今度は ad_storage の代わりに analytics_storage を選択してください。

最後に [保存] をクリックします。

Cookie へのアクセス:

  1. [権限] タブを選択し、[Cookie 値の読み取り] をクリックします。
  2. [特定] を選択し、その下の入力欄に Cookie 名を入力します。コードがユーザーの同意内容を判定するために読み取る必要がある Cookie を、改行で区切って入力してください。
  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);
  });
};

テンプレート利用者が行うセットアップ

テンプレート利用者向けのドキュメントを用意しましょう。利用者はこのテンプレートを使って、「同意の初期化 - すべてのページ」型のトリガーを使用するタグを作成することになります。設定の表では、デフォルトで許可する同意タイプと拒否する同意タイプをそれぞれリスト形式で入力してもらいます。ユーザーの地域に応じて同意ステータスのデフォルト設定を使い分ける場合は、同じ設定を共有する地域群ごとに行を作成する必要があります。