CMS またはウェブサイト作成ツールに Google タグを組み込む

Google タグ（gtag.js）は、ウェブサイトに追加するコードスニペットの一種です。このタグを追加することで、Google アナリティクス 4、Google 広告、Google マーケティングプラットフォームなどのさまざまな Google サービスでユーザーアクションを測定することができます。Google タグの詳細

このガイドでは、Google タグをコンテンツ管理システム（CMS）またはウェブサイト作成ツールに統合し、CMS エンドユーザーが Google 測定サービスにアクセスできるようにする方法について説明します。

対象

このガイドは、Google 測定サービスとの統合を CMS ユーザーに提供する CMS またはウェブサイト作成ツールのオーナー（ユーザーではなく）を対象にしています。

始める前に

Google タグのデベロッパー ID があることを確認します。Google タグのデベロッパー ID がない場合は、Google タグのデベロッパー ID リクエストフォームに記入します。デベロッパー ID は、CMS エンドユーザーがウェブサイトの測定コードに追加する ID（測定 ID やコンバージョン ID など）とは異なります。

概要

自社のプラットフォームを Google サービスと統合する手順は次のとおりです。

Google タグと統合する
CMS ユーザー向けの入力構造を更新する
Consent API を実装する
イベントデータをセットアップする
更新した統合を確認する
CMS ユーザーデプロイ手順を更新する

Google タグと統合する

Google タグと統合すると、CMS ユーザーはサイトのすべてのページに Google の測定サービスを（gtag.js を通して）デプロイできるようになります。従来のタグ（analytics.js など）との統合がすでに存在する場合は、gtag.js との統合を行う前に削除してください。

Google タグと統合するには、既存のコードスニペットを次のスニペットに置き換えます。CMS ユーザーが TAG_ID を独自のタグ ID に置き換えることができるようにしてください。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE_TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID

  gtag('config', 'GOOGLE_TAG_ID');
</script>

次の点にご留意ください。

広告主は、allow_ad_personalization_signals パラメータを使用して、リマーケティングなどの広告のパーソナライズ機能を無効にできます（パーソナライズド広告データの収集を無効にするを参照）。
Google タグスニペットは、1 ページにつき 1 回だけ使用することが推奨されています。スニペットには複数のタグ ID を含めることができます。gtag.js の既存のインスタンスがある場合は、既存のタグに新しいタグ ID を追加します。詳細

CMS ユーザー向けの入力構造を更新する

デプロイしている Google 測定サービスにかかわらず、CMS ユーザーが 1 つのインターフェースを使って複数の形式の Google タグ ID を提供できるようにする必要があります。

たとえば、以下の例はシンプルな Google タグ入力ボックスを示しています。この統合は、ユーザーには Google タグのデプロイを介して提供し、その結果として、Google 広告と Google アナリティクスがデプロイされるようにします。

Google タグ ID 入力ボックスの画像

次の図のような実装も可能です。プラットフォームのユーザーフローは Google アナリティクスと Google 広告で別個に用意されていますが、どちらも誘導先は共通の Google タグ ID 入力インターフェースになっています。

Google アナリティクスと Google 広告が 1 つの入力フローにつながっている画像

タグ ID の入力ボックスは、正規表現のパターン [A-Z]{1,3}\w{5,}[\w]* を使って、複数の ID パターンに対応させる必要があります。

Google タグには、ユーザーの同意を管理する Consent API が組み込まれています。この API により、Cookie に対するユーザーの同意を、広告目的と分析目的とに区別できます。

CMS ユーザーによる対応が必要のない gtag('consent', 'update' {...}) 呼び出しの統合は最低限受け入れられることが想定されます。この統合により、Google タグ（Google 広告、Floodlight、Google アナリティクス、コンバージョンリンカー）が最新のユーザーの同意ステータスを読み取り、パラメータ &gcs を介して Google に対するネットワークリクエストにそのステータスを含めることができます。

