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

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

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

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

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

始める前に

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

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

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

タグ ID とは何ですか?どこで確認できますか? タグ ID とは、Google タグを識別するものです。1 つの Google タグに複数のタグ ID が存在することがあります。 たとえば Google 広告のタグには、以前の ID(AW)と One Google タグの ID(GT)の 2 つの ID があります。

Google 広告の 2 つのタグ ID を含む Google タグが表示されている画面。

タグ 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 など)にデータを送信します。

次の例は、Google タグをセットアップし、Floodlight をリンク先として追加する場合のコードを示しています。

Floodlight(タグ ID DC-ZZZZZZ)にデータを送信するには、Google タグの初期化後に別の 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 メソッドを呼び出すことができます。

  1. イベントを定義します。推奨イベントを使用している場合は、標準化されたイベント名事前定義の Key-Value ペアを使用してください。

  2. イベントがトリガーされるタイミング(ページが読み込まれたときや、ボタンがクリックされたときなど)を定義します。

次の例は、ユーザーによるボタンのクリック時にニュースレターの登録を測定する 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', {'key': 'value'});

サイトのすべてのトランザクションで同じ通貨を使用する場合は、set コマンドを使用して currency フィールドを指定します。

gtag('set', {'currency': 'USD'});

1 つの set コマンドで複数の属性を設定することができます。

gtag('set', {
  'country': 'US',
  'currency': 'USD'
});

次のステップ

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

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