Google Tag Manager integration for Redux and ngrx/store
npm install redux-gtm----
Google Tag Manager integration for Redux and ngrx/store
``bash`
npm install --save redux-gtm
----
##### 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 yourEventDefinition
action types to an :
`js`
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 anEventDefinition. ReduxGTM uses EventDefinitions to generate aEventDefinition
custom GTM events. The above will produce an event
with following shape:
`js`
{
'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.
`js
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