reactjs - 如何将振幅分析与 React 应用程序集成？

Question

振幅分析确实提供 Javascript SDK for Amplitude但是如何在无法直接访问 DOM 的 React 应用程序中实现分析呢？

GitHub 页面建议使用 amplitude.getInstance().logEvent('EVENT_IDENTIFIER_HERE') 但在 React 中我没有组件或事件的唯一标识符。

Answer 1

这就是我所做的并且效果很好:

yarn 添加振幅-js

实用程序/amplitude.js

import amplitude from 'amplitude-js';

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
  };
}

希望对你有帮助!