このページは Cloud Translation API によって翻訳されました。

GA4 e コマース（タグマネージャー）: GA4 のイベントを送信する

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

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

結果

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

始める前に

e コマース移行ヘルパーツールを使用して、現在の実装が次の条件を満たしていることを確認してください。
- UA プロパティを使用していること
- サイトでタグマネージャーとデータレイヤーを使用して e コマースイベントを送信していること
e コマース実装の移行オプションで、各オプションのトレードオフを確認しましょう。このガイドの手順に従うと、既存の UA 実装に GA4 e コマースイベントが使用されることになります。その方法で間違いがないかご確認ください。
イベント互換性に関するリファレンスで、GA4 プロパティへの送信時の UA イベントの変換方法について確認しましょう。

トレードオフと考慮事項

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

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

実装

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

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

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

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

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

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

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

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

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

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

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

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

たとえば、データレイヤーを使用した次のような商品クリックイベントは
```
dataLayer.push({'event': 'productClick', 'ecommerce': {<ecommerce_parameters>}});
```
gtag.js API に移行すると、次のようになります。
```
gtag('event', 'select_item', {<ecommerce_parameters>});
```
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
トリガー: event が productClick と等しい

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

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

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

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

UA のタグ設定の更新

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

タグタイプ: ユニバーサルアナリティクス
トラッキングタイプ: イベント
イベントカテゴリ: Ecommerce
イベントアクション: Product Click
拡張 e コマース機能を有効にする: true
データレイヤーを使用する: true
GA4 スキーマを使用する: true
トリガー 1: event が productClick と等しい
トリガー 2: event が select_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.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>