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

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.

Answer 2

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 '{'