redux-gtm

Synchronize Redux actions with Google Tag Manager events

Getting Started

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?

API

• ReduxGTM.createMiddleware(eventDefinitions, [dataLayer])
• ReduxGTM.createMetaReducer(eventDefinitions, [dataLayer])
• eventDefinition

License

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