GA4 e コマース（analytics.js - 標準 e コマース）: GA4 e コマース イベントを送信する

このガイドでは、analytics.js ユニバーサル アナリティクス（UA）の既存の標準 e コマース実装を移行して、Google アナリティクス 4（GA4）e コマース イベントを使用する方法について説明します。

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

結果

このガイドに従うと、新しい GA4 の実装で、新しい GA4 プロパティと既存の UA プロパティに GA4 e コマース イベントが送信されることになります。既存の UA プロパティには GA4 e コマースデータが正常に送信されますが、レポートは変更されません。

移行には 2 つのフェーズがあります。

始める前に

  1. 現在の実装が、次の要件を満たしていることを確認してください。

    • UA プロパティを使用していること。
      • プロパティにトラッキング ID がある場合は、UA を使用していることを意味します。
    • サイトで analytics.js ライブラリを使用して e コマース イベントを送信していること。

  2. 各オプションのトレードオフについては、e コマース実装の移行オプションをご覧ください。このガイドの手順に従うと、既存の UA 実装に GA4 e コマース イベントが使用されることになります。そのような結果を本当に望んでいるかどうかをご確認ください。

  3. UA プロパティへの送信時の GA4 購入イベントの変換方法については、イベント互換性のリファレンスをご覧ください。

トレードオフと考慮事項

以下の情報をご確認のうえ、UA e コマース実装で GA4 e コマース イベントを使用する場合の影響について十分に理解するようにしてください。

メリット デメリット
  • GA4 レポートと UA レポートの両方で e コマースデータを確認できます。
  • GA4 purchase イベントに移行すると、完全な UA e コマース レポートが作成されます。
  • analytics.js から gtag.js に移行するための追加の作業が発生します。すべてのカスタム測定（イベント、ページビュー、タイミングなど）を analytics.js から gtag.js に移行することが推奨されています。

実装

1. UA 測定を analytics.js から gtag.js に移行する

GA4 e コマース イベント（カスタム測定も含む）を送信するには、analytics.js から gtag.js に移行する必要があります。

通常、移行を完了する手順は次のとおりです。

  1. analytics.js スニペットを削除します。
  2. Google タグ（gtag.js）をインストールし、UA プロパティのトラッキング ID を使って設定します。
  3. カスタム測定コードを analytics.js から gtag.js に移行します。以下のセクションでは、標準の e コマース トランザクションを移行する方法について説明します。他の測定シナリオの移行に関する一般的なヘルプについては、測定の移行をご覧ください。

変更前: analytics.js タグ

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');    // Universal Analytics property.
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

変更後: Google タグ（gtag.js）

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXX-Y');    // Universal Analytics property.
</script>

2. e コマースの実装を更新して GA4 イベントを送信する

既存の e コマース実装を更新して、UA e コマース イベントの使用から GA4 イベントの使用に移行します。この手順を完了すると、UA プロパティに GA4 の purchase イベントが送信されます。この更新による影響を理解するために、トレードオフと考慮事項をご確認ください。

以下の例は、analytics.js の標準 e コマース トランザクション イベントを、UA と互換性のある、同等の GA4 e コマース purchase イベントに移行する方法を示しています。

変更前: UA 標準 e コマース トランザクション（analytics.js）

次の例は、2 つのアイテムを含むトランザクションに対する analytics.js の標準 e コマースの実装を示しています。

// Add the transaction.
ga('ecommerce:addTransaction', {
  id: '1234',     // Transaction ID.
  affiliation: 'Google Store',
  revenue: '29.97',
  shipping: '5.25',
  tax: '2.42'
});

// Add the items belonging to the transaction.
ga('ecommerce:addItem', {
  id: '1234',     // Transaction ID.
  name: 'Android Warhol T-Shirt',
  sku: 'P12345',  // Item ID.
  category: 'Apparel/T-Shirts',
  price: '12.99',
  quantity: '2'
});
ga('ecommerce:addItem', {
  id: '1234',     // Transaction ID.
  name: 'Flame challenge T-Shirt',
  sku: 'P67890',  // Item ID.
  category: 'Apparel/T-Shirts',
  price: '3.99',
  quantity: '1'
});
ga('ecommerce:send');

