Analytics integration for Redux and ngrx/store
- Integrate with any analytics service, including:
- Google Analytics
- Google Tag Manager
- Segment.io
- Track analytics offline
- Decouple analytics logic from app logic
npm install --save redux-beacon
Redux Beacon maps redux/ngrx actions to analytics events then sends them to a target (e.g. Google Analytics).
Analytics events are defined in an event definition, and mapped to actions in an event definitions map:
// This is an event definition
const pageView = (action, prevState) => ({
hitType: 'pageview',
page: action.payload,
referrer: prevState.route,
});
// This is another event definition
const buttonClick = action => ({
hitType: 'event',
eventCategory: 'button-click',
eventAction: action.type,
});
// This is how you map event definitions to redux/ngrx actions
const eventsMap = {
LOCATION_CHANGED: pageView,
BUTTON_CLICKED: buttonClick,
}With the set up above Redux Beacon will create pageView, and buttonClick
events whenever redux/ngrx dispatches LOCATION_CHANGED or BUTTON_CLICKED,
then it'll push the generated analytics events to a target (e.g. Google
Analytics).
Redux Beacon provides extensions to help handle intermittent outages in connectivity. These extensions place events in a persistent store when offline (e.g indexedDB). When back online, the extensions purge the store and pass the events off to a target. Read more about offline event collection in the docs.
Check out the project site for API docs, tutorials, examples and more.