GA4 e コマース(タグ マネージャー): Google アナリティクス 4 のイベントを送信する

このガイドでは、既存のユニバーサル アナリティクス(UA)(タグ マネージャー)の e コマース実装を更新して、Google アナリティクス 4(GA4)e コマース イベントを使用する方法について説明します。

その他の移行ガイドとリソースについては、デベロッパー移行センターをご覧ください。

結果

このガイドに従うと、既存の UA の実装が更新され、GA4 e コマースのイベントとパラメータが使用されるようになります。この新しい e コマースの実装は、e コマースデータを新しい GA4 プロパティに送信する際にも使用されます。UA e コマース レポートにはデータが引き続き入力され、新しい GA4 プロパティでもデータの受信が開始されます。

始める前に

  1. e コマース移行ヘルパーツールを使用して、現在の実装が次の条件を満たしていることを確認してください。

    • UA プロパティを使用していること
    • サイトでタグ マネージャーとデータレイヤーを使用して e コマース イベントを送信していること
  2. e コマース実装の移行オプションで、各オプションのトレードオフを確認しましょう。このガイドの手順に従うと、既存の UA 実装に GA4 e コマース イベントが使用されることになります。その方法で間違いがないかご確認ください。

  3. イベント互換性に関するリファレンスで、GA4 プロパティへの送信時の UA イベントの変換方法について確認しましょう。

トレードオフと考慮事項

以下の情報をご確認のうえ、既存の UA(タグ マネージャー)e コマース実装で GA4 プロパティ e コマース イベントを使用する場合の影響について十分に理解するようにしてください。

メリット デメリット
  • GA4 と UA のレポートの両方で e コマースデータを確認できます。
  • GA4 のイベントとパラメータを使用することで、GA4 の e コマース レポートを確実に完成させることができます。
  • 既存の e コマース イベントを変更する必要があります。
  • すべての GA4 イベントとパラメータが、UA に同等のものがあるとは限りません。shipping_tierdiscountcurrencylocation_idpromotion_namepromotion_id のパラメータは、UA に同等のパラメータがないため、UA レポートに表示されません。

実装

実装の主な目的のひとつは、データレイヤーを使用した測定から、gtag.js API を使った測定に移行することです。移行作業中に測定の中断が発生しないようにするため、以下の手順では、まずタグ設定の更新をすべて完了させたうえで、データレイヤーを更新することを推奨しています。

1. 新しい GA4 プロパティを作成して設定する

次の手順で、新しい GA4 プロパティを作成して設定します。

  1. 新しい GA4 プロパティを作成します。
    • GA4 設定アシスタントを使って新しい GA4 プロパティを自動的に作成し、UA プロパティからプロパティ名、ウェブサイト URL、タイムゾーン、通貨設定をコピーします。ただし、[既存のタグを使用してデータ収集を有効にします] オプションはオフにして、接続済みのサイトタグ機能を無効にします。UA プロパティから設定をコピーしない場合は、GA4 設定アシスタントを使用せずに GA4 プロパティを作成します。
  2. Google タグを追加します。
    1. 既存の UA 実装の Google タグ マネージャー コンテナを開きます。
    2. [タグ] > [新規] をクリックします。
    3. [タグの設定] をクリックし、[Google タグ] を選択します。
    4. GA4 プロパティのタグ ID を入力します。
    5. タグのトリガーは、All Pages(または測定対象にするファイル群)に設定します。
    6. タグ設定を保存して公開します。

2. GA4 イベントタグ設定を追加して、e コマース イベントを測定する

次の手順で、GA4 イベントタグを追加して、e コマースのイベントとパラメータを GA4 プロパティに送信します。

  1. 新しいタグ設定を作成し、[GA4 イベント] を選択します。
  2. [イベント名] には、組み込み変数 を使用します。ここでは、gtag.js API を使って送信された GA4 e コマース イベント名が使用されます。
  3. [詳細設定]、[e コマース] の順に移動して、[e コマースデータを送信] をオンにします。
  4. [データソース] で [データレイヤー] を選択します。
  5. [保存] をクリックします。トリガーは後のステップで追加されるため、トリガーの欠落に関する警告は無視してかまいません。

