React アプリケーションでトラッカーを動作させるのは非常に簡単です。

SPA（シングルページアプリケーション）を構築している場合は、エントリーポイントに次のコードを追加するだけです。

import { tracker } from '@openreplay/tracker';

tracker.configure({
  projectKey: "<your project key>", 
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

function YourMainComponent({props}) {
    //some code here...

    useEffect(() => {
        tracker.start();
    }, [])

    return //....
}

または、Tracker クラスを直接使用して、インスタンスを手動で管理することもできます。

import Tracker from '@openreplay/tracker';

const tracker = new Tracker({
  projectKey: "<your project key>",  
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

function YourMainComponent({props}) {
    //some code here...

    useEffect(() => {
        tracker.start();
    }, [])

    return //....
}

つまり、スクリプトの先頭でトラッカーをインスタンス化し、ページの読み込み後に useEffect フックを使って開始できます。

セキュリティ上の理由から、projectKey をアプリケーションコードに直接ハードコーディングするのは避けてください。代わりに、設定ファイルや環境管理の仕組みに保存してください。

プロジェクトの構成に応じて、いくつかの方法があります。

• 環境変数: Create React App を使用している場合は、その環境変数の組み込みサポートを活用できます
• 設定ファイル: バージョン管理から除外した専用の設定ファイルを使用します
• 環境管理: dotenv などのツールを使うと、環境ごとに異なるキーを管理しやすくなります

以下に例を示します。

// Access the key from environment variables
const openReplayKey = process.env.REACT_APP_OPENREPLAY_KEY;

React で複雑なアプリケーションを構築している場合は、Next、Remix、または同様のフレームワークを使用している可能性が高いでしょう。お使いのフレームワークを見つけるには、トラッカーのセットアップセクションをご確認ください。

React プロジェクトでトラッカーをセットアップする際に問題が発生した場合は、Slack コミュニティまでお気軽にご連絡ください。開発者に直接質問できます。