Настроить работу трекера в приложении React довольно просто.

Если вы создаёте SPA (Single Page Application), всё, что вам нужно сделать, — это добавить следующий код в точку входа вашего приложения:

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 и задайте вопросы напрямую нашим разработчикам!