追加の実装手順として、gtag('consent', default' {...}) ステータスをデプロイする（または広告主が UI などでデプロイするのを支援する）ことと、同意ステータスを認識してタグを配信するよう Google タグのブロックを解除する（つまり、同意ステータスに基づく条件付き配信ではなくなる）ことが必要になる場合があります。

実装の詳細については、同意設定を管理する（ウェブ）をご覧ください。

イベントデータをセットアップする

CMS ユーザーによる操作なしで、CMS ユーザーのウェブサイトから Google アカウントにさまざまなイベントデータを送信できるようにする必要があります。たとえば、購入の目標到達プロセスの各段階（add_to_cart、begin_checkout、add_payment_info、add_shipping_info、purchase）や、見込み顧客の発掘、登録などにイベントを追加できます。

イベントを追加する際のおすすめの方法は次のとおりです。

可能な限りすべてをログに記録する
8 個以上の主なイベントをセットアップする
e コマースイベントを優先する

可能な限りすべてをログに記録する

可能であれば、デフォルトのイベントを設定します。これには次のものが含まれます。

コンバージョンイベント（purchase、sign_up など）
コンバージョンイベント前のイベント（add_to_cart など）
行動エンゲージメント（メディアインタラクションなど）。これにより、エンドユーザーによるエンゲージメントの状況を把握できます。

コンバージョンイベントスニペットは、コンバージョンページ（購入確認、フォーム送信確認など）にのみ追加する必要がありますが、Google タグはサイトのすべてのページに追加してください。

イベントは、event コマンドを使用して送信されます。これには、上記でグローバルサイトタグに含めたのと同じ Google タグのデベロッパー ID も含まれます。

gtag('event', 'my_event', {
  'developer_id.<developer ID>': true,
  // Additional event parameters
});

たとえば、event コマンドを使用し、method の値を「Google」に指定して login イベントを送信することができます。

gtag('event', 'login', {
  'developer_id.<developer ID>': true,
  'method': 'Google'
});

<!-- Event snippet for sales conversion page -->
<script>
  gtag('event', 'conversion', {
      'developer_id.<developer ID>': true,
      'value': <value>,
      'currency': '<currency>',
      'transaction_id': '<transaction_id>'
  });
</script>

次の点にご留意ください。

デベロッパー ID <developer ID> は、お客様のプラットフォーム固有の一意の ID です。この ID をすべてのイベントにアタッチしてください。
次のパラメータは省略可能です。
- 'value': 購入価格などのコンバージョンの値（数値）。
- 'currency': 3 文字の通貨コード。複数の通貨を受け付けている場合に便利です。
- 'transaction_id': トランザクションの一意の ID（注文 ID など）。重複除去に使用されます。
一部のパラメータは省略可能ですが、各イベントにできるだけ多くの情報を含めることをおすすめします。
- パラメータを使用することで、ウェブサイトまたはアプリで発生したユーザーの操作に関する情報を追加できます。たとえば、販売商品をユーザーが閲覧した際に、その商品の名前、カテゴリ、価格などのパラメータをイベントに含めることが可能です。
- 一部のパラメータは、ユーザーをより詳細に把握できるよう、Google アナリティクスで事前構築済みのディメンションと指標に自動的に入力されます。

クリックに基づいてコンバージョンイベント（ボタンのクリックや、AJAX を使用するサイトでの動的レスポンスなど）を測定する場合は、次のスニペットを使用することもできます。

<!-- Event snippet for sales conversion page
    In your HTML page, add the snippet and call gtag_report_conversion
    when someone clicks on the chosen link or button. -->
<script>
  function gtag_report_conversion(url) {
  var callback = function () {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  };
  gtag('event', 'conversion', {
    'developer_id.<developer ID>': true,
    'value': <value>,
    'currency': '<currency>',
    'transaction_id': '<transaction_id>',
    'event_callback': callback
  });
  return false;
}
</script>

8 個以上の主なイベントをセットアップする

サイトオーナーにとって最も価値のある主なイベントのセットを設定しましょう。少なくとも、次のイベントを設定することをおすすめします。

view_item_list: ユーザーがアイテムのリスト（商品のリストなど）を表示したとき。詳細

gtag('event', 'view_item_list', {
  item_list_id: "related_products",
  item_list_name: "Related products",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Item",
    currency: "USD",
    discount: 2.22,
    price: 99.9,
    quantity: 1
  }]
});

