Redux Beacon
  • Introduction
  • Getting Started (Redux)
  • Getting Started (ngrx)
  • Examples & Recipes
  • Targets
    • GoogleAnalytics
    • GoogleAnalyticsGtag
    • GoogleTagManager
    • Segment
    • Amplitude
    • React Native: GoogleAnalytics
    • React Native: GoogleTagManager
    • React Native: Segment
  • API Reference
    • createMiddleware
    • createMetaReducer
    • EventDefinition
    • EventsMap
    • EventsMapper
  • Extensions
    • logger
    • OfflineWeb
    • OfflineReactNative
  • Utils
    • debounceEvent
    • ensure
    • combineEvents
  • FAQ
  • Migration Guide (v1 to v2)
  • Notes on Offline Events
Powered by GitBook
On this page
  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Next Steps
  • Track More Events:
  • Decide Where to put Analytics Logic:
  • Check Out the Recipes:
  • Check Out the Extensions:

Getting Started (ngrx)

PreviousGetting Started (Redux)NextExamples & Recipes

Last updated 5 years ago

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 createMetaReducer function.

Step 1

Choose a target, and follow the setup instructions.

  • React Native:

Don't see the target you need? Follow the instructions to build your own.

Step 2

Decide what you want to track and pick out the corresponding event definition:

  • React Native:

Step 3

Complete the event definition by filling in the object properties, and match it to an action.

For example, say you want to intercept a PLAY_VIDEO action and track it as a Google Analytics event:

import { createMetaReducer, EventsMap } 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: EventsMap = {
  'PLAY_VIDEO': emitVideoPlayed,
};

// Create the meta reducer
const ga = GoogleAnalytics();
const gaMetaReducer = createMetaReducer(eventsMap, ga, { logger });
  • React Native:

Step 4

Next Steps

Track More Events:

Decide Where to put Analytics Logic:

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.

Check Out the Recipes:

Check Out the Extensions:

Follow the instructions to apply the meta reducer to your store.

Repeat steps and for every event you want to track. In a nutshell: 1. Find the event definition for the thing you want to track. 2. Match the event definition to a Redux action then complete the event definition.

We have a number of recipes to get you started with Redux Beacon. Check them out .

We have extensions for logging and for buffering analytics events offline. Check them out .

GoogleTagManager: Event Definitions
GoogleTagManager: Usage
here
here
here
2
3
GoogleTagManager: Setup
GoogleAnalytics: Event Definitions
GoogleAnalytics: Usage
GoogleAnalytics: Setup
Segment: Event Definitions
Segment: Usage
Segment: Setup
GoogleTagManager: Event Definitions
GoogleTagManager: Usage
GoogleTagManager: Setup
Amplitude: Event Definitions
Amplitude: Usage
GoogleAnalytics: Event Definitions
GoogleAnalytics: Usage
Amplitude: Setup
GoogleAnalytics: Setup
Segment: Event Definitions
Segment: Usage
Segment: Setup
here
GoogleAnalyticsGtag: Setup
GoogleAnalyticsGtag: Event Definitions
GoogleAnalyticsGtag: Usage