GA4 e コマース(gtag.js): ユニバーサル アナリティクスと Google アナリティクス 4 のイベントを送信する

このガイドでは、gtag.js ユニバーサル アナリティクス(UA)Google アナリティクス 4(GA4)e コマースの実装を別々に管理する方法について説明します。

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

結果

このガイドに従うと、既存の UA e コマースの実装を変更せずに、新しい GA4 プロパティの GA4 e コマース イベントが実装されることになります。この場合、UA プロパティと GA4 プロパティの両方に、個別の e コマース イベントが送信されます。

なお、UA と GA4 の両方に e コマースを実装した場合、GA4 プロパティでは GA4 の e コマースの実装が使用されます。

始める前に

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

    • UA プロパティを使用していること
    • サイトで gtag.js ライブラリを使用して e コマース イベントを送信していること
  2. 各オプションのトレードオフについては、e コマース実装のアップグレード オプションをご覧ください。このガイドの手順に従うと、アナリティクスが 2 つ(UA プロパティと GA4 プロパティに 1 つずつ)実装されることになります。そのような結果を本当に望んでいるかどうかをご確認ください。

トレードオフと考慮事項

以下の情報をご確認のうえ、e コマースが 2 つ(UA プロパティと GA4 プロパティに 1 つずつ)実装される場合の影響について十分に理解するようにしてください。

長所 デメリット
  • GA4 と UA のレポートの両方で e コマースデータを確認できます。
  • UA プロパティでの e コマースデータの収集方法とレポート方法に変更はありません。
  • GA4 のイベントとパラメータを使用することで、GA4 の e コマース レポートを確実に完成させることができます。
  • GA4 e コマース イベントを実装する必要があります。
  • UA 用と GA4 用の 2 つのイベントセットが送信されるため、パフォーマンスに影響する可能性があります。

実装

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

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

  1. 新しい GA4 プロパティを作成します。
    • GA4 設定アシスタントを使って新しい GA4 プロパティを自動的に作成し、UA プロパティからプロパティ名、ウェブサイト URL、タイムゾーン、通貨設定をコピーします。ただし、[既存のタグを使用してデータ収集を有効にします] オプションはオフにして、接続済みのサイトタグ機能を無効にします。UA プロパティから設定をコピーしない場合は、GA4 設定アシスタントを使用せずに GA4 プロパティを作成します。
  2. GA4 プロパティのタグ ID を見つけます。この ID は、次のステップで GA4 のプロパティを設定する際に使用します。
  3. GA4 プロパティを追加します。
    • UA イベントは UA プロパティにのみ送信し、GA4 イベントは GA4 プロパティにのみ送信するようにするには、gtag.js によって提供されるデータのルーティング機能を使用します。
    • 既存の gtag.js スニペットに GA4 プロパティを追加します。タグ ID を設定した config コマンドと groups パラメータを使って、UA プロパティとは別に GA4 プロパティにイベントをルーティングできるようにします。

以下は、GA4GA4 グループに割り当てられている 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', { 'groups': 'GA4' });  // Google Analytics 4 property
</script>

2. GA4 e コマース イベントを実装し、GA4 プロパティにルーティングする

新しい GA4 プロパティを作成して設定したら、GA4 e コマース イベントを実装できるようになります。GA4 の実装が UA の実装に同等になるようにするには、次のリソースをご利用ください。

次のサンプルでは、GA4 イベントの send_to パラメータを使って、UA と GA4 のそれぞれの e コマース purchase イベントが該当のプロパティに送信されます。

// Universal Analytics.
// The original UA implementation remains unchanged.
gtag('event', 'purchase', {
  "transaction_id": "24.031608523954162",
  "affiliation": "Google online store",
  "currency": "USD",
  "shipping": 7.50,
  "tax": 1.80,
  "value": 33.30,
  "items": [
    {
      "id": "P12345",
      "name": "Android Warhol T-Shirt",
      "brand": "Google",
      "category": "Apparel/T-Shirts",
      "variant": "Black",
      "list_name": "Search Results",
      "list_position": 1,
      "quantity": 2,
      "price": 12.00
    }
  ]
});


// The new Google Analytics 4 ecommerce implementation.
// Uses `send_to` to route data to the GA4 group defined in the tag config.
gtag('event', 'purchase', {
  "send_to": "GA4",
  "transaction_id": "24.031608523954162",
  "affiliation": "Google online store",
  "currency": "USD",
  "shipping": 7.50,
  "tax": 1.80,
  "value": 33.30,
  "items": [
    {
      "item_id": "P12345",
      "item_name": "Android Warhol T-Shirt",
      "item_brand": "Google",
      "item_category": "Apparel/T-Shirts",
      "item_variant": "Black",
      "quantity": 2,
      "price": 12.00
    }
  ],
});