How to Track Analytics with Redux and Google Tag Manager

Google Tag Manager (GTM) makes it quick and easy for digital marketers to manage what events are sent to analytics servers such as Google Analytics (GA). However, integrating GTM and developing a maintainable tagging strategy is challenging for those who are new to it. Here I am introducing an open source project called ReduxBeacon that resolves the challenge with GTM integration for apps using Redux or ngrx/store.

The aim of this tutorial is to walk you through the basic setup of the library in a sample application. By the end of the tutorial, you will be able to track GA pageviews and GA custom events on any Angular2 application that uses Redux.

Sample App Overview

angular2-redux-example is built with Angular 2, Redux, and Webpack and used at Rangle as a teaching material. It is a counter that can increment and decrement by button clicks. Also, it comprises a simple user authentication and a navigation to a secondary page using ng2-redux-router.

The code snippet above shows where your GTM container snippet should be added (you will have to replace GTM-XXXXXX with your own GTM ID that you created before).

Google Tag Manager Setup

You need to create or own a container that is comprised of a set of macros, rules and tags for GTM. In this tutorial we will use the the starter container that Redux-Beacon provides for the quick and easy event tracking.

Now we are ready to debug our container for the first time! You can find How to preview and debug containershere.
Having GTM's preview mode on, you can just run the following commands in angular2-redux-example folder.

npm install
npm run dev

You should be able to see the app running on localhost:8080 with GTM debugger.

ReduxBeacon Installation and Configuration

Install ReduxBeacon by running npm install redux-beacon --save.
Next, we import createMiddleware from ReduxBeacon and create a simple event map for LOGIN_USER action (the action is defined in src/actions/session.actions.ts). We define the map as eventDefinitionsMap in src/app/sample-app.ts.

If you run npm run dev with GTM preview mode on and log in with one of the credentials given in server/user.json (e.g. Username: "user", Password: "pass"), then you would see event event logged in GTM debugger.

Enhance eventDefinition

Now we have a very basic event that GTM debugger reports. However, this event does not match with any of our GTM tags. To find a proper tag for the event, we need to provide more information in its eventDefinition by assigning a function to eventFields. Any function assigned to this property will receive the state of the application (before the action), and the associated action object (action, prevState) to specify dataLayer variables and pass them to GTM as a tag trigger. With this function we can define any variables we would
like to emit with the event. The returned object is required to have hitType, eventAction and eventCategory properties and the optional eventLabel and eventValue properties.

If we refresh our app running with GTM preview mode in a browser and click on About Us link on the top nav bar, we see GAPageViews tag triggered on route change.

Conclusion

ReduxBeacon mitigates the challenge of synchronizing Redux actions to GTM events in your app. It definitely saves you time on studying for the third party integration for your app. Instead, it ensures you have more time for getting priceless feedback on product initiatives and insights that will grow a user base.