Google Analytics, Event Tracking & Discovery Tools

Google Analytics, EventTracking and Discovery Tools Going Beyond Pageviews Emily Lynema, Associate Head, IT, NCSU Libraries Adam Constabaris, Singe de Code, NCSU Libraries Code4Lib, February 2013

Overview Google Analytics can be used to track not only pageviews,but in-page events, allowing you to understand more about how your site is being used.Have real patron data to make data-driven design decisions.

Google Analytics Event TrackingYou decide what to track Which 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 Findings various 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 to view full text)Picked the things that were easiest to track and seemed most durable, rather than most desired

What are we tracking? Searches Sorting Paging Facet activityMost difficult to identify: user clicks to view full text. So we didnt go there.

Interesting Findings November 2012 - February 2013

Paging is more popular than facets

Content Type and Subject are basically the only facets

The Plumbing Of course it involves jQuery!It doesnt have to, but thats how we did it.

GA Event Tracking API/ sfl iiilz _a;i G lasatryu cd, / aey ntaie gq f A od fe or oe/ ayeet arayi teqeewl b sn t teGo. / n vns led n h uu il e et o h ogvr_a =_a | [; a gq gq | ].. ._a.uh[ gqps( takvn _rcEet, eetaeoy vnCtgr, eetcin vnAto, otoa_vnLbl pinleetae, otoa_vnVle pinleetau]; )

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 the label, you may also add a value. Picking values for thesethings (and whether you use 2, 3, or 4 of them for any given event) 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 Attributes Actionable metadata! “User agents must not derive any implementation behavior from theseattributes or values. Specifications intended for user agents must not define these attributes to have any meaningful values.” WHATWG (2013-02-05)

Huh?d t - attributes give you a place to put data for use by aa*your scripts. Browsers shouldnt try to do anything withthem, and you probably shouldnt use them to add visual styles. jQuerys data API is supported in all browsers jQuery supports.

How to Use em d t - attribute names must be lower case and may aa*contain dashes as separators. The d t - a a prefix is stripped and the rest is converted to camel case when you access them in your scripts.e.g. a d t - o - a attribute in HTML is accessed under aafobr the name f o a in a script. oBr

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 Implementation HTML< he=#ac dt-aeet"eodTbMR"Mr Rcr<a a rf"mr" aag-vn=Rcr,a,AC>ac eod/> jQuery API$"[aag-vn])o(cik,fnto(v){ (adt-aeet".n"lc" ucinet / dt-aeet= "avn" / aag-vn > gEet vrdt =$ti)dt(gEet)slt""; a aa (hs.aa"avn".pi(,) dt.nhf(_rcEet) aausit"takvn"; / dt = [_rcEet,Rcraac] / aa = takvneod,Tb,Mr _a.uhdt) gqps(aa;}; )

Really, Thats It? Yes.Ok, no. But that is the basic technique. Later, Ill try to scare you.

When its Not Your MarkupThe declarative technique shown so far works well if you are generating the pages. What if you want more info on how people are using an externally hosted service where you dont 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 Reidsmas Summon Stats (github project) showedus how to load external JavaScript onto our Summon pages. For other services, if theres no direct support for it, try playing with the site customization features.

DifferencesMore selectors.Selectors may need to use specific location in the DOMinstead of i and c a s d l s attributes.Tracking data now needs to be computed instead ofasserted.

Example/ fo orcso smo-nltc.s / rm u utm umnaayisj$"pgNvgto ahe^sac".lc( (#aeaiain [rf=/erh])cik fnto(v){ ucinet vrln =$ettre) a ik (v.agt; vrl =$ti(iktx() a t .rmln.et); i (l = "et ){ f t = Nx" l =" +(hsae+) t " tiPg 1; }es i (l = "rv ){ le f t = Pe" l =" +(hsae-) t " tiPg 1; } lgvn(Pgn" "ae,l) oEet"aig, Pg" t; });

Explorations Testing and Debugging AJAX Content Selector Strategies Tracking Tweaks

Troublerebuking, Debugging, and Testing Be proactive! Set up a safety net first Make friends with your browsers dev tools/debugger. use g _ e u . s a d b g j while developing (*)

“Fire it up and see if it works?” We found that it can take up to a day for an event to show up 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 to the third party

Working With a Net 1. Write testable code 2. Write tests 3. Run the tests

Why So Much Emphasis on Testing?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 AJAX Content We are tracking some events sent when users click on content 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 elementsthat dont 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. / orctlglastasomdEDXLvaXRwe uesciko tec / u aao od rnfre A M i H hn sr lc n h otn tb net a $"cnet".n"lc" "EDdoik,fnto(v){ (#otns)o(cik, .A_aln" ucinet lgAvn((hs,[UL,DgtzdCnet,CC]; oGEet$ti) Riiie otnC) }; )

On Selector Strategy (Your Markup)* d t - a e e t matches all elements with tracking [aag-vn]data, but is potentially very slow; the data we arecollecting can be valuable, but you dont want to frustrateyour users trying to get it.If you use a CSS class in concert with it (e.g.. r c e [ a a g - v n ]its both faster and you takddt-aeet,can 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.jQuerys 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 Tracking Troubleshooting Guidedata-* attributes (WHATWG)jQuery.data() APISummon Stats

http://cynng.wordpress.com	196
http://lanyrd.com	1
https://twitter.com	1

Google Analytics, Event Tracking & Discovery Tools

by ejlynema on Feb 13, 2013

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 198

Statistics

Google Analytics, Event Tracking & Discovery Tools Presentation Transcript