This document discusses measuring product design using Google Analytics. It recommends tracking user actions like clicks, selections, and mouse events to understand who is visiting a site and what they are doing. It introduces gack.js, a utility that helps make event tracking easier by wrapping the GA tracking method. It provides instructions for instrumenting pages by including libraries, decorating HTML with event metadata, and using a data collector to track click events. Program hierarchy and sample categories, actions, and labels are defined. Sample reports are shown to illustrate measuring user interest in different page features.
2. Introduction Why measure product design? Who is visiting, and what are they doing? What parts of my UI are working? Can we forecast feature demand? How do you measure product design? Track user actions Any javascript event can be recorded in Google Analytics (GA) User input: clicks, selections, mouse events Derived actions: time on page, scroll distance
3. gack.js - Google Analytics event tracker gack.js is a tiny utility to help make tracking easier It's a simple wrapper named GA around the GA_trackEvent() method https://github.com/duggi/gack
4. Instrumentation 1. include libraries include jquery include and init ga.js include gack.js 2. decorate html with event metadata <a href="#" data-gae="ui.sort.alpha" class="GAE-click">sort A-Z</a> category action label css classname hook 3. data collector $('.GAE-click').click(function() { GA.trackEvent($(this).data('gae').split('.')); });
