orestbida / cookieconsent

:cookie: Simple cross-browser cookie-consent plugin written in vanilla js
https://playground.cookieconsent.orestbida.com/
MIT License
4k stars 410 forks source link

Two page views on Google Analytics on a single click #129

Closed mraassin closed 2 years ago

mraassin commented 2 years ago

Hello!

Based on my quick tests, Google Universal Analytics' real-time reports seem to show two pageviews on a single page click after accepting cookies (both the page views per minute and per second). Shouldn't it be just one?

However, it shows correctly just one active user. The tracking code is of form UA-XXXXXXXXX-Y, and I have added type="text/plain" data-cookiecategory="analytics" on my tracking scripts.

orestbida commented 2 years ago

HI @mraassin,

can you please provide your configuration?

mraassin commented 2 years ago

The version is v2.7.0-rc3, and my configuration is as in the example below. Both the cookieconsent.js and cookieconsent.css are in my web applications' external files (all.js and all.css, containing combined and minified Javascript and CSS styles). So, defining the CSS location in the theme_css attribute is not necessary, neither including the cookieconsent.js in the beginning.

And here is the Google Analytics tracking script: ``` ```
orestbida commented 2 years ago

There's nothing wrong with the configuration. The issue is — probably — caused by the following 2 lines:

// ...
gtag('config', 'G-XXXXXXXXXX');
gtag('config', 'UA-XXXXXXXXX-Y');
// ...

as you are trying to initialize the gtag function 2 times.

I'd recommend you to use only one of the methods, and to not mix them up:

If you don't need/want gtag, here is the "Google Universal Analytics" only approach

<!-- Google Analytics -->
<script type="text/plain" data-cookiecategory="analytics">
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-XXXXX-Y', 'auto');
  ga('send', 'pageview');
</script>
<script type="text/plain" data-cookiecategory="analytics" async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->
mraassin commented 2 years ago

Hello @orestbida,

Thanks for your kind reply. It is highly appreciated.

According to the Google Developers guide (https://developers.google.com/tag-platform/gtagjs/install), you can add multiple products to an existing global site tag, so I guess that is not the root cause of the problem. Also, I wanted to send the data to both products (Google UA and GA-4), so I have to include multiple products in the initialization script.

<!-- Global site tag (gtag.js) - Floodlight -->
<script async src="https://www.googletagmanager.com/gtag/js?id=DC-ZZZZZZ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'G-XXXXXX');
  gtag('config', 'AW-YYYYYY');
  gtag('config', 'DC-ZZZZZZ');
</script>

However, your solution works fine, so it fixed the issue. But still, there was something weird going on, so I investigated this issue a bit more. I found an interesting feature regarding how you include your script on your page. I have no clue why it works like this, but it is what it is.

If you do it like this, you get two page views per click:

<script type="text/plain" data-cookiecategory="analytics" async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

But if you do it like this, you will get only one page view per click:

<script type="text/plain" data-cookiecategory="analytics" async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-Y"></script>

So, depending on whether you have ?id=G-XXXXXXXXXX or ?id=UA-XXXXXXXXX-Y on your script import, you'll get a different outcome.

From my end, I guess this issue could be closed now as this workaround seems to work fine.

orestbida commented 2 years ago

Learned something new today! Glad you managed to fix it!