Google Tag Manager and Turbolinks in Ruby on Rails

I’m pretty new to Ruby on Rails (and coding in general), but I finally got my first little app up and running and so naturally I wanted to add Google Tag Manager to it so I could track traffic to it.

Turns out that the Turbolinks gem doesn’t play well with GTM. I googled around for it and everyone was pointing to this article, which I was going to try as a last resort because I’m just not a fan of virtual pageviews and it just seems like their should be a way to get Turbolinks to fire JS when you tell it to.

I read the Turbolinks docs and found this:

Running JavaScript When a Page Loads

You may be used to installing JavaScript behavior in response to the window.onload, DOMContentLoaded, or jQuery ready events. With Turbolinks, these events will fire only in response to the initial page load—not after any subsequent page changes.

In many cases, you can simply adjust your code to listen for the turbolinks:load event, which fires once on the initial page load and again after every Turbolinks visit.

document.addEventListener("turbolinks:load", function() {
// ...
})

I used that snippet to modify my GTM <script> tag so it looks like this:


 <script>
 document.addEventListener("turbolinks:load", function() {

(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-XXXXXXX');

console.log("GTM fired");
 })
 </script>

I put in the console.log("GTM fired"); so I could see in the console when it was firing. When I debugged it, it fired once and only once on each page load and my events are firing correctly too.

Like I said, I’m new to Rails, so YMMV. Leave a comment if works or I’m breaking something without realizing it.

(analytics | coding)

Extracting URL strings into Google Tag Manager

I’ve been teaching myself JavaScript in the last few weeks to up my GTM implementation skills, so I thought I’d share some examples of how I’ve used it.

This one is for pulling out the sub-directory from the URL to use in an event. This came in handy for me when implementing Mixpanel a couple months ago for a client, and is especially helpful for sites that have a solid directory structure. For instance, the shoes page on an eCommerce clothing site might look something like this:

example.com/men/shoes/sneakers/the-new-lebrons/

If you want to create an event for all of the category pages, it’s helpful to be able to pull out “sneakers” and use it in a property so that you can compare it to events with the property of “dress-shoes” and “sandals”.

I created a Custom JavaScript variable in GTM and here’s the code I used:

function () {
 var value={{Page Path}}.split("/");
 return value[1];
 }

This pulls out the 2nd sub-directory (‘shoes’ in this case) and stores it in a GTM variable. You can change which directory level gets pulled by changing the [1] to [0] or [2] or whatever (the counting always starts with 0).

Here’s a screen shot of the custom variable in GTM:

 

(analytics | coding)





<< | >>