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

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','GTM-MH56FWG');
        </script>
        <% end %>
        <!-- End Google Tag Manager -->

Answer 2

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 3

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/

Answer 4

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.