here.A simple migration guide can be found
Google Tag Manager integration for Redux and ngrx/store
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 your
action types to an
const eventDefinitionsMap ='SOME_ACTION_TYPE':eventName: 'some-custom-gtm-event''someEventVariable': actionpayload;
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 ReduxGTM;// The event definitions map prepared earlierconst eventDefinitionsMap ='SOME_ACTION_TYPE':eventName: 'some-custom-gtm-event''someEventVariable': actionpayload;// Create the ReduxGTM middlewareconst middleware = ;// Apply the middleware when creating your Redux storeconst store = ;
Now, whenever your application dispatches
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
The official docs contain tutorials, examples, and a comprehensive API reference for the latest npm version.
This project is licensed under the MIT License.