Redux Beacon
Github
Search…
Introduction
Getting Started (Redux)
Getting Started (ngrx)
Examples & Recipes
Targets
API Reference
Extensions
Utils
FAQ
Migration Guide (v1 to v2)
Notes on Offline Events
Powered By GitBook
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 Diagram
  • 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.

Supported Targets

​
Version
Package
​
​
​​
​​
​
​
​​
​​
​
​
​​
​​
​
​
​​
​​
​
​
​​
​​
​
​
​​
​​
​@redux-beacon/amplitude​
​
​
​​
​​
​@redux-beacon/segment​
​
​
​​
​​

Third-Party Targets

​
Version
Package
​
​
​​
​​
​
​
​​
​​

Other Targets

If you don't see your analytics target listed it might be worth a shot doing a quick search on npmjs.org. If all else fails you can always build and provide your own custom Targets!

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)

Examples

Track a page view on each ROUTE_CHANGED action
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
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_
const eventsMap = {
'*': trackEvent(action => ({
category: 'redux',
action: action.type,
})),
}
Track multiple events on each VIDEO_PLAYED action using the combineEvents util
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
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...
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

Extensions & Plugins

​
Version
Package
🔌
​​
​​
​@redux-beacon/logger​
🔧
​​
​​
🔧
​​
​​
​@redux-beacon/ensure​
🔧
​​
​​
🔌
​​
​​
🔌
​​
​​
Next
Getting Started (Redux)
Last modified 3yr ago
Copy link
Outline
Supported Targets
Third-Party Targets
Other Targets
Usage
Examples
More Examples & Recipes
Extensions & Plugins