EPiServer and programmer friendly analytics with _tics.js

Writing web analytics client side code should be really simple, and programmer friendly. If simple and programmer friendly, teams will have control over the production code they are maintaining, knowing what it actually does. To support that, I wrote a little JavaScript helper library called _tics.js a while ago.

The main features of _tics.js are (besides basic page tracking) advanced event tracking of form fields, buttons and links, including grabbing field values, value changes and the position of clicked links in a banner list or a menu.

What is _tics.js and why should I use it? Read about the features here.

I recently tried out some of the features of EPiServer 8 and came across the new Google Universal Analytics support. My first thought was: Can I use it with the features of _tics.js?

Yes, and here's how.

EPiServer Google Universal Analytics and _tics.js

All you have to do is provide _tics.js with a Tracking Id and the Tracking domain. With the new Google Universal support of EPiServer 8 (installed via the EPiServer NuGet feed), the values are added by an editor in the EPiServer CMS admin view. I have experimented and found a way to grab those values, and it can be done by using the Accessors class in the GoogleAnalytics.Services namespace.

var settings = EPiServer.GoogleAnalytics.Services.Accessors.GetTrackerSettings();

You can now provide the data to the client. 

Here's an example. I have used the Alloy MVC template (and perhaps written the C# model code a bit sloppy, but I leave the clean code implementation to you).

Grabbing the analytics values and storing them in the View Model.

Storing the analytics values in html hidden fields. Initializing _tics.js with data.

With the _tics.events() function, changes in individual form fields will be tracked and will make it possible to analyze user behavior.

In this example, the standard _tics.page() function is not used (i.e. basic page tracking), because it is already being done by the generated analytics code from the EPiServer Google Analytics Nuget package.

Note: Client side code from EPiServer add-ons is rendered by using the Html helper method RequiredClientResources, already used in the Alloy template:
@Html.RequiredClientResources("Header"); 

More features?

What about advanced tracking of form fields, like grabbing the actual values and/or the changes in individual fields? The _tics.js library expect form fields to have data attributes (read more about it here). But when using EPiServer XForms, all an editor can add is custom CSS and none of those fancy data attributes. Oh no!

Relax. I have written a little JavaScript "add-on", called _tics.cms.js, that solves this for you.

You will find it in the _tics.js GitHub repository (look in the folder called "add-ons"). Include it in your code and run the function _tics.cms.prepareForm().

Add the script and run _tics.cms.prepareForm() before initializing the library.

It checks for CSS class names and adds the corresponding data attributes to the element.

An example: this is what the editor writes in the CSS field if wanting to grab the value of an individual field (using the "getValue" built in function in the library). Please note that it is case sensitive: analyze-custom-getValue

And that's it.

Simple? Programmer friendly? What do you think about it? Please share your feedback!