Redux-gtm NPM | npm.io

ReduxGTM has been deprecated in favour of Redux Beacon.

A simple migration guide can be found here.

Google Tag Manager integration for Redux and ngrx/store

npm install --save redux-gtm

logger-ext

Quick Start

What You Need First

An app using Redux or ngrx/store to manage state
A Google Tag Manager (GTM) account
An installed GTM container snippet

How it Works

In a nutshell, ReduxGTM provides a way for mapping your redux actions to custom Gooogle Tag Manager events. The first step is to create an EventDefinitionsMap which maps your action types to an EventDefinition:

const eventDefinitionsMap = {
  'SOME_ACTION_TYPE': {
    eventName: 'some-custom-gtm-event',
    eventFields: (state, action) => ({
      'someEventVariable': action.payload
    }),
  }
};

The object mapped to SOME_ACTION_TYPE is called an EventDefinition. ReduxGTM uses EventDefinitions to generate a custom GTM events. The EventDefinition above will produce an event with following shape:

{
  'event': 'some-custom-gtm-event',
  'someEventVariable': ... // the value stored in action.payload
}

Once we've got an event definitions map, all we have to do is create the middleware, and apply it to our store.

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

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

// The event definitions map prepared earlier
const eventDefinitionsMap = {
  'SOME_ACTION_TYPE': {
    eventName: 'some-custom-gtm-event',
    eventFields: (state, action) => ({
      'someEventVariable': action.payload
    }),
  }
};

// Create the ReduxGTM middleware
const middleware = createMiddleware(eventDefinitionsMap);

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

Now, whenever your application dispatches SOME_ACTION_TYPE, ReduxGTM will create the associated custom event and push it to the data layer.

What Else Can You Do?

Use ReduxGTM in React Native and Cordova apps
Track analytics events even if one of your users loses connection (offline events tracking)
Use one of our starter containers to get up and running in GTM with almost zero configuration
Provide multiple event definitions for a single Redux action