Analytics React Components

This reference documentation contains a detailed API interface for you to use when developing a Front-Commerce application.

For a tangible example and explanation, please refer to Analytics advanced documentation.

withTrackOnMount

withTrackPage is an enhancer that lets you track an event by using React lifecycle.

import withTrackOnMount from "theme/modules/Analytics/withTrackOnMount";

withTrackOnMount({
  // event name
  event,
  // compute events props
  mapPropsToProperties: props => ({ ...properties })
  // is the component ready to be tracked?
  isResolvedFromProps: props => true || false,
  // should we listen the mount during the lifecycle?
  shouldMountEvent: props => true || false,
  // should we listen the update during the lifecycle?
  shouldUpdateEvent: (prevProps, nextProps) => true || false,
})(BaseComponent);

TrackOnMount

If you prefer, you can use the TrackOnMount component instead that works with render props.

import React, { Fragment } from "react";
import { TrackOnMount } from "theme/modules/Analytics/withTrackOnMount";

const Component = (props) => {
  return (
    <Fragment>
      <TrackOnMount
        shouldMountEvent={(props) => true || false}
        shouldUpdateEvent={(prevProps, nextProps) => true || false}
        event={event}
        properties={eventProperties}
        isResolvedFromProps={true || false}
      />
      {/* ... your actual component code here */}
    </Fragment>
  );
};

withTrackPage

withTrackPage is an enhancer that lets you track a page each time a component is rendered and when the location has changed

import withTrackPage from "theme/modules/Analytics/withTrackPage";

withTrackPage("My Page")(BaseComponent);

TrackPage

If you prefer, you can use the TrackPage component instead that works with render props.

import React, { Fragment } from "react";
import { TrackPage } from "theme/modules/Analytics/withTrackPage";

const Component = (props) => {
  return (
    <Fragment>
      <TrackPage title="My Page" />
      {/* ... your actual component code here */}
    </Fragment>
  );
};