Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Tree: 8a078fca1e
Fetching contributors…

Cannot retrieve contributors at this time

341 lines (213 sloc) 7.817 kB
title slide
interface builder 4
blockquote { font-size: 1.5em; }


We need information to make product decisions. We get this information from a variety of sources

We get qualitative information about product decisions from

  • Designers, product, and domain experts
  • Advisors
  • Usability testers

Analytics are tools to gather quantitative data about how users interact with a website

What do we use?

  • Pageviews
  • User segmentation
  • Time on site
  • Bounce rate
  • Browser capabilities
  • Anonymous event tracking

What do we use?

  • Funnel conversions
  • Cohort analysis
  • Named user event tracking
  • User timeline

What do we use?

Analytical Gem

  • Turns our analytics on or off depending on whether you’re an admin or no
  • Manages analytics in development / testing / staging / production environments

How does this work?


{% highlight haml %}

!!! - ie_tag(:html) do %head = raw analytical.head_prepend_javascript = render partial: ‘layouts/common_head’ = include_stylesheets :common, :client - analytical.identify, :email => = raw, ‘User Type’, ‘Member’, 2) = raw analytical.head_append_javascript %body = raw analytical.body_prepend_javascript -#Header -#Frames -#Footer = raw analytical.body_append_javascript

{% endhighlight %}

How about Google Analytics?

There are a few main types of things we track with Google

  • Page Views
  • Custom Variables: User vs Member
  • Events

Page Views


{% highlight javascript %}

var _gaq = _gaq || [];
gaq.push([’setAccount’, ‘#{options[:key]}’]);
gaq.push([’setDomainName’, ‘#{options[:domain]}’]);
(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘’;
var s = document.getElementsByTagName(‘script’)0; s.parentNode.insertBefore(ga, s);

{% endhighlight %}


  • You’ll see _gaq.push and _kmq.push all over our tracking
  • _gaq is an array into which tracking commands are pushed
  • The ga.js script is fetched from Google servers
  • This script looks for elements in _gaq and executes the associated tracking command


ga.js then send a requests for a single pixel gif to google’s servers
h2. This gif requests includes variables which encode things like:

  • Cookies that have been set by Google
  • Browser and OS settings
  • Type of requests and associated data
  • Transactional information…

{% highlight html %}×1024&utmsc=32-bit&utmul=en-us&utmje=1&utmfl=9.0%20%20r115&utmcn=1&utmdt=GATC012%20setting%20variables&utmhid=2059107202&utmr=0&utmp=/auto/GATC012.html?…

{% endhighlight %}

Type of Request: Page View

{% highlight coffeescript %}

class App.Routers.Client extends App.Router routes: ‘’ : ’home’ ‘gene/:id’ : ‘gene’ initialize: → @viewState = new App.Models.ViewState home : { obj: App.Views.HomeIndex } gene : { obj: App.Views.GeneFrame } any: → $(‘#zoom_light_box, .ui-dialog, .ui-widget-overlay’).css(‘display’, ‘none’) $(‘#feedback’).dialog(‘close’) gaq.push(["trackPageview", window.location.pathname + window.location.hash])

{% endhighlight %}

Track Page View

{% highlight coffeescript %}


{% endhighlight %}

{% highlight coffeescript %}

gaq.push(["trackPageview", window.location.pathname + window.location.hash])

{% endhighlight %}

So what happens here? Let’s say we’re looking at the Home Carousel and search for “Photography”

  • window.location.pathname will return “/”
  • window.location.hash will return “#!/gene/photography”

Google then tracks that there was a page view at the location “/#!/gene/photography”

Custom Variables

{% highlight javascript %}

_setCustomVar(index, name, value, scope)

{% endhighlight %}

{% highlight javascript %}

gaq.push(["setCustomVar", 1, “User Type”, “Member”, 1])

{% endhighlight %}

This sends our custom variables with the next trackPageview event

  • Index is allows you to sort custom variables
  • Name identifies the type of thing you’re tracking (“User Type”)
  • Value is the value associated with the type you’re tracking (“Member”)
  • Scope determines whether this is user-level, session-level, or page-level (“1” i.e. user-level)

Event tracking

Here is where we can go crazy

{% highlight javascript %}
trackEvent(category, action, opt_label, opt_value, optnoninteraction)

{% endhighlight %}

We use these parameters like this:

  • category = Where the action happened (i.e. which route)
  • action = What was UI object was interacted with
  • opt_label = Qualifier on that interaction

{% highlight javascript %}

gaq.push([’trackEvent’, App.router.trackedRoute(), ‘Artwork clicked’, ‘Carousel’])

{% endhighlight %}

This means that if you’re on the homepage and you click the center artwork in the carousel, then an event is tracked with the parameters (Home, Artwork clicked, Carousel)

Examples of tracked events

Action, Label
Follow, Added
Follow, Removed
Save, Added
Save, Removed
Purchase Info, Hover
Purchase Info, Send
View In Room
Artist, Clicked
Artwork, Clicked
Gene, Clicked
Browse, From Header
Home, From Header
Collections, From Header
Browse, See More
Carousel, Viewed
Carousel, Scrolled

Many can happen from any route


You can analyze each of these parameters separately

  • For instance, what do users do when they get to the homepage?
  • Where do users open the browse menu most often from?
  • Where do users search from?
  • Where do users follow from?



  • Better event tracking
  • Track scrolling
  • Better user segmentation / custom variables
  • A/B testing
  • Refactor to make analytics more maintainable
  • Better testing of analytics
  • Internal analytics — inquiry requests, search logs, etc
Jump to Line
Something went wrong with that request. Please try again.