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');
  event.trigger();

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.

AnalyticsTracker.StartTracking();
AnalyticsTracker.Current.Cancel();

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

AnalyticsTracker.Current.PreviousPage.TriggerEvent(eventName);

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.

8 comments:

  1. Hey, we must implement that on our project :) . Very nice stuff

    ReplyDelete
  2. What happens if the control you want to track is an asp:Button that has a PostBackUrl on it? PostBackUrl returns before the front end tracking finishes. Right? (i'm fighting with it as we speak. And loosing.)

    ReplyDelete
  3. If you have a button that causes postback, you can simply track events using Sitecore API (in C#/VB.NET)

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. I cannot track events like that since the page is doing the postback before the call is done.

    asp:Button runat="server" PostBackUrl="http://www.mypage.com/Login.aspx" OnClientClick="ValidateLogin()"

    In the ValidateLogin function i am doing what you are showing in this post but tracking does not occur.

    ReplyDelete
  6. If your button causes postback, you can define onclick handler like this:

    asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click"

    And then just trigger event from C# code:

    protected void Button1_Click(object sender, EventArgs e)
    {
    AnalyticsTracker.Current.TriggerEvent("Some Event");
    }

    ReplyDelete
  7. Thanks for this, its a great help. I was wondering if you have ever encountered a situation where the ItemId is not being logged? Is this the normal behavior? I was assuming that in the PreviousPage.TriggerEvent() snippet above, it was triggering the event on the page that sent the ajax request.

    ReplyDelete
  8. Greetings, I would like to also track the user id. Since we will have single-sign-on, including the user id is critical to tracking user adoption across various features of our web application.

    Thanks for posting this event tracking solution!
    Amy

    ReplyDelete