Google Analytics, Event Tracking & Discovery Tools
-
Upload
ejlynema -
Category
Technology
-
view
3.907 -
download
1
description
Transcript of Google Analytics, Event Tracking & Discovery Tools
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