rina-spinne / redux-beacon Goto Github PK

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

• I'm using Redux.
• I'm using ngrx/store.

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.

• Google Analytics
• Google Tag Manager
• Segment.io
• Amplitude
• (React Native) Google Analytics
• (React Native) Google Tag Manager
• (Cordova) Google Analytics

Check out the project site for API docs, tutorials, examples and more.