Google Tag Manager Preview does not display when navigating to pages with TurboLinks

Question

I don't think GTM is recording data correctly for my Rails app. When i use the preview feature, the GTM preview data in developer tools only shows on initial page loads, subsequent page loads (using turbolinks) do not show the preview data. How should I set up GTM with TurboLinks?

I have set up my GTM in the header like this:

<script>
var dataLayer = [];
(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-N7MDCP');</script>
<!-- End Google Tag Manager -->

And then at the top of the body:

<script>
<% if user_signed_in? %>
  dataLayer.push({'userID': '<%= current_user.id %>'},{'userCategory': 'User'});
<% end %>
</script>


<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N7MDCP"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->


<!-- Google Tag Manager trigger for Turbolinks -->
 <script type="text/javascript">
   var url = window.location.href;
   dataLayer.push({
     'event':'pageView',
     'virtualUrl': url
   });
 </script>
 <!-- End Google Tag Manager trigger for Turbolinks -->

Answer 1

dataLayer.push(
   {'userID': '<%= current_user.id %>'},
   {'userCategory': 'User'}
);

instead please try

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
    'userID': '<%= current_user.id %>',
    'userCategory': 'User'
});

This is untested.

I have noticed your use of braces '{'

Answer 2

I have digged same issue for long time, and this thread seems to be good place to leave my solution.

I have Rails 7 app, with turbolinks, most pages/forms are processed with turbo.

What's happening, that in "PageView" trigger type, it will work only with full page switching that reloads the gtm.js and this is a "hidden" trigger.

For SPA or turbolinks app you need to configur trigger to be a "Custom Event" with event name "pageView" (or whatever you want) and add a trigger name:

Ofc, then you need to have:

      document.addEventListener("turbo:load", function(e) {
        dataLayer.push({
          'event':'pageView',
          'virtualUrl': window.location.href
        });
      });

Hopefully it will help someone else ! Happy coding !

Answer 3

This has to do with how the preview mode injects the debugger iframe.

It is injected on the initial page load, but since turbolinks replaced the entire body it also removes the preview panel from -ALL- subsequent page reloads.

It is sadly pretty much how it is and not much one can do about it.

Your GTM implementation is probably still working, but preview mode in Google Tag Manager is not compatible with turbolinks page reloads.

And yes, this makes debugging GTM in turbolinks enhanced sites a major pain.