Redux Beacon
  • Introduction
  • Getting Started (Redux)
  • Getting Started (ngrx)
  • Examples & Recipes
  • Targets
    • GoogleAnalytics
    • GoogleAnalyticsGtag
    • GoogleTagManager
    • Segment
    • Amplitude
    • React Native: GoogleAnalytics
    • React Native: GoogleTagManager
    • React Native: Segment
  • API Reference
    • createMiddleware
    • createMetaReducer
    • EventDefinition
    • EventsMap
    • EventsMapper
  • Extensions
    • logger
    • OfflineWeb
    • OfflineReactNative
  • Utils
    • debounceEvent
    • ensure
    • combineEvents
  • FAQ
  • Migration Guide (v1 to v2)
  • Notes on Offline Events
Powered by GitBook
On this page
  • Setup
  • Usage
  • Event Definitions
  • Notes
  1. Targets

React Native: GoogleTagManager

PreviousReact Native: GoogleAnalyticsNextReact Native: Segment

Last updated 7 years ago

Setup

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

  2. Install the following npm package, .

  3. For each mobile platform (Android or iOS), you need to follow its corresponding 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

create a mobile container
tracking Id
GoogleAnalyticsBridge
manual installation
Setup
Usage
Event Definitions