GoogleTagManager
- 1.
- 2.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
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);
const event = (action, prevState, nextState) => {
return {
event: /* fill me in */,
/* add any additional key/value pairs below */,
};
};
const variable = (action, prevState, nextState) => {
return {
variableName: /* your variable value */,
};
};
- 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 ahitType
property, this target will create anevent
property and set it to thehitType
string. This feature allows you to use the event definitions exposed by the Google Analytics target 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',};- 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'tpush anything to
window.dataLayer
.
Last modified 4yr ago