3. GA4 イベントを使用するように UA e コマースタグの設定を更新する

UA e コマースタグの設定ごとに、同等の GA4 e コマース イベントで配信されるトリガーを追加し、GA4 e コマース イベントデータを読み取るオプションを有効にする必要があります。

各 UA e コマース イベントを対応する GA4 イベントに更新するための一般的な手順は次のとおりです。

  1. 更新する UA e コマース イベントについては、UA と GA4 のイベントとの互換性UA と GA4 のパラメータの対応表、または必要に応じて e コマース移行ヘルパーを使用して、対応する GA4 のイベント名を特定します。たとえば、商品クリック数を測定するようにイベントを更新する場合、GA4 イベント名は select_item になります。
  2. イベントの UA タグ設定を更新します。手順は次のとおりです。
    1. [詳細設定] > [e コマース] で、[GA4 スキーマを使用する] をオンにして、更新された GA4 e コマースを既存のタグが正しく読み取るようにします。データレイヤーから gtag.jsgtag.js API に移行する前ならいつでもこの変更を行うことができます。
    2. [トリガー] セクションで、新しいカスタム イベント トリガーを追加します。イベント名は、上記で特定した GA4 e コマース イベントになります。この手順を完了すると、2 つ以上のトリガー(タグを配信した元のトリガーと、GA4 イベントへの移行を完了すると配信されることになる新しく追加されたトリガー)あります。また、このドキュメントの後半で示すように、トリガーを追加することで、データレイヤーから gtag.jsgtag.js API に移行してもデータの中断が発生しません。
    3. 変更を保存します。
  3. 新しいトリガーを GA4 イベントタグに追加します。手順は次のとおりです。
    1. 以前に設定した GA4 イベントタグを開き、e コマース イベントとパラメータを GA4 プロパティに送信します。
    2. [トリガー] セクションに、上で作成したカスタム イベント トリガー(select_item など)を追加して、関連する e コマース アクティビティの GA4 イベントタグが GA4 イベントへの移行後に確実に配信されるようにします。
    3. 変更を保存します。
  4. UA e コマース アクティビティごとに、上記の手順を繰り返します。 完了したら、タグ マネージャーで変更を公開します。

4. gtag.js API を有効にする

e コマースの実装を UA から GA4 に更新するには、データレイヤーの使用から gtag.js API の使用に切り替えることをおすすめします。gtag.js API はタグ マネージャーとの連携が可能です。

gtag.js API を有効にするには、次のコード スニペットをページの先頭(タグ マネージャー コンテナのスニペットよりも前)に追加します。

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
</script>

5. データレイヤーの使用から gtag.js の使用へ移行する

タグ設定の更新が完了し、gtag.jsgtag.js API を有効にしたら、データレイヤーの使用から gtag.js API の使用に移行できるようになります。

更新の際は、次のリソースを参考にしてください。

  • e コマース(GA4)デベロッパー ガイド。gtag.js API を使って GA4 e コマース イベントを送信し、GA4 イベントのタグとトリガーをタグ マネージャーで設定する方法について説明しています。
  • UA と GA4 のイベントの互換性の表。UA e コマース アクティビティに適した GA4 イベント名を探す場合に役立ちます。たとえば、商品のインプレッションを測定するイベントを更新する場合、GA4 イベント名は view_item_list になります。
  • UA と GA4 のパラメータの対応表。UA e コマース パラメータ名を、同等の GA4 e コマース パラメータ名にマッピングするのに役立ちます。
  • e コマース移行ヘルパー。e コマース イベントを正しく更新したことを検証できます。

UA e コマース イベントごとに、dataLayer.push() API の使用(UA e コマース イベント)から gtag.jsgtag.js API の使用(対応する GA4 e コマース イベント)に移行する一般的な手順は、次のとおりです。

  1. カスタム イベント名を対応する GA4 イベント名に更新します。たとえば、productClick のカスタム イベント名を使用する商品クリックを測定するようにイベントを更新する場合、GA4 の新しいイベント名は select_item になります。GA4 イベント名は、前に設定したトリガーのイベント名と一致する必要があります。

    たとえば、データレイヤーを使用した次のような商品クリック イベントは

    dataLayer.push({'event': 'productClick', 'ecommerce': {<ecommerce_parameters>}});
    

    gtag.js API に移行すると、次のようになります。

    gtag('event', 'select_item', {<ecommerce_parameters>});
    
  2. GA4 で想定されるイベントに合わせて、e コマース パラメータを更新します。 パラメータ名が変更されているため、UA と GA4 のパラメータの対応表を使用して名前を確認してください。GA4 パラメータ値に、一致する UA パラメータ値が入力されます。