add_to_cart: ユーザーが 1 個以上の商品をショッピングカートに追加したとき。詳細

gtag('event', 'add_to_cart', {
  value: 99.0,
  currency: "USD",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Product",
    price: 99.0,
    currency: ‘USD’,
    quantity: 1,
    item_category: "All Products"
  }]
});

begin_checkout: ユーザーが 1 個以上の商品を対象として決済プロセスを開始したとき。詳細

gtag('event', 'begin_checkout') {
  value: 99.0,
  currency: "USD",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Product",
    price: 99.0,
    currency: ‘USD’,
    quantity: 1,
    item_category: "All Products"
  }]
});

purchase: ユーザーが 1 つ以上の商品またはサービスを購入したとき。詳細
```
gtag('event', 'purchase', {value: XX, currency: 'USD', items: [{xx},{xx}]});
```
sign_up: エンドユーザーが登録を行う際に、最も一般的な登録方法（例: Google アカウント、メールアドレス）が表示されたとき。詳細
```
gtag('event', 'sign_up', {method: 'web'});
```
generate_lead: ユーザーがフォームを送信したとき。詳細
```
gtag('event', 'generate_lead', {value: XX, currency: 'USD'});
```
subscribe: ユーザーがサービスまたはニュースレターに登録したとき。
```
gtag('event', 'subscribe', {value: XX, currency: 'USD', coupon: 'XX'});
```

book_appointment: ユーザーが予約したとき。

gtag('event', 'book_appointment', {value: XX, currency: 'USD', coupon: 'XX'});

その他の推奨事項

Google では他にも多数のイベントとパラメータがサポートされています（特に e コマース向け）。通常は、以下のイベントを収集することをおすすめします。

価値に直結する成功イベント
基礎的なコンバージョンに貢献する成功イベント（add_to_cart、sign_up など）
広告主がエンドユーザーに対するエンゲージメントを理解するための、エンゲージメントとユーザーインタラクション

以下は、イベント収集について詳しく説明している追加リソースです。

イベント
ユースケース別の推奨イベント
Google アナリティクス 4 プロパティの e コマース測定

Google では、このスキーマに関して今後さらなる拡張を希望しておりますので、提案がある場合はお知らせください。

更新した統合を確認する

変更内容を本番環境に実装する前に、以下との互換性を確認してください。

リンク先を Google アナリティクス 4 プロパティに設定した Google タグ
リマーケティングおよびコンバージョン測定用の Google タグ

また、すべてのページ（コンバージョンページを含む）でタグが正しく配信されることを確認しましょう。次のようなツールが役立ちます。

Google Tag Assistant: Tag Assistant では、どの Google タグがどのような順序で配信されたかを確認できます。Tag Assistant デバッグモードでは、データレイヤーに渡されているデータと、そのようなデータ交換をトリガーしたイベントが表示されます。
Chrome デベロッパーツール: [ネットワーク] タブを使用して、「google」を含むリクエストをフィルタし、データの送信方法を確認します。
（サーバーサイド）Google アナリティクスのリアルタイムレポート: 無料の Google アナリティクスアカウントを作成し、リアルタイムレポートを使用して、タグヒットが Google のサーバーによって受信されているかどうかを確認します。

バグを報告したり、不足している情報に関するフィードバックを提供したりする場合は、コンテンツ管理システムのサポートフォームに記入してください。

可能であれば、継続的な検証のためにテスト用のアクセス権を Google に共有してください。

CMS ユーザーデプロイ手順を更新する

ドキュメントを更新して、今回更新した統合を使って Google 測定サービスをデプロイする明確な手順を提供します。手順の下書きを CMS 統合設定ドキュメントの確認フォームに入力して送信してください。Google からフィードバックを提供させていただく場合があります。