I'm trying to add Google Analytics tag to my web application, which runs Ruby on Rails.
I'd like to deploy the same code to multiple environments, development, staging, production, and to configure a different Google Analytics tracking ID via an environment variable in each of these instances. Each of my environments are set up on a different domain, so I set up separate Properties in Google Analytics and set a new environment variable (GOOGLE_ANALYTICS_TRACKING_ID
) on the servers.
I'd like to use a partial Haml file to hold the Google Analytics tag and use the environment variable. I found an example in "Cant get google analytics working on rails project", but I don't know how to pass the environment variable in.
app/views/stubs/_ga.haml:
:javascript
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', GOOGLE_ANALYTICS_TRACKING_ID_ENV_VAR, 'auto');
ga('send', 'pageview');
app/views/layouts/base.html.haml:
%html
%head
= stylesheet_link_tag 'application', media: 'all'
= javascript_include_tag 'application'
= render 'stubs/ga'
%body
= yield
Note, that I included GOOGLE_ANALYTICS_TRACKING_ID_ENV_VAR
as a placeholder. I tried a few representations, but I haven't been able to get the tracking code working. The Google Tag Assistant Chrome extension reports that no tags were found on the page and I see syntax errors in the browser console.
What would be the best way to structure the partial code and the render call in order to ensure the Google Analytics tracking code is dynamic for each environment and pulls in the environment variable?
Here's one possible solution:
app/views/stubs/_ga.haml
:javascript
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '#{env['GOOGLE_ANALYTICS_TRACKING_ID']}', 'auto');
ga('send', 'pageview');
app/views/layouts/base.html.haml
%html
%head
= stylesheet_link_tag 'application', media: 'all'
= javascript_include_tag 'application'
= render 'stubs/ga', :env => ENV
%body
= yield
Note that I'm explicitly passing in ENV
as an argument to the call to render
. I came up with this solution as I was composing the question and iterating using different syntax. It works, but I'm not sure if it's the best solution. Any other recommendations for how to achieve this objective, namely to deploy the same code to different instances and track the analytics separately?