CODEWITHSUNDEEP
google-analyticsnext.jssingle-page-applicationgoogle-analytics-4
Luke Seemann
Luke Seemann

Reputation: 112

Getting redundant pageview events with GA4 and NextJS

I'm trying to transition a NextJS app to GA4.

Initial page loads send events as expected, but subsequent pages (visited by clicking a link generated by the Next’s Link component) will log pageview events twice. Other events fire once, as expected.

In other words, if I go to Page A, then click a link to Page B, Page A the realtime events will show one visit to Page A but two visits to Page B.

Can't tell if this is a GA4 bug, a NextJS bug, or a problem with my implementation.

This behavior is not observed in our traditional GA setup, and it is observed even when stripping all of the existing GA analytics (employed via React-GA), and it is observed in and out of dev mode.

The GA4 tag is loaded on each page by including the following in a common component:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxx" />
<script
  type="text/javascript"
  dangerouslySetInnerHTML={{
  __html: `window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-xxxxxxxx');`,
  }}
/>

Upvotes: 3

Views: 2742

Answers (1)

Juliusz Gonera
Juliusz Gonera

Reputation: 4958

I spent half a day on this (getting double page_view events with Gatsby and gatsby-plugin-google-gtag) and I'm pretty sure that the solution to your problem is the same as https://stackoverflow.com/a/66318326/365238

Basically GA4 introduces something called "Enhanced measurement" which tracks more stuff than GA used to. This setting is on by default and annoyingly overrides gtag('config', { send_page_view: false }). I'm not sure if this should be submitted to Google as a bug or we should simply stop trying to handle history changes manually and let GA do its magic.

This behavior can be disabled by going to Admin in GA, then to your property, choosing Data Streams, then choosing the stream that your app is using and disabling "Enhanced measurement" altogether:

Screenshot of disabled Enhanced measurement

Or by disabling tracking browser history in particular (click on the cog icon showing up when "Enhanced measurement" is on to see this):

Screenshot of disabled browser history events

Upvotes: 7

Related Questions