Redux Beacon

Analytics integration for Redux and ngrx/store


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


npm install --save redux-beacon


Quick Start

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 = {
  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


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