Google Analytic GA4 does not disable default page_view event in React Application

Question

I'm trying to add Google Analytics GA4 to a React Application,

index.html

   <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-xxxxxxxL', {send_page_view: false});
    </script>

Except that this does not disable the default page_view event.

I would like to disable the default request so I manually send page_view events. they are some pages where the title is not set until a saga returns, for example: Project: . the default event sets to undefined, which make sense because data is not loaded yet.

So I how can I achieve this?

Callisthenics

Answer 1

Try toggling the option to automatically track history events as page views OFF from the Enhanced Measurement settings in GA4 admin (Web Stream settings).

Many SPA sites have an initial pushState/replaceState in place for state management purposes (or for other reasons), which would cause a page_view to be tracked of that Enhanced Measurement option is toggled on.

Adamok

This is it :) I've just spent 2 hours searching why { send_page_views: false } was not working – Watereddown

Thank you! It's incredibly annoying that Enhanced Measurement ON setting overrides gtag('config', { send_page_view: false }) . I spent several hours trying to figure out why Gatsby with gatsby-plugin-google-gtag was sending double page_view events after switching to GA4. – Favela

If you want to keep most of Enhanced Measurement, it seems you can also only disable "Page changes based on browser history events" in advanced settings of Page Views in Enhanced Measurement settings (click on the cog icon in the bottom right corner). – Favela

As Juliusz Gonera says, turning off "Page changes based on browser history events" is enough. – Exultant

Wow! What an insanely confusing nightmare that was! Does anyone know WHY "Page changes based on browser history events" is enough to remove the duplicates. I get that the duplicate arises because I have a custom "Route Change" event handler, but I don't see why I don't seem to get any initial page load events for my Angular app. – Southeaster

Answer 2

Do you disable gtag on every webpage?

As the docs say:

The send_page_view setting does not persist across pages. This setting must be repeated on every page of your website where you want to disable automatic pageviews.

I ran into the same problem, my initial idea was that sincs the default index.html loads as a framing for the react app, I can disable page_view events on all pages just by adding the snippet here. But this was not the case for me.

I ended up programmatically removing the gtag events from dataLayer on the componentDidMount of App.tsx with the ts equivalent of a pseudo snippet like this (I dont have the exact code on me right now):

window.dataLayer = window.dataLayer.filter(element => element['event'] && !(element['event'] === 'gtm.load' || element['event'] === 'gtm.dom'));

This is as crazy as it looks: we remove the tags responsible for page hits right from the data buffer. This seems to work but it not only is a major hack, but looks ugly in my opinion, so any better non-lib way for this is much appreciated on my side!

Lucic

Answer 3

This is a very complicated issue - I'm sure if you're here you're frustrated.

In addition to making sure you've disabled 'browser-history events' under Enhanced measurement events I also discovered the following:

• The preview feature does NOT work the same as the live deployed version. I have my site open twice one under the GTM 'preview' feature another instance normally. With the exact same version deployed I get ONE page_view event under the preview and TWO when I open the site normally.

• I can't seem to figure out the nuances of why this occurs but to debug where the events are coming from I found the following settings useful:

The two yellow fields get sent as event parameters which means when I look at the debugging in Chrome console I can see exactly where they came from:

In this case you can see they fire on 'Route change' and 'DOM Loaded' - which is exactly how I have them configured:

When I load in preview mode it only gets the gtm.dom event and no Route change. I can't figure out why. It's like the 'GTM Preview' feature is swallowing my history change events.

• Another final tip:

Add a Custom HTML tag for the following code and trigger it when Route Change occurs. That way you can see in the console exactly when it occurs (or doesn't occur).

<script>
  console.log('Route Change - GTM Debug - {{Page Hostname}} {{Page URL}}'); 
</script>

Southeaster