Как интегрировать амплитудную аналитику с приложением React?

Question

Amplitude Analytics предоставляет Javascript SDK для Amplitude, но как мне реализовать аналитику в приложении React, где у меня нет прямого доступа к DOM?

Страница GitHub предлагает использовать amplitude.getInstance().logEvent('EVENT_IDENTIFIER_HERE')но в React у меня нет уникального идентификатора компонента или события.

Answer 1

Это то, что я сделал и работает отлично:

yarn add amplitude-js

коммунальные / amplitude.js

import amplitude from 'amplitude-js/amplitude';

export const initAmplitude = () => {
  amplitude.getInstance().init(process.env.REACT_APP_AMPLITUDE);
};

export const setAmplitudeUserDevice = installationToken => {
  amplitude.getInstance().setDeviceId(installationToken);
};

export const setAmplitudeUserId = userId => {
  amplitude.getInstance().setUserId(userId);
};

export const setAmplitudeUserProperties = properties => {
  amplitude.getInstance().setUserProperties(properties);
};

export const sendAmplitudeData = (eventType, eventProperties) => {
  amplitude.getInstance().logEvent(eventType, eventProperties);
};

index.js

...

import { initAmplitude } from './utilities/amplitude';

initAmplitude();

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Provider store={store}>
      <Routes store={store} />
    </Provider>
  </ThemeProvider>,
  document.getElementById('root')
);

И тогда ты в порядке. Вызывайте другие методы, когда вам это нужно, например, setAmplitudeUserDevice:

import { setAmplitudeUserDevice } from 'utilities/amplitude';

export function installationInitializationSuccess(id, token) {
  setAmplitudeUserDevice(token);

  return {
    type: INSTALLATION_INITIALIZATION_SUCCESS,
    id,
    token
  };
}

Надеюсь, поможет!

Answer 2

'EVENT_IDENTIFIER_HERE' фактически любое произвольное, но уникальное имя (метка) для события, которое вы хотите записать. Поэтому, когда вы проверяете приборную панель амплитуды, вы можете легко находить события.

т.е. amplitude.getInstance().logEvent('visitedHomePage') или жеamplitude.getInstance().logEvent('cartButtonClicked') и т.п.

кроме того, вы можете передать дополнительные eventData вместе с событием, например, так:

amplitude.getInstance().logEvent('cartButtonClicked', itemsInCart)

Answer 3

Amplitude недавно выпустила экспериментальную библиотеку под названием "Reaction-ampitude" специально для интеграции Amplitude в веб-приложения React. Он предоставляет несколько компонентов React для декларативной регистрации событий и настройки событий и пользовательских свойств. См. Объявление в блоге и репозиторий GitHub для получения дополнительной информации.

Answer 4

Для тех, кто использует@amplitude/analytics-browserс NextJS,getInstance()не используется:

      import * as amplitude from "@amplitude/analytics-browser";

// Custom Amplitude config
const config = {};

export const initAmplitude = () => {
  amplitude.init(AMPLITUDE_PROJECT_ID, undefined, config);
};

export const trackAmplitudeData = (eventType: string | amplitude.Types.BaseEvent, eventProperties?: Record<string, unknown>) => {
  amplitude.track(eventType, eventProperties);
};

Затем в_app.tsxинициализируйте амплитуду следующим образом:

        useEffect(() => {
    if (router.isReady) {
      initAmplitude();
    }
  }, []);

Answer 5

Я предлагаю использовать аналитическую библиотеку сегментов и следовать нашему краткому руководству по React. Вы можете отслеживать посещения страниц с помощью реакции-маршрутизатора и поведения пользователя в компонентах React. Вы сможете включить Amplitude через нашу панель инструментов и иметь доступ к 250+ другим пунктам назначения. Вот пример использования обработчика событий React:

export default class SignupButton extends Component {
  trackEvent() {
    window.analytics.track('User Signup');
  }

  render() {
    return (
      <button onClick={this.trackEvent}>
        Signup with Segment today!
      </button>
    );
  }
}

Я поддерживаю https://github.com/segmentio/analytics-react. С помощью сегмента вы сможете включать и выключать разные пункты назначения одним щелчком переключателя, если вы заинтересованы в использовании нескольких аналитических инструментов без необходимости написания дополнительного кода.