Googletagmanager with Turbolinks - ruby-on-rails

Question

Can someone explain how should we properly integrate Googletagmanager with Turbolinks?
On normal pages we just copy/paste this code immediatelly after after the opening tag.
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-******"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); //f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-******');</script>
<!-- End Google Tag Manager -->
If I copy this code inside Turbolinks powered page I can see there is only one network request (when page loads for the first time)

Answer 1

I got page refreshes working following this guide
It suggests that you set up a virtual url macro and pageview rule in Tag Manager, and then push it to the dataLayer:
$(document).on('page:change', function(){
dataLayer.push({
'event':'pageview',
'virtualUrl': window.location.pathname
});
});

Answer 2

Implement google tag manager with turbolink 5.
copy the code below and paste inside the head.
<!-- Google Tag Manager -->
<% if Rails.env.production? %>
<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','[YOUR-GTM-ID]');
</script>
<% end %>
<!-- End Google Tag Manager -->

Answer 3

You can bind events with Turbolinks to page:load (as opposed to $(document).ready)
$( window ).on( 'page:load', function () {
// Do something
} );
Google Tag Manager's documentation specifies:
Google Tag Manager supports dynamic pages through events.
They provide some documentation about events here: https://developers.google.com/tag-manager/devguide#events - but the specific implementation will depend on what you're doing with GTM.

Answer 4

The two existing answers are incomplete. Here is the full solution, along with information on how to configure GTM for your change:
Add this to your site:
<script type="text/javascript">
$(document).on('page:change', function(){
var url = window.location.href;
dataLayer.push({
'event':'pageView',
'virtualUrl': url
});
});
</script>
Once you've done that, register the trigger in Google Tag Manager and associate that trigger with the desired tags.
The complete instructions are available here: http://labs.wrprojects.com/how-to-use-google-tag-manager-with-rails-and-turbolinks/