Googletagmanager with Turbolinks

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
  });
});