Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

redux-ga-screen-tracker

1.4.0 • Public • Published

redux-ga-screen-tracker

Inspired by react-navigation guide

Redux middleware to track screens on google analytics in a react-native application using react-navigation
The middleware triggers track screen events on desired navigation actions with screen name which it gets from the route stack in the store.

Installation:

npm install redux-ga-screen-tracker --save

Usage:

redux-ga-screen-tracker expects the following parameters:

  • tracker: An instance of react-native-google-analytics-bridge
  • nav: Key for store object with navigation stack
  • navActionsToTrack: Array of actions for screen tracking
  • gaRouteMap (optional) : Config map of screen name to business name to be used in google analytics tracker
  • customDimensions (optional) : An object with custom dimensions
  • getCustomDimensions (optional) : Returns custom dimensions
//store.js
import screenTracking from 'redux-ga-screen-tracker';
import screenTrackingConfig from '../screenTrackingConfig.config';
import tracker from '../googleAnalytics.util'; //tracker from react-native-google-analytics-bridge
 
const middleware = compose(applyMiddleware(..., screenTracking(screenTrackingConfig));
 
const initStore = () => createStore(rootReducer, {}, middleware);
//screenTrackingConfig.config.js
export const screenTrackingConfig = {
  tracker,
  navStoreKey: 'nav',
  navActions: ['Navigation/NAVIGATE', 'Navigation/BACK', 'Navigation/RESET'],
  gaRouteMap,
  customDimensions
};
 
const gaRouteMap = {
  LaunchPage: 'Launch Screen',
  LoginPage: 'Login Screen'
}


Usage Dependency:

  1. Set up google analytics for your react native application:
//googleAnalytics.util.js
import {GoogleAnalyticsTracker, GoogleAnalyticsSettings} from 'react-native-google-analytics-bridge';
import env from '../constants/env.config';
 
GoogleAnalyticsSettings.setDispatchInterval(env.GA_TRACKER_INTERVAL);
const tracker = new GoogleAnalyticsTracker(env.GA_TRACKER_ID);
export default tracker;
  1. Navigation state in store
//reducers: index.js
import Navigator from '../routes/index.routes'; //react-navigation
 
const nav = (state, action) => (
  Navigator.router.getStateForAction(action, state)
);
 
const appReducers = combineReducers({ ..., nav });

References:

install

npm i redux-ga-screen-tracker

Downloadsweekly downloads

23

version

1.4.0

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability