Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

151 lines (141 sloc) 11.024 kb
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Guide to Rails and Google Analytics &#183; RailsApps</title>
<link href="https://plus.google.com/u/0/b/117374718581973393536/117374718581973393536/posts/" rel="publisher" />
<link rel="stylesheet" href="http://railsapps.github.com/css/bootstrap.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="http://railsapps.github.com/css/screen.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="http://railsapps.github.com/css/gollum.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="http://railsapps.github.com/css/site.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="http://railsapps.github.com/css/syntax.css" type="text/css" charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript"></script>
<script src="http://railsapps.github.com/javascript/jquery.text_selection-1.0.0.min.js" type="text/javascript"></script>
<script src="http://railsapps.github.com/javascript/jquery.previewable_comment_form.js" type="text/javascript"></script>
<script src="http://railsapps.github.com/javascript/jquery.tabs.js" type="text/javascript"></script>
<script src="http://railsapps.github.com/javascript/gollum.js" type="text/javascript"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-5109366-14']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a href="http://railsapps.github.com/" class="brand">RailsApps Project</a>
<ul class="pull-right nav">
<li><a href="http://blog.railsapps.org/" class="twitter">Blog</a></li>
<li><a href="http://twitter.com/rails_apps" class="twitter">Twitter</a></li>
<li><a href="https://plus.google.com/117374718581973393536" class="google">Google +</a></li>
<li><a href="https://github.com/RailsApps" class="github">GitHub Repository</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content wikistyle gollum textile">
<h1>Rails and Google Analytics</h1>
<h4>by Daniel Kehoe</h4>
<p><em>Last updated 22 June 2012</em></p>
<p>Guide to using Google Analytics with Rails. Current best practices for Rails 3.2. Google Analytics is a free service that provides detailed data about website traffic and usage.</p>
<h3>RailsApps Examples and Tutorials</h3>
<p>This is a guide for developers using the example apps from the <a href="http://railsapps.github.com/">RailsApps</a> repository. The RailsApps project provides open source apps and detailed tutorials for Rails developers. Next time you build an app, check the <a href="http://railsapps.github.com/">RailsApps</a> project to see if we can save you some time with a starter app.</p>
<p><a href="http://www.twitter.com/rails_apps"><img src="http://twitter-badges.s3.amazonaws.com/t_logo-a.png" title="Follow on Twitter" alt="Follow on Twitter"></a> Follow <a href="http://twitter.com/rails_apps">@rails_apps</a> on Twitter for updates and timely Rails tips.</p>
<h2>Importance of Google Analytics</h2>
<p>If you don’t track usage of your web app and the source of traffic, you won’t have data to improve the site and you won’t know which traffic-building strategies are worthwhile. Tracking data closes the communication loop with your users; your website puts out a message and Google Analytics data shows how visitors respond. There are other services that help you track visitors and website usage but Google Analytics is free, easy to use, and familiar to most web developers.</p>
<h2>How It Works</h2>
<p>To collect usage and traffic data, every web page must contain a snippet of JavaScript code, referred to as the Google Analytics Tracking Code. The tracking code snippet includes a unique website identifier named the Google Analytics Tracking ID, which looks like this: <code>UA-XXXXXXX-XX</code>. You will obtain the JavaScript snippet and Tracking ID from the <a href="http://www.google.com/analytics/">Google Analytics website</a> when you set up an account for your website. You can set up an account for your website at any time. It’s advisable to set up the account before you deploy your app so you can obtain the Tracking ID and set up your app to use it. You’ll check your Google Analytics account later to verify that Google is collecting data.</p>
<p>The tracking code snippet loads a larger Javascript file (an 18KB file named ga.js) from the Google webserver that serves as a <a href="http://en.wikipedia.org/wiki/Web_beacon">web beacon</a>. The ga.js file is downloaded once and cached for the remainder of the session; often, it is already cached and doesn’t need to be downloaded because a visitor has (very likely) visited another website that cached the file.</p>
<p>Before December 2009, Google’s Javascript code could slow the loading of a page because page rendering could be blocked until the Google code finished downloading. Google introduced asynchronous JavaScript code to improve page performance. Now, the ga.js file downloads in parallel with other page assets. Page rendering can begin before the ga.js file is delivered. In practice, the ga.js file is often already cached.</p>
<p>Google recommended placing the original (synchronous JavaScript) snippet immediately before the final </p><p> close tag because it could delay page loading. Now, Google recommends placing the new (asynchronous JavaScript) snippet immediately before the closing tag because it has little effect on page loading.</p>
<h2>Adding Google Analytics Tracking Code to a Rails App</h2>
<p>There are five approaches to adding the Google Analytics tracking code to a Rails app:</p>
<ol>
<li>add the Google tracking code to the application layout</li>
<li>add a partial included in the application layout</li>
<li>use view helpers such as Benoit Garret’s <a href="https://github.com/bgarret/google-analytics-rails">google-analytics-rails</a> gem</li>
<li>use Rack middleware such as Lee Hambley’s <a href="https://github.com/leehambley/rack-google-analytics">rack-google-analytics</a> gem</li>
<li>add the Google tracking code to the asset pipeline</li>
</ol><p>I recommend adding the Google tracking code to the asset pipeline (details below).</p>
<p>Each approach works and has merit. It doesn’t matter to Google how the script gets injected. I’ll describe each approach and explain why I recommend adding the Google tracking code to the asset pipeline.</p>
<h3>Add Tracking Code to the Application Layout</h3>
<p>The most obvious approach, familiar from page-oriented web development (such as <span class="caps">PHP</span>), is to add the Google tracking code to a default application layout template that is used to generate every page.</p>
<p>Your <strong>app/views/layouts/application.html.erb</strong> file would look like this:</p>
<pre>
&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;App_Name&lt;/title&gt;
&lt;meta name="description" content=""&gt;
&lt;meta name="author" content=""&gt;
&lt;%= stylesheet_link_tag "application", :media =&gt; "all" %&gt;
&lt;%= javascript_include_tag "application" %&gt;
&lt;%= csrf_meta_tags %&gt;
&lt;script type="text/javascript"&gt;
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
.
.
.
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>The drawback is a cluttered application layout file. Plus if you have more than one application layout, or a page that doesn’t use an application layout, you’ll have to duplicate the code in each one.</p>
<h3>Add a Partial to the Application Layout</h3>
</div><!-- class="content" -->
<div class="comments">
<div class="content wikistyle gollum">
<h2>Comments and Issues</h2>
</div>
<p>Is this helpful? Please add a comment below. Your encouragement fuels the project.</p>
<p>Did you find an error? Or couldn't get something to work? For the example apps and tutorials, please create a GitHub issue in the repository for the example app. Creating a GitHub issue is the best way to make sure a problem is investigated and fixed.</p>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'railsapps'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div><!-- class="comments" -->
<div class="footer row">
<div class="span4">
<h3>Credits</h3>
<p><a href="http://danielkehoe.com/">Daniel Kehoe</a> initiated the <a href="http://railsapps.github.com/">RailsApps Project</a>. Thanks to all the users and contributors.</p>
</div>
<div class="span4">
<h3>Wiki</h3>
<p>Corrections? Additions? You can edit this page <a href="https://github.com/RailsApps/railsapps.github.com/wiki/_pages">on the wiki</a>.</p>
</div>
<div class="span4">
<h3>Last edit</h3>
<p>by <b>Daniel Kehoe</b>, 2012-07-20 23:08:42</p>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.