Google Analytics, EventTracking and Discovery Tools

Going Beyond PageviewsEmily Lynema, Associate Head, IT, NCSU Libraries

Adam Constabaris, Singe de Code, NCSU Libraries

Code4Lib, February 2013

OverviewGoogle Analytics can be used to track not only pageviews,

but in-page events, allowing you to understand more abouthow your site is being used.

Have real patron data to make data-driven design decisions.

Google Analytics EventTracking

You decide what to trackWhich user actions?How should they be categorized?

Use simple JavaScript to push events to GoogleEnjoy Google Analytics' feature-full reporting interface

Event Tracking Use Cases

Hidden or externally loaded (AJAX) content

Hidden or externally loaded (AJAX) contentInternal links that occur in multiple places

Hidden or externally loaded (AJAX) contentInternal links that occur in multiple placesExternal links

NCSU Catalog Activity (*)Tracking LOTS of things

(*) But not all of them for very long

What are we tracking?Results List clicksFacet expand / closeFacet checkboxesSend search out to TRLN / WorldCat / SummonFull record toolsFull record tabsLocation tab clicks (request, browse, full text)External URLs on the full record (finding aids, full text)Browse (shelf browse / subject browse)

Interesting Findingsvarious dates

Whoa....look at those tabs.

Note: February 5-7, 2013

Wait...do I see MARC??

Note: February 5-7, 2013

A small link can overpower a fancy widget

Note: November - February, 2013

Having a link in more than one place can be helpful

Note: January - February, 2013

Users make some decisions from the results list

Note: February 5-7, 2013

But they still like to look at the full record

Note: February 5-7, 2013

NCSU Summon Activity (*)Tracking fewer things

* Some things are almost impossible to track (ex: clicks toview full text)

Picked the things that were easiest to track and seemedmost durable, rather than most desired

What are we tracking?SearchesSortingPagingFacet activity

Most difficult to identify: user clicks to view full text. So wedidn't go there.

Interesting FindingsNovember 2012 - February 2013

Paging is more popular than facets

Content Type and Subject are basically the only facets

The PlumbingOf course it involves jQuery!

It doesn't have to, but that's how we did it.

GA Event Tracking API

// safely initialize _gaq; if GA loads after your code,// any events already in the queue will be sent to the Goog.var _gaq = _gaq || [];..._gaq.push([ '_trackEvent', eventCategory, eventAction, optional_eventLabel, optional_eventValue ]);

Event OverviewTo track an event of a given type, you need a category and an

action. Optionally, you can add a label and, if you add thelabel, you may also add a value. Picking values for these

things (and whether you use 2, 3, or 4 of them for any givenevent) is up to you.

Implementation IssuesQ1. Where do we get the data for the GA API call?Q2. How do we send events when "the right things"happen in the UI?A1. HTML5 Data AttributesA2. jQuery (or similar)

HTML5 Data AttributesActionable metadata!

(2013-02-05)

“User agents must not derive anyimplementation behavior from these

attributes or values. Specifications intendedfor user agents must not define these

attributes to have any meaningful values.”WHATWG

Huh?data-* attributes give you a place to put data for use byyour scripts. Browsers shouldn't try to do anything withthem, and you probably shouldn't use them to add visual

styles.

jQuery's data API is supported in all browsers jQuerysupports.

How to Use 'emdata-* attribute names must be lower case and may

contain dashes as separators. The data- prefix is strippedand the rest is converted to camel case when you access

them in your scripts.

e.g. a data-foo-bar attribute in HTML is accessed underthe name fooBar in a script.

Putting it Together1. Nail down your event taxonomy2. Edit markup3. Add handlers for the events you want to track4. Sit back and wait for the money data to roll in

The ImplementationHTML

jQuery API

<a href="#marc" data-ga-event="Record,Tab,MARC">Marc Record</a>

$("a[data-ga-event]").on("click", function(evt) { // data-ga-event => "gaEvent" var data = $(this).data("gaEvent").split(","); data.unshift("_trackEvent"); // data == ['_trackEvent','Record','Tab','Marc'] _gaq.push(data);});

Really, That's It?Yes.

Ok, no. But that is the basic technique.

Later, I'll try to scare you.

When it's Not Your MarkupThe declarative technique shown so far works well if you are

generating the pages. What if you want more info on howpeople are using an externally hosted service where you

don't control the HTML, such as Summon?

Not Your Markup (cont.)Find a way to inject your javascript (and, if needed, GA)onto the page.Add tracking data to elements programmatically.

Inject JavaScriptMatthew Reidsma's (github project) showedus how to load external JavaScript onto our Summon pages.

For other services, if there's no direct support for it, tryplaying with the site customization features.

Summon Stats

DifferencesMore selectors.Selectors may need to use specific location in the DOMinstead of id and class attributes.Tracking data now needs to be computed instead ofasserted.

Example

// from our custom summon-analytics.js$("#pageNavigation a[href̂='/search']").click( function(evt) { var link = $(evt.target); var lt = $.trim(link.text()); if ( lt == "Next" ) { lt = "" + (thisPage +1); } else if ( lt == "Prev" ) { lt = "" + (thisPage -1); } logEvent("Paging", "Page", lt); });

ExplorationsTesting and DebuggingAJAX ContentSelector StrategiesTracking Tweaks

Troublerebuking, Debugging,and Testing

Be proactive! Set up a safety net firstMake friends with your browser's dev tools/debugger.use ga_debug.js while developing (*)

“Fire it up and see if itworks?”

We found that it can take up to a day for an event to showup in the GA dashboard, so this is an error-prone and time

consuming testing strategy.

Test everything you can see and control before you send it tothe third party

Working With a Net1. Write testable code2. Write tests3. Run the tests

Why So Much Emphasis onTesting?

Unlike with a lot of other front-end JavaScript development,this is not a visual feature. Automated tests can keep you

from just collecting some really boring anecdotes.

Tracking Events in AJAXContent

We are tracking some events sent when users click oncontent that is loaded externally.

You may not control the markupThe tracked elements are not in the DOM when the pageis loaded, so you have to do a bit more work in yourselectors

AJAX Content Tracking (cont.)jQuery lets you specify handlers for events for elements

that don't exist yet, by (essentially) listening on an (existing)element that (will) contain them. This is not the only

approach, but is the easiest to work with.

// our catalog loads transformed EAD XML via XHR when users click on the content tab$("#contents").on("click", ".EAD_daolink", function(evt) { logGAEvent($(this), ['URL','Digitized Content','CCC']);});

On Selector Strategy (YourMarkup)

*[data-ga-event] matches all elements with trackingdata, but is potentially very slow; the data we arecollecting can be valuable, but you don't want to frustrateyour users trying to get it.If you use a CSS class in concert with it (e.g..tracked[data-ga-event], it's both faster and youcan temporarily disable tracking for some elementsshould you need to, by simply removing the class.

Tracking TweaksIn usability studies, I noticed some people cycle through the

tabs; so now we track each element once per page view.Whether you want to do this depends on your goals.

What are patrons doing before they click your chat button?You could track different events for those kinds of cases if

you maintain state locally.

jQuery's Data API can be used to write data onto elements.

This can probably get a bit crazy though.

Thanks for Listening!

LinksOfficial GA Docs

Event TrackingTroubleshooting Guide

data-* attributes (WHATWG)jQuery.data() APISummon Stats