google-analytics

Adding Analytics to React App

To the component to track:

import { Experiment, Variant, emitter } from '@marvelapp/react-ab-test';
import ReactGA from 'react-ga';

class Header extends React.Component {
  // Will register an event with the variantName in Events in Google Analytics
  sendEvent = (variantName: string) => {
    console.log('variant:', variantName)
    ReactGA.event({
      category: variantName,
      action: 'Clicked',
    });
  };

  render() {
    return (
      <Experiment ref="experiment" name="My Example">
        <Variant name="A">
          <div>
            <img src={`${process.env.REACT_APP_PUBLIC_ASSETS_URL}/images/minside_logo-desktop.svg`}
            className="header-logo"
            onClick={() => this.sendEvent("A")}
            />
          </div>            
        </Variant>
        <Variant name="B">
          <div>
            <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
            className="header-logo"
            onClick={() => this.sendEvent("B")}
            />
          </div>   
        </Variant>
      </Experiment>
    )
  }
};

To the main website

Other tips

  • Has to be Class React.Component, and not a functional component

  • FireFox by default disables trackers. To confirm, you'll see this in the console log:

    • Disable tracker blocking by clicking the shield/lock button on the left side of the address bar and then clicking "disable blocking for this site"

Previousmisc. frontendNextnodejs

Last updated