redux-beacon

Analytics integration for Redux and ngrx/store

Features

• Integrate with any analytics service, including:
  • Google Analytics
  • Google Tag Manager
  • Segment.io
• Track analytics offline
• Decouple analytics logic from app logic

Installation

npm install --save redux-beacon

Demo

Quick Start

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

How it works

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

Offline Event Collection

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.

Built-In Targets

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

Docs

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