Getting Google Analytics Up and Running With Rails 6

I have seen a number of different ways to do this with varying means of difficulty after looking at several other tutorials online, but this is the easiest way I could get Google Analytics working in a Rails 6 app using Turbolinks. I did borrow some of the information from other tutorials, which are credited below and tweaked a few things to my liking.

First thing is to set up a Google Analytics account and then a property under that account.

You'll want to get the tracking code from the property. It will look something like UA-XXXXXXXXX-1.

Let's first make note of that in your credentials file.

# From Your Terminal Inside Your Rails App Folder
rails credentials:edit

If you don't have an editor already set in your shell, you could do it this way.

# For Sublime Text
EDITOR="subl --wait" rails credentials:edit
# For Atom
EDITOR="atom --wait" rails credentials:edit
# For VS Code
EDITOR="code --wait" rails credentials:edit

Or you could set up any editor of your choice. Once you're in the credentials file, add the attribute for Google Analytics with your tracking code like this:

google_analytics: UA-XXXXXXXX-1

Then save and close.

Next create a partial to place your Google Analytics code; or, if you have a partial that you already include in the head of your layout file, you could put this code there. I happen to do that where I have a partial called _scripts.html.erb that I use to import a number of things such as Font Awesome, Google Fonts, etc. If you don't have a file that already gets rendered in the head of your document, you will need to create one. You could keep it easy to remember and name it _google_analytics.html.erb. Within that partial, add this code:

<% if Rails.env.production? %>
<script async src="https://www.googletagmanager.com/gtag/js?id=<%= Rails.application.credentials.dig(:google_analytics) %>"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', '<%= Rails.application.credentials.dig(:google_analytics) %>');
  </script>
<% end %>

Then you need to render that partial in the head of your layout file. I suggest above the application javascript pack tag to ensure it gets called correctly upon Turbolinks (if you're using Turbolinks) loading the page.

You'll also need an event listener for Turbolinks which will send a page's URL to the gtag API when Turbolinks loads a new page.

That means you will need to create a js file inside your app/javascript/packs folder. But since you need to access a ruby variable in your credentials file, you will need to add .erb to the end of the file.

I called my file ga.js.erb, and placed it in the above mentioned folder. In that file, include this code:

document.addEventListener('turbolinks:load', function(event) {
  if (typeof gtag === 'function') {
    gtag('config', '<%= Rails.application.credentials.dig(:google_analytics) %>', {
      'page_location': event.data.url
    })
  }
})

This will check if Turbolinks loads a page and then sends the pageview to the API.

You will need to include this with the new javascript pack tag as such:

<%= javascript_pack_tag 'ga' %>

I placed the file below my application javascript pack tag in the head of my layout file.

Note, you may run into an issue with just the standard webpack installed. Before you run your site, you may need to install the ability for webpack to be able to run js files with the erb extension. To do that, head over to your terminal in your rails folder and run this:

rails webpacker:install:erb

After doing that, I would suggest restarting the server and then let it rip! Happy analyzing.

Much of the information I used was from Michael Soolee's tutorial for Google Analytics with Rails 5.2. I also got information from this tutorial from Phillip Kessel, which had another interesting method and also suggested the idea of tracking Development, Testing, and Production environments with separate properties. I would strongly recommend giving it a read if you wanted to get serious about analytics.

Getting Google Analytics Up and Running With Rails 6

Comments