Monday, September 26, 2011

Client-Side Event Tracking with Sitecore Analytics

After the previous blog post about combining JavaScript and CSS, I decided to create more modules standardizing features that can be used out of the box at many websites.

Today I'll describe new module that allows tracking client-side events with Sitecore Analytics. Such feature is really important for today's highly interactive sites, and you'll see how easy it is to implement it for Sitecore.

After installing the module, you'll be able to track external file downloads, Ajax events and any kind of visitor interaction that does not cause the page to refresh (expanding / collapsing page areas, popup windows, etc.).

I've created simple JavaScript API and generic ASP.NET handler which tracks events with parameters passed to it using query string.

Client (JavaScript API)
It consists of several JavaScript functions. I'll just show how to use the API.
Note - I'm not a front-end developer, so there is a chance I'm not following some JsvaScript best practices. If that's the case - do not hesitate to let me know about it, I'll be glad to improve the code.
Basically, all we need is to create the event (AnalyticsPageEvent(name, text, key, data, integer)), and then trigger it. You can use any combination of parameters supported by Sitecore Analytics API.

var event=new AnalyticsPageEvent('Instant Demo', 'Some Text Here');

The code is pretty simple - it's just 1 kb of pure JavaScript. It works fast, does not block UI and is based on the widespread technique for dynamic resource loading - adding script tag to the page.

Server (Generic Handler)
First of all, it reads query string parameters:

var query = context.Request.QueryString;
            var eventName = query["eventName"];
            var text = query["text"];
            var key = query["key"];
            var data = query["data"];
            var integer = query["integer"];

most of them are optional. Then we should enable Analytics and disable tracking of the current request.


After that, just trigger the event at the previous page.


Also, it makes sense to setup a new set of goals / events -

All you need to do to get started with the module is to download it here, and install the package. Then update web.config (this step is not mandatory, it just improves performance) - add the following string to the "IgnoreUrlPrefixes" setting: /ClientEventTracker.ashx.
Then add the following code to the head section of the page:
<script src="/ClientEventTracker.js" type="text/javascript"></script>
And use the API as it shown in the example above. The results will be available in standard Sitecore Analytics application. Also, it should be possible to implement advanced reports / filters based on client-side events data.

Performance question is a quite interesting one. If you will track only important actions, it should not be a problem at all. I've ran some tests using jMeter, my laptop handles up to 300 requests per second easily, average response time is 4ms per request. If you track a lot of stuff to OMS - - increasing the value of the following setting in Sitecore.Analytics.config can be a good idea:
<setting name="Analytics.MaxQueueSize" value="500">
I'm planning to continue to develop the module - add DMS support and extend API (visitor profile support, etc.) in future. Please share your feedback and suggestions - they will influence the module development.