> For the complete documentation index, see [llms.txt](https://rangle.gitbook.io/redux-beacon/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rangle.gitbook.io/redux-beacon/index/google-tag-manager.md).

# GoogleTagManager

* [Setup](/redux-beacon/index/google-tag-manager.md#setup)
* [Usage](/redux-beacon/index/google-tag-manager.md#usage)
* [Event Definitions](/redux-beacon/index/google-tag-manager.md#event-definitions)
* [Variables](/redux-beacon/index/google-tag-manager.md#variables)

## Setup

1. Sign up for Google Tag Manager and [create a new web container](https://support.google.com/tagmanager/answer/6103696?hl=en).
2. Add the [Google Tag Manager container snippet](https://developers.google.com/tag-manager/quickstart) to your site.

   During development and testing it is often helpful to use Google Tag Manager's Container Preview mode. Follow the instructions [here](https://support.google.com/tagmanager/answer/6107056?hl=en) to enable it.
3. Install the target:

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

## Usage

```javascript
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:

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

const gtmWithOptions = GoogleTagManager(options);
```

## Event Definitions

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

## Variables

```javascript
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](https://developers.google.com/tag-manager/devguide#renaming).
* 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](/redux-beacon/index/google-analytics.md#event-definitions) For example:

  ```javascript
  // 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`.