The Google Tag Manager dataLayer is one of the nicest thing when it comes to analytics for the developers. But there’s one major issue when you start having custom dimensions: you need to reset the dataLayer between your pages or you will be sending the same data for a specific propery over and over again.
Let’s take for example the following dataLayer:
And now your user goes to the next page that is not a product of type food anymore:
If your page hasn’t been reloaded between the 2
push(), the following data will be sent to Google Tag Manager:
This will not be an issue if your website isn’t a single page app (each page reload will flush the dataLayer since it gets recreated) but it can be a huge problem if you build your website using react and redux which are commonly used for single page applications.
I’ll show you how to create and use a middleware that solves this issue using a hidden method of the GTM library.
First we have to find a way to reset the dataLayer. The Google documentation is not helpful here…so I reached out to Simo Ahava on Twitter to get the answer:
google_tag_manager[“GTM-XXXX”].dataLayer.reset() will clear GTM’s internal data model.— Simo Ahava (@SimoAhava) January 24, 2017
We are going to create a very simple reducer to handle the data that we want to push to the dataLayer.
It will handle 3 cases:
- adding data to the state (ADD_TO_DATALAYER)
- adding data and pushing it to the gtm dataLayer (PUSH_TO_DATALAYER)
- reseting the gtm dataLayer (RESET_DATALAYER)
Here’s the reducer contained in one file:
Now that we have a way to reset the dataLayer and our reducer we can move on to our next step: creating a middleware.
The last step will be to plug in the middelware:
This is not a complete solution and using an undocumented feature from Google Tag Manager can be risky but it does work.
Also note that you can simplify the reducer even more if you only use action creators and types (skipping the state).
I’m also not including the interaction with React but it should be pretty straight forward following the doc: http://redux.js.org/docs/basics/UsageWithReact.html
See something wrong or want to ask a question? Get in touch on Twitter