Open
Description
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! :)