redux-beacon

Redux Beacon

Analytics integration for Redux and ngrx/store

Docs

- Migration Guide (from v1 to v2)
- Getting Started (Redux users)
- Getting Started (ngrx users)

Introduction

If you're using Redux or ngrx/store to manage your app's state, you can use
Redux Beacon to tap into your dispatched actions and map them to events that are
consumable by an analytics service (e.g. Google Analytics). With Redux Beacon
your entire global state life-cycle becomes trackable.

- Redux Beacon is lightweight. The core Redux Beacon module is tiny (~ 1KB), and each target, extension, and
util, is either around the same size or smaller.

- You can use Redux Beacon with any framework. Redux Beacon doesn't depend on any
framework, you can use Redux Beacon with React, Angular, React Native, Vue or
just plain JavaScript.

- You can send analytics anywhere. We have prebuilt targets for the most
popular analytics services, you can also build your own custom targets if you
need to.

- You can track analytics offline. Redux Beacon provides
extensions for tracking analytics during intermittent outages in
connectivity. These extensions save 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.

Packages

| | Version | Package |
|--------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------|
| |  | redux-beacon |
| !Google |  | @redux-beacon/google-analytics |
| !Google |  | @redux-beacon/google-analytics-gtag |
| !Google |  | @redux-beacon/google-tag-manager |
| !Google |  | @redux-beacon/react-native-google-analytics |
| !Google |  | @redux-beacon/react-native-google-tag-manager |
| !Amplitude |  | @redux-beacon/amplitude |
| !Segment |  | @redux-beacon/segment |
| 🔌 |  | @redux-beacon/logger |
| 🔧 |  | @redux-beacon/combine-events |
| 🔧 |  | @redux-beacon/ensure |
| 🔧 |  | @redux-beacon/debounce-event |
| 🔌 |  | @redux-beacon/offline-web |
| 🔌 |  | @redux-beacon/offline-react-native |

Usage

- Step 1. Pick out a target _(see above)_

- Step 2. Pick out some events you want to track from your target's Event Definitions section

- Step 3. Match the events to action types _(see below)_

$3

_Track a page view on each ROUTE_CHANGED action_
``js
const eventsMap = {
'ROUTE_CHANGED': trackPageView(action => ({
page: action.payload.routerState.url,
})),
}
`

_Track an event on each VIDEO_SELECTED action, use the state before the action
and the state after the action to hydrate the analytics event_
`js
const eventsMap = {
'VIDEO_SELECTED': trackEvent((action, prevState, nextState) => ({
category: 'Videos',
action: action.type,
label: prevState.videos.currentCampaign,
value: nextState.videos.numVideosSelected,
}))
}
`

_Track an event on _every_ action using the special '*' key_
`js
const eventsMap = {
'*': trackEvent(action => ({
category: 'redux',
action: action.type,
})),
}
`

_Track multiple events on each VIDEO_PLAYED action using the combineEvents util_

`js
const eventsMap = {
'VIDEO_PLAYED': combineEvents(
trackTiming(action => ({
category: 'Videos',
action: 'load',
value: action.payload.loadTime,
}))
trackEvent(() => ({
category: 'Videos',
action: 'play'
})),
),
}
`

_Track an event on each 'VIDEO_SEARCHED' action, but throttle it with the debounceEvent util so it doesn't fire as often_

`js
const eventsMap = {
'VIDEO_SEARCHED': debounceEvent(300,
trackEvent(action => ({
category: 'Videos',
action: 'search',
label: action.payload.searchTerm,
}))
),
}
`

The trackPageView, trackEvent, and trackTiming functions used above are
called eventDefinitions and are what you use to create events that are
consumable by an analytics service (a.k.a "target"). Each target will have its
own set of eventDefinitions that you can use and customize.

Don't like the idea of using an object to map actions?

_You can use a function..._
`js
const pageView = trackPageView(action => ({
page: action.payload.routerState.url,
}));

const videoLoadTime = trackTiming(action => ({
category: 'Videos',
action: 'load',
value: action.payload.loadTime,
}));

const videoPlayed = trackEvent(() => ({
category: 'Videos',
action: 'play'
}));

const eventsMapper = (action) => {
switch(action.type) {
case 'ROUTE_CHANGED':
return pageView;
case 'VIDEO_PLAYED':
return [videoLoadTime, videoPlayed]
default:
return [];
}
}
``

More Examples & Recipes

- How to Track Pageviews in a React-Redux app
- How to Track Pageviews in an Angular-ngrx app
- How to Track Analytics Offline (Web)
- How to Track Analytics Offline (React Native)