Question

Amplitude Analytics确实提供了Javascript SDK for Amplitude但是如何在React App中实现分析，我无法直接访问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最近发布了一个名为“ react-amplitude”的实验库，专门用于将Amplitude集成到React Web应用程序中。它提供了一些React组件，用于声明性地记录事件以及设置事件和用户属性。有关更多信息，请参见announcement blog post和the GitHub repo。

Answer 4

我建议使用细分分析库并遵循我们的React quickstart guide。您可以使用react-router跟踪页面访问，并在React组件中跟踪用户行为。您将可以通过我们的信息中心打开“幅度”，并可以访问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的维护者。如果您有兴趣尝试使用多种分析工具而不必编写任何其他代码，则可以使用“细分”来一键切换开/关不同的目的地。

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

4 个答案: