Google Tag Manager with turbolinks: true duplicates pageView when using Push

viktorzimmermann commented 5 years ago

It looks like GTM with turbolinks: true (#88) works only for pushing basic page view to the Data Layer:

handler :google_tag_manager, container: 'GTM-123456677', turbolinks: true

which will render in HEAD section:

<script>
      document.addEventListener('turbolinks:load', function(event) {
        var url = event.data.url;
        dataLayer.push({'event':'pageView','virtualUrl': url});
      });
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-123456677');</script>

Turbolinks will not duplicate this script tag on other page views because it's always exactly the same.

However, when user navigates to another controller (with Turbolinks) where I call something like this:

t.google_tag_manager :push, ecommerce: {
    impressions: @products.map { |product| { id: product.id } }
}

...I end up with two script tags in HEAD section:

<head>
<script>
      document.addEventListener('turbolinks:load', function(event) {
        var url = event.data.url;
        dataLayer.push({'event':'pageView','virtualUrl': url});
      });
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-123456677');
</script> 
<script>
      document.addEventListener('turbolinks:load', function(event) {
        var url = event.data.url;
          dataLayer.push({"ecommerce":{"currencyCode":"HRK","impressions":[ ........ ]}});
        dataLayer.push({'event':'pageView','virtualUrl': url});
      });
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-123456677');
</script>
</head>

This unfortunately creates duplicate pageviews in Analytics etc.

Am I doing something wrong or this is a real issue? Thanks! :)

DonSchado commented 4 years ago

@viktorzimmermann sorry that this got lost... do you have an update on this from your side?

Theminijohn commented 4 years ago

I'm at the exact same point, I can't make it work 🤯 Did you find a solution to this after all @viktorzimmermann ?

viktorzimmermann commented 4 years ago

Unfortunately I still didn't find any solution. 🙄

jeanmartin commented 3 years ago

At the same point now myself. Renders rack-tracker useless for me sadly.

bumi commented 3 years ago

sorry, sadly I can not really help here. Any ideas on how to fix this are welcome.

DonSchado commented 3 years ago

We released a hotwire/turbo related change, maybe you can check this out: https://github.com/railslove/rack-tracker/pull/160/files

railslove / rack-tracker

Google Tag Manager with turbolinks: true duplicates pageView when using Push #134