例: UA イベントを GA4 に更新する

次の例は、UA のタグ マネージャーで実装された商品クリックの e コマース イベントに同等な GA4 イベントを作成する方法を示しています。

変更前: データレイヤーを使用して UA イベントを送信する

以下は商品のクリックを測定するユニバーサル アナリティクス用のコードで、データレイヤーを使用して実装されています。カスタム イベント名は productClick です。

<script>
/**
 * Call this function when a user clicks on a product link. This function uses the event
 * callback datalayer variable to handle navigation after the ecommerce data has been sent
 * to Google Analytics.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  dataLayer.push({
    'event': 'productClick',
    'ecommerce': {
      'click': {
        'actionField': {'list': 'Search Results'},      // Optional list property.
        'products': [{
          'name': productObj.name,                      // Name or ID is required.
          'id': productObj.id,
          'price': productObj.price,
          'brand': productObj.brand,
          'category': productObj.cat,
          'variant': productObj.variant,
          'position': productObj.position
         }]
       }
     },
     'eventCallback': function() {
       document.location = productObj.url
     }
  });
}
</script>

タグ マネージャーでは、UA タグの設定は次のようになります。

タグタイプ: ユニバーサル アナリティクス
トラッキング タイプ: イベント
イベント カテゴリ: Ecommerce
イベント アクション: Product Click
拡張 e コマース機能を有効にする: true
データレイヤーを使用する: true
トリガー: eventproductClick と等しい

商品クリックの UA タグ設定

トリガーは、productClick イベントがデータレイヤーにプッシュされたときにタグを配信するように設定されています。

productClick カスタム イベントのトリガー設定

変更後: gtag.js を使用して GA4 イベントを送信する

UA のタグ設定の更新

タグ マネージャーでは、GA4 イベント名でトリガーする商品クリック イベントに対して UA のタグ設定が更新され、[GA4 スキーマを使用する] オプションが有効にされます。タグ設定は次のようになります。

タグタイプ: ユニバーサル アナリティクス
トラッキング タイプ: イベント
イベント カテゴリ: Ecommerce
イベント アクション: Product Click
拡張 e コマース機能を有効にする: true
データレイヤーを使用する: true
GA4 スキーマを使用する: true
トリガー 1: eventproductClick と等しい
トリガー 2: eventselect_item と等しい

商品クリックの、GA4 を使用した UA タグ設定

新しいカスタム イベント トリガーのトリガー設定は、select_item イベント名でタグを配信するように設定されています。

select_item イベントのトリガー設定

GA4 のタグ設定の更新

GA4 イベントは、GA4 のイベントとパラメータを使って実装された e コマース アクティビティを測定するように設定されています。このタグは組み込みの Event 変数を使用して GA4 にイベント名を渡します。UA タグ(select_item)で作成された同じトリガーを使用して GA4 タグを配信します。

複数の e コマース アクティビティの GA4 イベントタグ設定

データレイヤーの使用から gtag.js の使用へ移行する

以下のスニペットにより、上記の UA 実装が productClick カスタム イベント(dataLayer.push() API)の使用から GA4 select_item イベント(gtag.jsgtag.js API)の使用に移行されます。select_item のパラメータ値は適宜設定されます。

<script>
/**
 * Call this function when a user clicks on a product link.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  gtag('event', 'select_item', {
    'items': [{
      'item_id': productObj.id,
      'item_name': productObj.name,
      'index': productObj.position,
      'item_list_name': 'Search Results',
      'item_brand': productObj.brand,
      'item_category': productObj.cat,
      'item_variant': productObj.variant,
      'price': productObj.price
    }]
  });
}
</script>