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