Getting Started (Redux)
In a nutshell: for each analytics event, pick out an event definition (listed in each target's docs) and map it to an action. The map should be an object with the action type as a key, and event definition as the value. Then, you simply provide your target and the events map to Redux Beacon's
createMiddleware function.Choose a target, and follow the setup instructions.
Decide what you want to track and pick out the corresponding event definition:
Complete the event definition by filling in the object properties, and match it to a Redux action.
For example, say you want to intercept a
PLAY_VIDEO Redux action and track it as a Google Analytics event:import { createMiddleware } from 'redux-beacon';
import GoogleAnalytics, { trackEvent } from '@redux-beacon/google-analytics';
import logger from '@redux-beacon/logger'; // optional
// Copy & paste the event definition you chose in step 2, then fill it in.
const emitVideoPlayed = trackEvent(action => ({
category: 'Videos',
action: action.type,
}));
// Match the event definition to a Redux action:
const eventsMap = {
'PLAY_VIDEO': emitVideoPlayed,
};
// Create the middleware
const ga = GoogleAnalytics();
const gaMiddleware = createMiddleware(eventsMap, ga, { logger });
As the number of events you track grows, it might make sense to move your event definitions and events map into their own files. Redux Beacon has no requirements on where these are kept. Have a discussion with your team on how you'd like to organize your app's analytics logic.
Last modified 3yr ago