How to implement Google Tag Manager in Ruby on Rails

April 07, 2020

We'll implement Google Tag Manager in a Ruby on Rails application using Turbolinks. Google Tag Manager is a system for managing the "tags" (e.g., tracking code) in your application.

Install

Go to Google Tag Manager to get the container ID.

The container ID is managed using config.

config/settings/production.yml
google:
  gtm_id: 'GTM-******'

Create a Layouts file for Google Tag Manager.

app/views/layouts/_google_tag_manager.html.erb
<script>
    document.addEventListener('turbolinks:load', event => {
        let 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',"<%= Settings.google.gtm_id %>");
</script>

For noscript

app/views/layouts/_google_tag_manager_noscript.html.erb
<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=<%= Settings.google.gtm_id %>" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>

We'll load the layout file we created in app/views/layouts/application.html.erb. We only want to display it in production, so we'll set it to if Rails.env.production? We'll place app/views/layouts/_google_tag_manager.html.erb as far up in the <head> as possible. app/views/ layouts/_google_tag_manager_noscript.html.erb should be loaded right after <body>.

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <%= render 'layouts/google_tag_manager' if Rails.env.production? %>
      ･
      ･
      ･
  </head>
  <body>
    <%= render 'layouts/google_tag_manager_noscript' if Rails.env.production? %>
      ･
      ･
      ･
  </body>
</html>

References

Tweet