# GoogleTagManager

* [Setup](#setup)
* [Usage](#usage)
* [Event Definitions](#event-definitions)
* [Variables](#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](https://rangle.gitbook.io/redux-beacon/google-analytics#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`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://rangle.gitbook.io/redux-beacon/index/google-tag-manager.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.