Google Analytics is a powerful tool to gather information about a website’s traffic. Some of the activities we can track are session duration, pages per session and bounce rate among others.
In the context of a blog website for example, it helps to identify which content is more popular.
Today, I will talk about why page view events are duplicated on the Google Analytics dashboard while setting up Google Analytics 4.0 on a Gatsby site using gtag.js.
This is a problem I have suffered myself, so I will explain how I solved it.
The setup
When setting up our Google Analytics account and creating a data stream, a MEASUREMENT_ID is provided.
We need to use this MEASUREMENT_ID in the script provided in the documentation.
Since we are working on a Gatsby site, we can use the gatsby-plugin-google-gtag plugin for Gatsby.
This plugin takes care of all the setup automatically for us.
The problem
I followed the instructions of the plugin to set it up. This process was fairly simple, the plugin works like a charm ✨.
The problem came when debugging the page view events in Google Analytics. I realized that the page view events appeared duplicated.
Gatsby sites are single page applications under the hood. What this means is that the site does not load pages as we navigate through the site. Gatsby loads the content but the page is technically not refreshed.
In previous versions of Google Analytics, the script provided by Google Analytics assumed it would be executed every time the user navigates to a new page. Since this is not the case with Gatsby and other single page applications, page view events were not tracked properly.
Why are we seeing duplicated page view events then?
Since Gatsby is a single page application and pages are not loaded, the plugin circumvents this by sending such tracking events itself.
Furthermore, a more recent version of Google Analytics includes a new option in the Enhancement measurement settings that uses browser history events to identify page changes.
As you can imagine, both are overlapping and the reason we see duplicated page view events on the Google Analytics dashboard.
The solution
In order to solve this issue, the easiest way is to disable the Google Analytics Enhancement measurement setting.
In the Google Analytics console:
- Go to
Admin. - In the
Propertysection (on the right side), go todata streams. - Click on your web data stream.
- Open the settings for Enhancement measurement.
- Under the
page viewssection, disable the optionPage changes based on browser history events.
This is the option to disable.
That’s it!
Note: if you want to debug your site and check again on Google Analytics, remember to refresh your browser 😊.
Summary
In this post I explained why when having a Gatsby site and using Google Analytics, page view events may be duplicated on the Google Analytics dashboard.
If you had the same problem, I hope you found it useful!
Thanks for reading!
If you found this article interesting, share it!
