Analyzing User Behavior - Integration of Google Tag Manager in React

User experience is the key to successful applications. User satisfaction is the top goal; only when this is achieved does software have long-term success on the market. We have had good experiences with so-called usability test sessions, where different participants try out new and existing functions and give direct feedback – ideal for prototype and MVP development. In live operation, however, this feedback is not enough! You need to be able to analyze the user behavior of “real” end users in real time to stay on the right track during further development. That’s why we run extensive and of course anonymized user tracking alongside A/B testing.

Most of our interfaces or frontends are based on React / React-Native. In this blog, we show how to integrate Google Tag Manager into React and evaluate the tags with Google Analytics. This approach is also suitable for Vue.js, Angular, or other JavaScript frameworks.

Increasing Flexibility with Google Tag Manager

Theoretically, you wouldn’t need Google Tag Manager (GTM) to track behavior with Google Analytics (GA). You can also send GA events directly from JavaScript code. GTM is merely an abstraction layer between the website/app and the respective analytics tool like GA. This allows Google Analytics to be replaced or extended with other analytics tools. GTM receives uniform tags and guarantees the flexibility to control and optimize the flow of tags through definable rules.

Procedure

To illustrate how the tags, events, etc. are integrated, we proceed from the application through Google Tag Manager to Google Analytics in this order. A fixed order is technically not necessary at all.

1. Step: Register and create projects at Google Tag Manager and Google Analytics
2. Step: Implementation and sending of the first tag in React
3. Step: Receiving the tag in Google Tag Manager and forwarding to Google Analytics
4. Step: Analysis of tags as page view or event in Google Analytics
5. Optional: Redux Middleware for React or Vue.js apps
6. Tip: The GTM debug console

A fictitious example application will accompany the procedure. In it, you can switch from the homepage to the profile page and perform actions such as password changes. There are two buttons to get to the profile page. One at the bottom of the sidebar and one at the top right in the appbar.

Step 1: Register and Create Projects at Google Tag Manager and Google Analytics

Setting up new projects in GTM and GA is quite simple and well documented. To focus on integration and tag strategies, we refer to a very good guide from SEO-Küche: https://www.seo-kueche.de/blog/google-analytics-google-tag-manager-einrichten/

You initially only need standard projects and their IDs:

Step 2: Implementation and Sending of the First Tag in React

GTM Snippet

For GTM to work, the so-called GTM snippet must be integrated as early as possible in the app. We used the snippet for React from Holidaycheck and integrated it in App.ts in the RootPage. You can find the snippet and instructions here on GitHub.

Event Names

Before we start sending events, we first establish a kind of domain logic. This allows us to later track which component or which path the user chose to perform an action.

For our example, the tags would have the following domain logic:

Send Method

To send tags later, we implement the sendGtmEvent method in the same file:

Navigation

As is common in a SinglePageApplication, routing is handled by React-Router (similar to Vue-Router). However, Google Analytics doesn’t notice a page change when the browser history changes. To solve this problem, we manually send all page changes to GTM and later transmit them to GA.

Sending Events

Now we can write the respective tags in the onClick methods of the profile or home button to the DataLayer, and the GTM snippet takes care of sending them to GTM itself.

Step 3: Receiving the Tag in Google Tag Manager and Forwarding to Google Analytics

Variables

Google Tag Manager receives the connection to Google Analytics via a variable called something like GA Settings. Very important is to set the anonymizeIp field to true to comply with German data protection guidelines. The variable is defined as follows:

To later read the attributes from the events coming from the application, 5 more variables need to be created:

The event variables are defined as follows:!

This establishes the connection to the event from JavaScript/TypeScript and Google Tag Manager. We remember that the event is sent in the sendGtmEvent method. This gives us the following connection to the GTM variables:

As an alternative to writing data to the label, we can also use eventData. However, GA makes it very easy to filter evaluations by label, which is why we chose this path.

Triggers

As further preparation, we need a trigger for each event. One is special for page views, the others trigger custom events.!

The triggers for custom events look like this:!

Alternatively, the triggers for navigation, appbar.profile, profile.password.reset, etc.

Tags

Now we define the tags that are sent to Google Analytics after the triggers fire. Again, page view is separate here, as it should be triggered on a regular page view and on a navigation event.

For events, the data is written in the tags via variables and thus forwarded to GA:!

Step 4: Analysis of Tags as Page View or Event in Google Analytics

The integration of tags is now complete. If no results are visible in Google Analytics yet, it’s probably because the configuration in GTM must first be made live:

In the GA console, a page view should now appear in the real-time view and sidebar.profile should be listed in the events:

Step 5: Optional: Redux Middleware for React or Vue.js Apps

Theoretically, you could select certain element IDs of an HTML page via GTM and send a tag on a click event – without having to intervene in the code at all. However, this is almost impossible with React-Dom, since you have to assign IDs and many clickable elements consist of n-fold divs that would all have to have the same ones.

To make work a little easier, you could at least send an event with every executed Redux action. For this, you can implement the following middleware:

A serious disadvantage of this implementation, however, is that you can no longer track whether, for example, the “profile action” was called from the sidebar or the appbar. That’s why we decided against this centralized variant.

Step 6: Tip: The GTM Debug Console

The debug console from GTM has proven very helpful. However, you won’t find it in Chrome’s developer area. To activate it, you must first enable preview mode in GTM:

Then the following window appears in GTM:

If you now navigate to the website to be developed (also works with localhost), the debug console is automatically displayed at the bottom of Chrome, provided you are on the same computer:

Conclusion

Google Tag Manager is a very powerful tool that gives you a lot of freedom. However, the enormous flexibility brings a relatively large entry barrier. But once you get the hang of it, nothing stands in the way of professional user analysis. User feedback is generally one of the most important drivers and guides in development. That’s why you should use an analytics tool right from the start. The combination of GTM and GA is also completely free and can be used for strongly growing projects due to the considerable functionality.