redux-gtm

ReduxGTM

Google Tag Manager integration for Redux and ngrx/store

Getting Started

Prerequisites

• An app using Redux or ngrx/store to manage state
• A Google Tag Manager account
• A container snippet in your app's html (Web)

Installation

With npm:

npm install --save redux-gtm

With yarn:

yarn add redux-gtm

How it Works

import reducer from './reducer';
import { createStore, applyMiddleware } from 'redux';

// 1. Import ReduxGTM
import { createMiddleware } from 'redux-gtm';

// 2. Create a mapping between you Redux actions and you Google Tag Manager events
const eventDefinitions = {
  'SOME_REDUX_ACTION_TYPE': { eventName: 'some-gtm-custom-event' },
};

// 3. Create the middleware using createMiddleware from ReduxGTM
const analyticsMiddleware = createMiddleware(eventDefinitions);

// 4. Apply the middleware when creating your Redux store
const store = createStore(reducer, applyMiddleware(analyticsMiddleware));

Now, whenever your application dispatches SOME_REDUX_ACTION_TYPE, ReduxGTM will emit some-gtm-custom-event to Google Tag Manager.

Notes

• When mapping actions to events, each action type must be mapped to a valid eventDefinition.

Examples

• How do I track pageviews when using React Router?
• How do I track failure events?
• How to do mini surveys

API

• createMiddleware(eventDefinitionsMap, [dataLayer])
• createMetaReducer(eventDefinitionsMap, [dataLayer])
• EventHelpers
  • createGAevent
  • createGApageview

License

This project is licensed under the MIT License - see the LICENSE file for details