サンプルコード：G4A と Sentry を組み合わせてイベントを送信する

G4A Sentry Error TypeError Nc(gtag/js) Failed to fetch: 詳細解説

このエラーは、Google Analytics 4 (GA4) と Sentry を組み合わせて使用する場合に発生する可能性のある問題を示します。具体的には、gtag.js ライブラリが Sentry にイベントを送信しようとした際に、エラーが発生します。

エラーメッセージ

TypeError: Nc(gtag/js) is not a function

原因

このエラーにはいくつかの考えられる原因があります。

• gtag.js ライブラリのバージョン: 古いバージョンの gtag.js ライブラリを使用している場合、このエラーが発生する可能性があります。最新バージョンに更新してください。
• Sentry の設定: Sentry が正しく構成されていない場合、このエラーが発生する可能性があります。 Sentry ドキュメントで設定方法を確認してください。
• ブラウザの拡張機能: 特定のブラウザ拡張機能が gtag.js または Sentry の動作に干渉している可能性があります。問題が発生している場合は、拡張機能を無効にしてみてください。
• サードパーティのライブラリ: gtag.js または Sentry と互換性のないサードパーティのライブラリを使用している場合、このエラーが発生する可能性があります。

解決策

以下の手順で問題を解決できる可能性があります。

1. ブラウザの拡張機能を無効にする: 問題が発生している場合は、ブラウザの拡張機能をすべて無効にしてみてください。拡張機能が原因で問題が発生している場合は、問題を引き起こしている拡張機能を特定してアンインストールする必要があります。
2. サードパーティのライブラリを確認する: gtag.js または Sentry と互換性のないサードパーティのライブラリを使用している場合は、それらのライブラリを更新するか、別のライブラリに置き換える必要があります。

それでも問題が解決しない場合は

上記の手順で問題が解決しない場合は、Sentry コミュニティフォーラム () で助けを求めるか、Sentry サポートチームに問い合わせてください。

この問題は、2024 年 6 月頃から Chrome/Edge 125 または 126 ユーザーで報告されています。Sentry チームは問題を調査中ですが、現時点では再現できていません。

import * as Sentry from '@sentry/browser';
import gtag from 'gtag.js';

Sentry.init({
  dsn: 'YOUR_SENTRY_DSN',
  beforeSend: (event, scope) => {
    if (event.type === 'transaction') {
      // トランザクションイベントに GA4 データを追加
      const transaction = event.data.transaction;
      transaction.ga4_transaction_id = 'YOUR_GA4_TRANSACTION_ID';
      transaction.ga4_products = [
        {
          id: 'PRODUCT_ID_1',
          name: 'PRODUCT_NAME_1',
          price: 10.00,
          quantity: 1
        },
        {
          id: 'PRODUCT_ID_2',
          name: 'PRODUCT_NAME_2',
          price: 20.00,
          quantity: 2
        }
      ];
    }
    return event;
  }
});

gtag('event', 'Purchase', {
  transaction_id: 'YOUR_TRANSACTION_ID',
  transaction_total: 30.00,
  currency: 'USD',
  items: [
    {
      id: 'PRODUCT_ID_1',
      name: 'PRODUCT_NAME_1',
      price: 10.00,
      quantity: 1
    },
    {
      id: 'PRODUCT_ID_2',
      name: 'PRODUCT_NAME_2',
      price: 20.00,
      quantity: 2
    }
  ]
});

説明

このコードは次のことを行います。

1. Sentry を初期化します。
2. beforeSend コールバック関数を設定します。この関数は、イベントが Sentry に送信される前に呼び出されます。
3. トランザクションイベントの場合、ga4_transaction_id と ga4_products プロパティをイベントデータに追加します。これらのプロパティは、GA4 でトランザクションを追跡するために使用されます。
4. gtag 関数を使用して、GA4 に Purchase イベントを送信します。

注意事項

• このコードはあくまで例であり、ニーズに合わせて変更する必要があります。

• gtag.js と Sentry のバージョンを互換性の高いバージョンに固定する: 特定のバージョンの gtag.js と Sentry が互換性があることがわかっている場合は、それらのバージョンを固定してみてください。
• Service Worker を使用する: Service Worker を使用して、gtag.js と Sentry の通信を制御できます。これにより、エラーが発生する可能性を減らすことができます。
• JavaScript コードを修正する: 問題を引き起こしていると思われる JavaScript コードを特定し、修正してみてください。