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
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);
const event = (action, prevState, nextState) => {return {event: /* fill me in */,/* add any additional key/value pairs below */,};};
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 definitionconst 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 dataLayerconst dataLayerEvent = {hitType: 'pageview',event: 'pageview', // this is done automaticallypage: '/home',};
This gives you the option to use the event definitions exposed by the Google Analytics target