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.
   }

 }

Import

import AnalyticsProvider from 'react-storefront/AnalyticsProvider'

Props

Name	Type	Default	Description
targets	func		Function which should return desired analytics targets to configure.