Googletagmanager with Turbolinks

Question

Can someone explain how we should integrate the Googletagmanager with Turbolinks correctly?

On regular pages, we simply copy and paste this code immediately after opening the 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 on a page loaded with Turbolinks, I see that there is only one network request (when the page loads for the first time)

Answer 1

I updated the page after this guide.

It is assumed that you have configured the virtual url macro and the pageview rule in the tag manager, and then click it in the dataLayer:

$(document).on('page:change', function(){
  dataLayer.push({
    'event':'pageview',
    'virtualUrl': window.location.pathname
  });
});

Answer 2

Turbolinks : load ( $(document).ready)

$( window ).on( 'page:load', function () {
  // Do something
} );

Google :

Google .

: https://developers.google.com/tag-manager/devguide#events - , GTM.

Answer 3

. , , GTM :

:

 <script type="text/javascript">
     $(document).on('page:change', function(){
         var url = window.location.href;

         dataLayer.push({
             'event':'pageView',
             'virtualUrl': url
         });
     });
 </script>

, Google .

: http://labs.wrprojects.com/how-to-use-google-tag-manager-with-rails-and-turbolinks/

Answer 4

Implement google tag manager with turbolink 5. copy the code below and paste it into your 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 -->