変更後: GA4 e コマースの purchase イベント（gtag.js）

analytics.js トランザクション イベントを GA4 purchase イベントに移行する場合の重要な違いは次のとおりです。

  • GA4 には、トランザクションに関連するすべての詳細とアイテムを含む単一の purchase イベントが含まれます。analytics.js では、複数の ga() e コマース コマンドを実行して、同じ情報を取得します。
  • GA4 には、イベント全体で transaction_id フィールドが 1 つあります。analytics.js では、それぞれのアイテムに取引 ID が必要です。
  • GA4 には複数のアイテム カテゴリ フィールドがあります。analytics.js では、単一のカテゴリ フィールドがあり、/ 区切り文字を使用して階層が記述されます。ただし、カテゴリ パラメータの変換により、複数のアイテム カテゴリ フィールドがある GA4 イベントを UA プロパティでも利用できます。
 gtag('event', 'purchase', {
   currency: 'USD',
   transaction_id: '1234',    // Transaction ID.
   value: 29.97,
   affiliation: 'Google Store',
   shipping: 5.25,
   tax: 2.42,
   items: [
    {
      item_id: 'P12345',     // Item ID.
      item_name: 'Android Warhol T-Shirt',
      item_category: 'Apparel',
      item_category2: 'T-Shirts',
      price: 12.99,
      quantity: 2
    },
    {
      item_id: 'P67890',    // Item ID.
      item_name: 'Flame challenge T-Shirt',
      item_category: 'Apparel',
      item_category2: 'T-Shirts',
      price: 3.99,
      quantity: 1
    }
  ]
});

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

GA4 e コマース イベントを送信するように e コマースの実装を更新したら、次のいずれかのオプションを使用して、新しい GA4 プロパティへのデータ送信を開始します。

オプション 1: GA4 設定アシスタントを使用し、接続済みのサイトタグを有効にする

GA4 設定アシスタントを使用すると、新しい GA4 プロパティが自動的に作成され、UA プロパティから設定（プロパティ名、ウェブサイトの URL、タイムゾーン、通貨の設定）がコピーされます。また、接続済みのサイトタグ機能を有効にして、既存の UA gtag.js 実装を再利用し、新しい GA4 プロパティを読み込むこともできます。

GA4 設定アシスタントの手順に沿って、新しい GA4 プロパティを作成して設定してください。接続済みのサイトタグ機能を使用するには、[既存のタグを使用してデータ収集を有効にします] オプションを必ずオンにします。

オプション 2: gtag.js スニペットを更新する

  1. 新しい GA4 プロパティを作成します。
    • GA4 設定アシスタントを使用して、GA4 プロパティを追加しますが、設定時に表示されるプロンプトで [既存のタグを使用してデータ収集を有効にします] オプションはオフにします。別の方法として、GA4 設定アシスタントを使用せずに GA4 プロパティを作成することもできます。設定アシスタントを使用すれば、一部の基本設定が UA のプロパティからコピーされるメリットがあります。
  2. GA4 プロパティのタグ ID を見つけます。
  3. タグ ID が指定された config コマンドを使用して、既存の gtag.js スニペットに GA4 プロパティを追加します。

以下は、UA と GA4 のプロパティを設定した gtag.js スニペットの例です。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXX-Y');         // Universal Analytics property.
  gtag('config', 'TAG_ID');  // Google Analytics 4 property.
</script>

4. （省略可）追加の e コマース イベントを測定する

追加の GA4 e コマース イベントを実装すると、GA4 e コマース レポートを最大限に活用できるようになります。詳しくは、GA4 e コマースをご覧ください。

デフォルトの gtag.js スニペット設定を使用すると、GA4 イベントが UA と GA4 の両方のプロパティに送信されます。UA プロパティに送信される GA4 イベントは、イベント互換性リファレンスで定義されているように変換されます。別の動作をご希望の場合は、gtag.js のデータのグループ化とルーティング機能を使用して、UA および GA4 プロパティに送信するイベントを制御できます。たとえば、purchase イベントは UA と GA4 のどちらのプロパティにも送信し、他の GA4 e コマース イベントは GA4 のプロパティにのみ送信できます。