import AnalyticsProvider from 'react-storefront/AnalyticsProvider'
Use this component to register your analytics targets.
import AnalyticsProvider from 'react-storefront/AnalyticsProvider' import GoogleAnalyticsTarget from 'react-storefront-extensions/GoogleAnalyticsTarget'
Example:
<AnalyticsProvider
targets={() => [
new GoogleAnalyticsTarget({
trackingID: 'ABC123'
})
])}
>
<App/>
</AnalyticsProvider>
Components that are decendents of AnalyticsProvider can use @inject('analytics')
to get access to
an object which can be used to broadcase analytics events to targets:
import React, { Component } from 'react'
import Button from '@material-ui/core/Button'
import { inject } from 'mobx-react'
@inject('analytics')
class MyComponent extends Component {
render() {
return (
<Button onClick={this.fireAnalyticsEvent}>Click Me</Button>
)
}
// This will call the someEvent() method on all configured analytics targets.
fireAnalyticsEvent = () => {
const eventData = { foo: 'bar' }
this.props.analytics.fire('someEvent', eventData) // analytics prop is provided by the @inject('analytics') decorator.
}
}
Name | Type | Default | Description |
---|---|---|---|
targets | func | Function which should return desired analytics targets to configure. | |
delayUntilInteractive | bool | Set to true to delay loading of analytics until the app is interactive |