Measuring Product Design<br />Using Google Analytics<br />Doug Lee  .  Big Bad Goose<br />
Introduction<br />Why measure product design?<br />Who is visiting, and what are they doing?<br />What parts of my UI are ...
gack.js - Google Analytics event tracker <br />gack.js is a tiny utility to help make tracking easier<br />It's a simple w...
Instrumentation<br />1. include libraries<br />include jquery<br />include and init ga.js<br />include gack.js<br />2. dec...
Program<br />Hierarchy<br />Categories	 very few of these<br />Actions	 more of these<br />Labels	 specifics about the ...
ui		 user manipulated UI
conversion	 user moved along a conversion
demand	 user clicked on a feature we are thinking about
diligence	 user viewed info of interest</li></li></ul><li>Sample Page<br />
Upcoming SlideShare
Loading in …5
×

Designerfair 2011

414 views

Published on

product analytics program

Published in: Design, Technology, Business
  • Be the first to comment

  • Be the first to like this

Designerfair 2011

  1. 1. Measuring Product Design<br />Using Google Analytics<br />Doug Lee . Big Bad Goose<br />
  2. 2. Introduction<br />Why measure product design?<br />Who is visiting, and what are they doing?<br />What parts of my UI are working?<br />Can we forecast feature demand?<br />How do you measure product design?<br />Track user actions<br />Any javascript event can be recorded in Google Analytics (GA)<br />User input: clicks, selections, mouse events<br />Derived actions: time on page, scroll distance<br />
  3. 3. gack.js - Google Analytics event tracker <br />gack.js is a tiny utility to help make tracking easier<br />It's a simple wrapper named GA around the GA_trackEvent() method<br />https://github.com/duggi/gack<br />
  4. 4. Instrumentation<br />1. include libraries<br />include jquery<br />include and init ga.js<br />include gack.js<br />2. decorate html with event metadata<br /><a href="#" data-gae="ui.sort.alpha" class="GAE-click">sort A-Z</a><br />category<br />action<br />label<br />css classname hook<br />3. data collector<br />$('.GAE-click').click(function() {<br /> GA.trackEvent($(this).data('gae').split('.'));<br />});<br />
  5. 5. Program<br />Hierarchy<br />Categories  very few of these<br />Actions  more of these<br />Labels  specifics about the action<br /><ul><li>Categories
  6. 6. ui  user manipulated UI
  7. 7. conversion  user moved along a conversion
  8. 8. demand  user clicked on a feature we are thinking about
  9. 9. diligence  user viewed info of interest</li></li></ul><li>Sample Page<br />
  10. 10. Sample Page<br />
  11. 11. Report<br />more interest in colors<br />more interest in github<br />more interest in qr code<br />
  12. 12. Thank You!<br />http://www.bigbadgoose.com<br />https://github.com/duggi/gack<br />

×