Google サービスを設定してイベントデータを送信する

このページは、gtag.js. を使って Google タグを設定する必要があるデベロッパーを対象としています。Google タグの設定の一部は、ユーザーインターフェース上で変更できます。詳しくは、Google タグ設定を指定するをご覧ください。

Google タグをインストールすると、Google タグスニペットよりも後であれば、コード内のどこからでも gtag() コマンドを呼び出せるようになります。

このページでは、次の方法について説明します。

config コマンドを使用して、ウェブサイトと Google サービス間のデータフローを確立する
event コマンドを使用して Google サービスにイベントを送信する
set コマンドを使用して、すべてのイベントで送信される値を設定する

始める前に

このガイドの内容は、次のことが完了していることを前提としています。

Google タグの仕組みを理解している
Google タグを実装している

データフローをセットアップするには、以下が必要です。

Google タグをインストールしたウェブサイトコードへのアクセス権
Google タグに接続する Google サービスのタグ ID

タグ ID とは何ですか？どこで確認できますか？

タグ ID とは、Google タグを識別するものです。1 つの Google タグに複数のタグ ID が存在することがあります。たとえば Google 広告のタグには、以前の ID（AW）と One Google タグの ID（GT）の 2 つの ID があります。

Google 広告の Google タグに 2 つのタグ ID があることを示す画面。

タグ ID は相互に入れ替え可能です。次の表は、Google タグに対応しているタグの概要を示しています。

接頭辞	ID タイプ	説明
GT-XXXXXX	Google タグ	新しく作成された各 Google タグには、GT 接頭辞と一意の ID が割り当てられます。
G-XXXXXX	Google タグ（以前のプレフィックス）	Google アナリティクス 4 のタグは、接頭辞 G と一意の ID が割り当てられた Google タグです。
AW-XXXXXX	Google タグ（以前のプレフィックス）	Google 広告のタグは、接頭辞 AW と一意の ID が割り当てられた Google タグです。
DC-XXXXXX	Google タグ（以前のプレフィックス）	Google Floodlight のタグは、DC 接頭辞と一意の ID が割り当てられた Google タグです。

ユニバーサルアナリティクス（UA）タグは、Google タグ（GT）と互換性がありません。

タグ ID を確認するには:

ステップ 1: Google サービスをタグに接続する

`config` コマンドについて

config コマンドを使って、イベントデータの送信先の Google サービスを指定します。コマンドは次のような形式になります。

gtag('config', 'TAG_ID', {<additional_config_params>});

追加の設定パラメータ

{<additional_config_params>} オブジェクトは省略可能ですが、このオブジェクトでパラメータを指定すると、config コマンドを調整して拡張できます。たとえば、次のパラメータを追加すると、Google アナリティクスのページビューが自動的に送信されるのを妨ぐことができます。

gtag('config', 'TAG_ID', {'send_page_view': false});

データ収集のセットアップを行う

Google サービスにデータ収集をセットアップするには、タグ ID を含む config コマンドを追加します。

例

Google タグ（GT-XXXXXX）により、定義済みのリンク先（Google 広告や GA4 など）にデータを送信します。

次の例は、2 つ目の、リンク先である Floodlight に接続された Google タグを読み込むために、どのようにコードを更新するかを示しています。

Floodlight（タグ ID DC-ZZZZZZ）にデータを送信するには、1 つ目の Google タグ（タグ ID GT-XXXXXX）の初期化後に別の config コマンドを追加します。

<head>
 ...
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());
  gtag('config', 'GT-XXXXXX');
  gtag('config', 'DC-ZZZZZZ');
</script>
</head>

サービス固有の `config` の動作

TAG_ID で指定するサービスによっては、config コマンドがそのサービスの特定の動作を開始する場合があります。たとえば、config コマンドは gtag.js にページビューイベントを開始するよう指示することがあります。

個々のサービスに関する config コマンドの動作について詳しくは、以下の各サービスのドキュメントをご覧ください。

ステップ 2: `event` を使用してデータを送信する

`event` コマンドについて

event コマンドを使用すると、config で指定したサービスにイベントデータを送信できます。コマンドは次のような形式になります。

gtag('event', 'event_name', {
  'key': 'value',
});

イベント名と Key-Value ペアについて

推奨イベント: 推奨イベントは、お客様が実装するイベントですが、事前定義の Key-Value ペアを持っています。このイベントでは、既存のレポート機能と今後追加されるレポート機能を利用できます。

カスタムイベント: 独自のイベントとデータ構造を定義するには、カスタム値を入力してカスタムイベントを送信します。

イベントのセットアップ

Google タグの初期化後であれば、コード内のどこからでも event メソッドを呼び出すことができます。

イベントを定義します。推奨イベントを使用している場合は、標準化されたイベント名と事前定義の Key-Value ペアを使用してください。
イベントがトリガーされるタイミング（ページが読み込まれたときや、ボタンがクリックされたときなど）を定義します。

例

次の例は、ユーザーによるボタンのクリック時にニュースレターの登録を測定する 1 つの方法です。この例では、カスタムイベントを使用して Google アナリティクス 4 プロパティにデータを送信しています。

<head>
   ...
   /* 1. Initialize the Google tag and gtag.js library */
   <!-- Google tag (gtag.js) -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments)};
     gtag('js', new Date());
     gtag('config', 'TAG_ID');
   </script>
</head>

<body>
   <script>
     let date = Date.now();
     /* 2. Define your event. */
     function newsletterSignup() {
       gtag('event', 'newsletter_signup', {
       'time': date,
       });
   }
   </script>
   ...
   /* 3. Trigger your event */
   <button type="submit" onlick="newsletterSignup()">Sign me up!</button>
   ...
</body>

省略可: `set` を使用するすべてのイベントでデータを送信する

set コマンドを使用すると、ページ上のすべての後続イベントに関連付けられるパラメータを定義できます。

たとえば、キャンペーンパラメータを共有して、同じページ上の複数のタグでアクセスできるようにすることが可能です。

コマンドは次のような形式になります。

gtag('set', 'parameterName');

次のステップ

Google のサービスとイベントをセットアップしたら、Google の基本的なタグ設定が完了します。

複数のサービスを管理していて、データフローをより詳細に管理したい場合は、データのグループ化とルーティングについての記事をご覧ください。