React Native: GoogleTagManager
Setup
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.
Install the following npm package, GoogleAnalyticsBridge.
For each mobile platform (Android or iOS), you need to follow its corresponding manual installation for GoogleAnalyticsBridge usage.
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 ahitType
property, this target will create anevent
property and set it to thehitType
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', };
Last updated