Analytics
Office Hours: Today, 4-5:30pm�(No Office Hours Tomorrow)�
Analytics Engines
Analytics engines tracks user interaction with a website through “tracking codes” added to a website.
Google Analytics
The CS 205 website (and all published visualizations) includes Google Analytics. Each site has the boilerplate “tracking code”:
Google Analytics
Google Analytics tracks interactions based on a arguments passed to a single JavaScript function: ga().
In the boilerplate:� ga("send", "pageview");
The ga Function:
Google Analytics’ ga function provides access to all of the tracking functionality:
ga(command, [...fields], [fieldsObject]);��We will focus on the command "send".
Full ga API: https://developers.google.com/analytics/devguides/collection/analyticsjs/command-queue-reference
The ga("send", ...) Function:
Prototype:� ga("send", hitType, [...fields], [fieldsObject]);��Where hitType can take one of the following values:� "pageview": user visits a new page� "event": user performs some event� "social": user makes a social or social media interaction� "timing": records the time a user spends on something
Full evet API: https://developers.google.com/analytics/devguides/collection/analyticsjs/events
The ga("send", ...) Function:
Prototype:� ga("send", hitType, [...fields], [fieldsObject]);��Where hitType can take one of the following values:� "pageview": user visits a new page� "event": user performs some event� "social": user makes a social or social media interaction� "timing": records the time a user spends on something
Full evet API: https://developers.google.com/analytics/devguides/collection/analyticsjs/events
The ga("send", "event", ...) Function:
Prototype:� ga("send", "event", [eventCategory], [eventAction], � [eventLabel], [eventValue], [fieldsObject]);�
3,033,704 interactions
“Every Gen Ed at UIUC, by GPA”
Analytics in Action
Fiona and Caroline’s visualization has two different events:
1
User clicks a checkbox
2
User mouses/taps a course
Analytics in Action
var updateByCheckboxes = function(forced) {� // Finds all fields <input type="checkbox"> in the HTML that are checked,� // return their data-filter property value, and output those values as an array:� // ex: filters == ["Non-Western Culture", "Quantitative Reasoning"]� var filters = $('input[type="checkbox"]:checked').map(function() {� return $(this).data("filter");� }).get();�� // Convert the array of filters to a string� last_filters = filters.toString();
/* ... */�� // Send the event to Google:� ga('send', 'event', 'mouseover', 'filter', last_filters);�};
1
User clicks a checkbox
Analytics in Action
svg.selectAll("grade")� .data(data)� .enter()� .append("circle")� .attr("class", "gened_circle")� /* ... */� .on('mouseover', function(d, i) {� /* ... */�� // Send the course name that was moused over to Google:� ga('send', 'event', 'mouseover', 'course', d["name"]);� })
2
User mouses/taps a course
Looking at All Data Driven Discoveries...