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
  • Variables
  • Notes
  1. Targets

GoogleTagManager

PreviousGoogleAnalyticsGtagNextSegment

Last updated 6 years ago

Setup

  1. Sign up for Google Tag Manager and .

  2. Add the to your site.

    During development and testing it is often helpful to use Google Tag Manager's Container Preview mode. Follow the instructions to enable it.

  3. Install the target:

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

Usage

import GoogleTagManager from '@redux-beacon/google-tag-manager';

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

const gtm = GoogleTagManager();

const gtmMiddleware = createMiddleware(eventsMap, gtm);
const gtmMetaReducer = createMetaReducer(eventsMap, gtm);

You may also provide an options object when creating the target:

const options = {
  dataLayerName: /* (optional) string */,
};

const gtmWithOptions = GoogleTagManager(options);

Event Definitions

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

Variables

const variable = (action, prevState, nextState) => {
  return {
    variableName: /* your variable value */,
  };
};

Notes

  • Only event objects with an event property will trigger a Custom Event in Google Tag Manager.

  • // 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',
    };
    • If you return anything but an object from an event definition

      (e.g. undefined, null) then the target will skip over that event and won't

      push anything to window.dataLayer.

This target will push all generated event objects to the window.dataLayer by default. As detailed in the .

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. This feature allows you to use the event definitions exposed by the For example:

GTM docs
create a new web container
Google Tag Manager container snippet
here
Setup
Usage
Event Definitions
Variables
Google Analytics target