React Native: GoogleTagManager

• Setup

• Usage

• Event Definitions

Setup

1. Sign up for Google Tag Manager and create a mobile container. Select Legacy for SDK Version, and be sure to make a note of your property's tracking Id.

2. Install the following npm package, GoogleAnalyticsBridge.

3. For each mobile platform (Android or iOS), you need to follow its corresponding manual installation for GoogleAnalyticsBridge usage.

4. Install the target:

   npm install --save @redux-beacon/react-native-google-tag-manager

Usage

   import { Platform } from 'react-native';
   import { GoogleTagManager as GTMBridge } from 'react-native-google-analytics-bridge';
   import GoogleTagManager from '@redux-beacon/react-native-google-tag-manager';

   // Create or import an events map.
   // See "getting started" pages for instructions.

   const containerId = (Platform.OS === 'ios') ? 'GTM-IOSXXXX' : 'GTM-ANDROID';

   const gtm = GoogleTagManager(containerId, GTMBridge);
   const gtmMiddleware = createMiddleware(eventsMap, gtm);

Event Definitions

const event = (action, prevState, nextState) => {
  return {
    event: /* fill me in */,
    /* add any additional key/value pairs below */,
  };
};

Notes

• If an event object doesn't have an event property, but has a hitType property, this target will create an event property and set it to the hitType string. For example:

  // Given the following event definition
  const pageview = action => ({
    hitType: 'pageview',
    page: action.payload,
  });
  
  // Say the action is equal to
  // { type: LOCATION_CHANGE, payload: '/home' }
  // The following object will get pushed to the dataLayer
  const dataLayerEvent = {
    hitType: 'pageview',
    event: 'pageview', // this is done automatically
    page: '/home',
  };

This gives you the option to use the event definitions exposed by the Google Analytics target