rangle/redux-beacon


Analytics integration for Redux and ngrx/store

https://rangle.gitbook.io/redux-beacon/

License: MIT

Language: TypeScript

Keywords: analytics, angular, google-analytics, ngrx, react, react-native, redux, redux-beacon


Redux Beacon

Redux Beacon

Analytics integration for Redux and ngrx/store

Docs

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
Google npm @redux-beacon/google-analytics
Google npm @redux-beacon/google-analytics-gtag
Google npm @redux-beacon/google-tag-manager
Google npm @redux-beacon/react-native-google-analytics
Google npm @redux-beacon/react-native-google-tag-manager
Amplitude npm @redux-beacon/amplitude
Segment npm @redux-beacon/segment
Segment npm @redux-beacon/react-native-segment

Third-Party Targets

Version Package
Matomo npm redux-beacon-matomo-tag-manager
Appsflyer npm redux-beacon-react-native-appsflyer

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!

Integrations

Integration Integrates with Description
redux-dynamic-modules-beacon redux-dynamic-modules Redux Dynamic Modules is a library that allows to modularize redux code. With help of this extension events do not have to be defined in one central location but can be defined for each module individually.

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
🔌 npm @redux-beacon/logger
🔧 npm @redux-beacon/combine-events
🔧 npm @redux-beacon/ensure
🔧 npm @redux-beacon/debounce-event
🔌 npm @redux-beacon/offline-web
🔌 npm @redux-beacon/offline-react-native

Project Statistics

Sourcerank 12
Repository Size 1.4 MB
Stars 572
Forks 65
Watchers 14
Open issues 12
Dependencies 668
Contributors 32
Tags 39
Created
Last updated
Last pushed

Top Contributors See all

Thomas Marek Johanna Lee Dan Williams bertrandk Aaron Holderman Raven Avalon Pavlos Vinieratos Karl Merkli Felipe brnkes Karolis Grinkevičius kokokenada Emily Xiong Philipp Triebel Bryan Swords Abtin Ghods German Prostakov Alexander Glinskiy Matías Fornés Daniel Hurley

Packages Referencing this Repo

@redux-beacon/react-native-google-analytics
Google Analytics integration for Redux
Latest release 1.0.0-rc.3 - Updated - 572 stars
@redux-beacon/react-native-segment
Segment.io integration for Redux with React Native
Latest release 0.1.0 - Published - 572 stars
redux-beacon
Analytics integration for Redux and ngrx/store
Latest release 2.1.0 - Updated - 572 stars
@redux-beacon/google-analytics-gtag
Google Analytics (gtag.js) integration for Redux
Latest release 1.0.2 - Updated - 572 stars
@redux-beacon/google-tag-manager
Google Tag Manager integration for Redux
Latest release 1.0.0-rc.4 - Updated - 572 stars
@redux-beacon/offline-web
Offline analytics extension for Redux Beacon
Latest release 1.0.0 - Updated - 572 stars
@redux-beacon/offline-react-native
Offline analytics extension for React Native and Redux Beacon
Latest release 1.0.0-rc.4 - Updated - 572 stars
@redux-beacon/amplitude
Amplitude integration for Redux
Latest release 1.0.0-rc.2 - Updated - 572 stars
@redux-beacon/react-native-google-tag-manager
Google Tag Manager integration for Redux
Latest release 1.0.0-rc.3 - Updated - 572 stars
@redux-beacon/segment
Segment.io integration for Redux
Latest release 1.0.1 - Updated - 572 stars
@redux-beacon/combine-events
Redux Beacon extension for combining event definitions
Latest release 1.0.0-rc.2 - Updated - 572 stars
@redux-beacon/debounce-event
Redux Beacon extension for debouncing events
Latest release 1.0.0-rc.3 - Updated - 572 stars
@redux-beacon/ensure
Redux Beacon extension for validating events
Latest release 1.0.0-rc.3 - Updated - 572 stars
@redux-beacon/google-analytics
Google Analytics integration for Redux
Latest release 1.2.3 - Updated - 572 stars
@davidfurlong/redux-beacon
Analytics integration for Redux and ngrx/store
Latest release 1.3.0 - Updated - 572 stars
@masonite/google-analytics
Google Analytics integration for Redux
Latest release 1.0.4 - Published - 572 stars
@masonite/redux-beacon-google-analytics
Google Analytics integration for Redux
Latest release 1.0.4 - Published - 572 stars
@redux-beacon/logger
Logger extension for Redux Beacon
Latest release 1.0.0 - Updated - 572 stars
@davidfurlong/redux-beacon-google-tag-manager
Google Tag Manager integration for Redux
Latest release 1.0.0 - Published - 572 stars

Recent Tags See all

google-analytics@v1.2.3 August 07, 2019
react-native-segment@v1.0.0 July 27, 2019
google-analytics@v1.2.2 June 11, 2019
google-analytics@v1.2.1 March 18, 2019
google-analytics-gtag@v1.0.5 March 16, 2019
redux-beacon@v2.1.0 March 11, 2019
segment@v1.1.0 January 11, 2019
google-analytics-gtag@v1.0.4 January 10, 2019
google-analytics@v1.2.0 January 10, 2019
segment@v1.0.2 January 09, 2019
google-analytics-gtag@v1.0.3 January 09, 2019
v2.0.5 January 07, 2019
google-analytics@1.1.1 October 28, 2018
google-analytics@1.1.0 October 03, 2018
google-analytics@1.0.4 September 03, 2018

Something wrong with this page? Make a suggestion

Last synced: 2019-08-07 03:37:29 UTC

Login to resync this repository