How to use Google Tag Manager with Rails and Turbolinks

In a recent project, we wanted to use Google Tag Manager (GTM) along with Rails. The trick, however, is that most Ruby on Rails projects these days use Turbolinks. This post shows how to get up and running quickly.

Note: This setup is generic enough that it should work for any website where page changes aren’t usual. This is generally the case for web apps that utilize javascript front-end frameworks, like Ember, Angular, etc. The only adjustment you should need to make is the particular event you bind the callback to. In this example, we use jQuery to bind to the “page:change” event.

The Problem w/ GTM and Turbolinks

Turbolinks effectively changes how the browser follows a link. Instead of the whole DOM being reloaded with every new page view, Turbolinks just replaces the contents between the body tags. This speeds up page load time but it doesn’t reload the head section, and as a result, reload the javascript you may have included.

In the case of GTM, the first time you load a page of your app, the “All Pages” trigger will fire. Subsequent page visits will not trigger on this, so you won’t get the same sort of script loading behavior you may expect.

The Fix

There are already some articles online and on stackoverflow on how to resolve this issue, however, they seem to have been written some time ago and don’t account for the current version of Google Tag Manager. Here are the current steps you should take to get up and running.

Add GTM and Custom Trigger to Your Site

We added the following code right before the end of the head section. The first section of code notifies GTM when turbolinks changes the page. The second section of code is just the vanilla code that GTM provides to you. Be sure to replace the latter chunk of code with the unique code that Google Tag Manager provides you.

<!-- Google Tag Manager trigger for Turbolinks -->
 <script type="text/javascript">
 $(document).on('page:change', function(){
 var url = window.location.href;

 dataLayer.push({
 'event':'pageView',
 'virtualUrl': url
 });
 });
 </script>
 <!-- End Google Tag Manager trigger for Turbolinks -->

 <!-- Google Tag Manager -->
 <noscript><iframe src="//www.googletagmanager.com/ns.html?id=[YOUR ID]"
 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);
 })(window,document,'script','dataLayer','[YOUR ID]');</script>
 <!-- End Google Tag Manager -->

Wiring Your Tags To Fire

Once you’ve completed the above step, you need to create a Trigger object in GTM. You’ll associate this object with tags in GTM, allowing you to determine which tags “fire” when Turbolinks changes the page.

Follow these steps:

  1. In GTM, click “Triggers”. Click “New”.
  2. Select “Custom Event”.
  3. For “Event name”, enter “pageView”.
  4. Click “Create Trigger”.

To associate a tag with your new trigger:

  1. Create a new tag or edit an existing tag.
  2. Under “Fire On”, click “More”.
  3. Select the trigger you just created and click “Save”.
  4. Click “Save Tag”.
  5. Be sure to click “Publish” once you’ve made all of your changes so that the changes go live.

That’s it. You should be go!