GoogleTagManager

• Setup

• Usage

• Event Definitions

• Variables

Setup

1. Sign up for Google Tag Manager and create a new web container.

2. Add the Google Tag Manager container snippet to your site.

   During development and testing it is often helpful to use Google Tag Manager's Container Preview mode. Follow the instructions here 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

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

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

• 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 Google Analytics target 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',
  };

  • 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.