CODEWITHSUNDEEP
reactjsgoogle-analyticsgtag.jsgoogle-analytics-4
usertest
usertest

Reputation: 2262

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

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?

Upvotes: 11

Views: 8399

Answers (3)

Simo Ahava
Simo Ahava

Reputation: 1446

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.

Upvotes: 15

Simon_Weaver
Simon_Weaver

Reputation: 145910

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:

enter image description here

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:

enter image description here

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

enter image description here

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>

Upvotes: 1

oneManArmin
oneManArmin

Reputation: 696

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!

Upvotes: 1

Related Questions