React Native: GoogleTagManager

Search…
​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:
1
npm install --save @redux-beacon/react-native-google-tag-manager
Copied!
Usage
1
   import { Platform } from 'react-native';
2
   import { GoogleTagManager as GTMBridge } from 'react-native-google-analytics-bridge';
3
   import GoogleTagManager from '@redux-beacon/react-native-google-tag-manager';
4
​
5
   // Create or import an events map.
6
   // See "getting started" pages for instructions.
7
​
8
   const containerId = (Platform.OS === 'ios') ? 'GTM-IOSXXXX' : 'GTM-ANDROID';
9
​
10
   const gtm = GoogleTagManager(containerId, GTMBridge);
11
   const gtmMiddleware = createMiddleware(eventsMap, gtm);
Copied!
Event Definitions
1
const event = (action, prevState, nextState) => {
2
  return {
3
    event: /* fill me in */,
4
    /* add any additional key/value pairs below */,
5
  };
6
};
Copied!
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:
1
// Given the following event definition
2
const pageview = action => ({
3
  hitType: 'pageview',
4
  page: action.payload,
5
});
6
​
7
// Say the action is equal to
8
// { type: LOCATION_CHANGE, payload: '/home' }
9
// The following object will get pushed to the dataLayer
10
const dataLayerEvent = {
11
  hitType: 'pageview',
12
  event: 'pageview', // this is done automatically
13
  page: '/home',
14
};
Copied!
This gives you the option to use the event definitions exposed by the Google Analytics target​
React Native: GoogleAnalytics
React Native: Segment
Last modified 3yr ago
Copy link
Contents