redux-gtm
TypeScript icon, indicating that this package has built-in type declarations

0.3.2 • Public • Published

Deprecation Notice

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

license npm version CircleCI

npm install --save redux-gtm

logger-ext


Quick Start

What You Need First
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

Documentation

The official docs contain tutorials, examples, and a comprehensive API reference for the latest npm version.

License

This project is licensed under the MIT License.

Package Sidebar

Install

npm i redux-gtm

Weekly Downloads

78

Version

0.3.2

License

MIT

Last publish

Collaborators

  • ttmarek