Add this repo as git submodule to your packages folder and run meteor add lef:analytics.
Update your settings file (or provide these manually):
{
"public" : {
"ga" : {
"trackingId": "UA-000000-01",
"options": {
"debug": true
},
"optIn": false
}
}
}| property | required | notes |
|---|---|---|
| trackingId | yes | format: UA-XXXXXX-XX |
| options | no | |
| optIn | no | Set to true if you want users to opt-in.You currently need to build the opt-in modal yourself.* |
In your client startup file:
import{gaInit}from'meteor/lef:analytics'// get trackingId and options from Meteor.settings or hardcodedconstgaSettings=Meteor.settings.public.ga||{trackingId: 'UA-XXXXXX-01'}Meteor.startup(()=>gaInit(gaSettings)In your top level component:
import{PageView}from'meteor/lef:analytics'constApp=()=>(<Routerhistory={history}><PageView><Switch><Routepath={'/contact'}exactcomponent={Contact}/><Routepath={'/'}exactcomponent={Home}/></Switch></PageView></Router>)The PageView component takes care of every change in your pathname. Hash changes and paramteres are currently not counted for.
In any component with interactivity:
import{gaEvent}from'meteor/lef:analytics'classChangeColorextendsReact.Component{changeColor(){constcolor=getRandomColor()this.setState({ color })gaEvent({category: 'Color',action: 'Change',label: color,// String// value: 1 // Number})}render(){return(<ButtononClick={this.changeColor}>Randomise color</Button>)}}If you want start/stop the tracking programmatically, you can execute the init function again, with optin set to the appropriate value.
// starts tracking for trackingId UA-XXXXXX-01gaInit({trackingId: 'UA-XXXXXX-01',optIn: false})// stops tracking for trackingId UA-XXXXXX-01gaInit({trackingId: 'UA-XXXXXX-01',optIn: true})