How do integrate amplitude analytics with a React app?

Question

Amplitude Analytics does provide Javascript SDK for Amplitude but how do I implement analytics in a React App where I don't have access to the DOM directly?

The GitHub page suggests to use amplitude.getInstance().logEvent('EVENT_IDENTIFIER_HERE') but in React I don't have an unique identifier of a component or a event.

Answer 1

This is what I did and works perfectly:

yarn add amplitude-js

utilities/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')
);

And then you're good to go. Call the other methods when you need it, like setAmplitudeUserDevice:

import { setAmplitudeUserDevice } from 'utilities/amplitude';

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

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

Hope it helps!

Answer 2

The 'EVENT_IDENTIFIER_HERE' is actually just any arbitrary but unique name(label) for the event that you want to log. So when you check the amplitude dashboard you are able to find events easily.

i.e amplitude.getInstance().logEvent('visitedHomePage') or amplitude.getInstance().logEvent('cartButtonClicked') etc.

furthermore you can pass extra eventData along with the event like so:

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

Answer 3

Amplitude recently released an experimental library called "react-amplitude" specifically for integrating Amplitude into React web apps. It provides a few React components for declaratively logging events and setting event and user properties. See the announcement blog post and the GitHub repo for more info.

Answer 4

For those who are using @amplitude/analytics-browser with NextJS, the getInstance() is not used:

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

Then in _app.tsx initialize Amplitude like this:

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

Answer 5

I suggest using the Segment analytics library and following our React quickstart guide. You can track page visits with react-router and user behavior all within React components. You’ll be able to turn on Amplitude via our dashboard, and have access to 250+ other destinations. Here is an example of using a React event handler:

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

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

I’m the maintainer of https://github.com/segmentio/analytics-react. With Segment, you’ll be able to switch different destinations on-and-off by the flip of a switch if you are interested in trying multiple analytics tools without having to write any additional code.