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>