Repository files navigation

Analytics integration for Redux and ngrx/store

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

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

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

• You can use Redux Beacon with any framework. Redux Beacon doesn't depend on anyframework, you can use Redux Beacon with React, Angular, React Native, Vue orjust plain JavaScript.

• You can send analytics anywhere. We have prebuilt targets for the mostpopular analytics services, you can also build your own custom targets if youneed to.

• You can track analytics offline. Redux Beacon providesextensions for tracking analytics during intermittent outages inconnectivity. These extensions save events in a persistent store when offline(e.g indexedDB). When back online, the extensions purge the store and passthe events off to a target. Read more about offline event collection in thedocs.

	Version	Package
		@redux-beacon/google-analytics
		@redux-beacon/google-analytics-gtag
		@redux-beacon/google-tag-manager
		@redux-beacon/react-native-google-analytics
		@redux-beacon/react-native-google-tag-manager
		@redux-beacon/amplitude
		@redux-beacon/segment
		@redux-beacon/react-native-segment

	Version	Package
		redux-beacon-matomo-tag-manager
		redux-beacon-react-native-appsflyer

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 alwaysbuild and provide your own custom Targets!

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

Track a page view on eachROUTE_CHANGED action

consteventsMap={'ROUTE_CHANGED':trackPageView(action=>({page:action.payload.routerState.url,})),}

Track an event on eachVIDEO_SELECTED action, use the state before the actionand the state after the action to hydrate the analytics event

consteventsMap={'VIDEO_SELECTED':trackEvent((action,prevState,nextState)=>({category:'Videos',action:action.type,label:prevState.videos.currentCampaign,value:nextState.videos.numVideosSelected,}))}

Track an event onevery action using the special '*' key

consteventsMap={'*':trackEvent(action=>({category:'redux',action:action.type,})),}

Track multiple events on eachVIDEO_PLAYED action using thecombineEvents util

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

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

ThetrackPageView,trackEvent, andtrackTiming functions used above arecalledeventDefinitions and are what you use to create events that areconsumable by an analytics service (a.k.a "target"). Each target will have itsown set ofeventDefinitions that you can use and customize.

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

You can use a function...

constpageView=trackPageView(action=>({page:action.payload.routerState.url,}));constvideoLoadTime=trackTiming(action=>({category:'Videos',action:'load',value:action.payload.loadTime,}));constvideoPlayed=trackEvent(()=>({category:'Videos',action:'play'}));consteventsMapper=(action)=>{switch(action.type){case'ROUTE_CHANGED':returnpageView;case'VIDEO_PLAYED':return[videoLoadTime,videoPlayed]default:return[];}}

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

	Version	Package
🔌		@redux-beacon/logger
🔧		@redux-beacon/combine-events
🔧		@redux-beacon/ensure
🔧		@redux-beacon/debounce-event
🔌		@redux-beacon/offline-web
🔌		@redux-beacon/offline-react-native