As mentioned in a recent article[^1^](#fn1){#fnref1 .footnote-ref
role=âdoc-noterefâ}, Iâve been diving deep into Google
Analytics lately while working on a
few client projects. Weâre aiming to use much more of the features of
Google Analytics and have been hitting some roadblocks with the
development versus production application environments. Once you begin
to dive into event tracking and AJAX-driven goal conversions, relying on
just the sample code that Google Analytics provides you is going to
result in you looking at a handful of JavaScript errors.
::: thumbnail
:::
another example from the firebug javascript consoleâŚ
::: thumbnail
:::
We see JavaScript errors like this because we donât load the google
analytics code in our development environments. As you can see, we are
only loading this in our production environment.
<% if RAILS_ENV 'production' -%> <!--// Google Analytics //-->
<script type="text/javascript"> var gaJsHost = (("https:"
document.location.protocol) ? âhttps://ssl.â : âhttp://www.â);
document.write(unescape(â%3Cscript src=ââ + gaJsHost +
âgoogle-analytics.com/ga.jsâ type=âtext/javascriptâ%3E%3C/script%3Eâ));
<% end -%>\
To track an event with Google
Analytics,
youâd need to trigger something like:
pageTracker._trackEvent(âButtonâ, âClickâ, âGet in touchâ);
{lang=ârubyâ}\
As you can see from our code earlier, in development, the pageTracker
variable isnât defined and thatâs why weâre getting those JS errors. We
also donât want to add conditionals everywhere in our application to
check if weâre in development or production environment.. as thatâd just
make our views uglier than they need to be. So, I decided that Iâd
create a proxy class in JavaScript that would allow us to trigger
_trackEvent()
and _trackPageview()
and handle it appropriately.
This class works with the following logic:
- if google analytics is loaded, pass the parameters to the real
pageTracker
- if google analytics is NOT loaded, output the information to
console.log()
for debugging purposes
For example, on a gallery on our web site⌠we track when people
navigate next and/or previous through the photos. In our development
environment, I can watch the JavaScript console output the following:
::: thumbnail
:::
And in our production environment, we can see that this was sent to
Google Analytics.
::: thumbnail
:::
Weâre able to do this by initializing the GoogleAnalyticsProxy class and
calling these functions through it. For example:
_gap = new GoogleAnalyticsProxy();
{lang=ârubyâ}
_gap._trackEvent(âVideoâ, âPlayâ, âHomepage videoâ);
{lang=ârubyâ}
_gap._trackEvent(âVideoâ, âPauseâ, âHomepage videoâ);
{lang=ârubyâ}
_gap._trackEvent(âButtonâ, âClickâ, âCall to action Xâ);
{lang=ârubyâ}\
Youâll see that weâre just calling _gap
versus pageTracker
. We then
replace all the instances of pageTracker (except where it is defined in
the google analytics code block they provide you). Youâll find this
located near the bottom of our application.html.erb
file.
<% if RAILS_ENV 'production' -%> <!--// Google Analytics //-->
<script type="text/javascript"> var gaJsHost = (("https:"
document.location.protocol) ? âhttps://ssl.â : âhttp://www.â);
document.write(unescape(â%3Cscript src=ââ + gaJsHost +
âgoogle-analytics.com/ga.jsâ type=âtext/javascriptâ%3E%3C/script%3Eâ));
<% end -%>
We now have _gap
available throughout our project and can call
_trackEvent()
and _trackPageview()
with it. Note: You can use any JS
variable name that you want, _gap is just what I went with.
Get GoogleAnalyticsProxy
Iâve gone ahead and tossed this small JavaScript class (known as
GoogleAnalyticsProxy)
on Github for your enjoyment. I have some more articles in the works
that will show you some tips for how to make the most of Google
Analytics. If you have any questions and/or ideas for related article
topics, donât hesitate to let me know.
- ::: {#fn1}
Tracking AJAX-driven events in Ruby on Rails for Google Analytics
conversion
goalsâŠď¸{.footnote-back
role=âdoc-backlinkâ}
:::