Silverlight Tips provides simple and useful tutorials and tips with real life examples, live demos and sample codes to download.
About authors:
Damon Serji
Damon Serji,
Silverlight developer working at Metia in London.
Gavin Wignall
Gavin Wignall,
Interactive Design Lead, working in design for over 10 years, the last 3 being in Silverlight.
Allan Muller
Allan Muller,
Developer, working on various types of Silverlight and WCF projects.
Recent comments

As you may be aware, Google Analytics does not track any actions such as click and etc from inside Silverlight applications. To overcome this issue and track the actions made by users on a Silverlight application we need to manually report to Google the actions. We do this using “Event Tracking” feature on Google Analytics.

Above screen shot shows how the data show in Google Analytics once they are captured in Event Tracking. In the screen shot: Homepage, Home – video player and Products page are categories. Each category then has a list of Event Actions and each action could have a label to provide more details about that action, for instance you could have: ‘Homepage’ > ‘Clicks’ > ‘Logo Image’, which displays how many times the ‘Logo Image’ was clicked from the homepage of the site.

The process of tracking actions in Silverlight is very simple, it consists of capturing the actions and passing them to Google Analytics using a JavaScript function that Google provides us in their tracking code.

The first thing I would do in setting up tracking for my Silverlight application is to create a separate class in the main Silverlight project to managed the all tracking code. I then can use this class everywhere within my application and pass to it the required parameter for tracking. This way if I decided to change something in my tracking code, or use a complete different application for my tracking i.e. Webtrends, I then only need to change my code in one place and the rest of code remains as before.

1. create Tracking class

namespace SilverlightGoogleAnalytics.Tracking
{
    public class Tracking
    {
    }
}

A. declare some private variables for passing required parameters to the analytics:

private string category;
private string resourceLabel;
private string groupType;
private string action;
private static Tracking _instance;

B. create an instance of the Tracking class as a property

public static Tracking Instance
{
    get
    {
        if (_instance == null)
        {
            _instance = new Tracking();
        }

        return _instance;
    }
}

Instance is a static public variable that holds a reference to the Tracking class itself. You will see later how we use this property to access its Tracking’s public methods.

C. create a public method to receive parameters and pass to the analytics:

public void Track(string trackingCategory, string trackingResourceLabel, string trackingAction)
{

    category = trackingCategory;
    resourceLabel = trackingResourceLabel;
    action = trackingAction;
    SendTracking();
}

public void Track(string trackingCategory, string trackingAction)
{
    category = trackingCategory;
    action = trackingAction;
    resourceLabel = "";
    SendTracking();
}

The Track methods (note they both are called Track but have different signatures) take the tracking data: category, resourceLabel and action.

D. send the data to “trackEvent” JavaScript function
now that we have the tracking information we simply call a private method which sends the data to our JavaScript function (see step 2) using Invoke method for being sent off to Google Analytics:

private void SendTracking()
{
    HtmlPage.Window.Invoke("trackEvent", category, action, resourceLabel);
}

We don’t need to do anything else with this class, from now on we can simply use this track whenever we need to pass some tracking data to Google Analytics.

2. JavaScript function to pass parameters to Google Analytics
this is the code we need for passing the data to Google Analytics to save it as an event:

function trackEvent(category, action, opt_label, opt_value) {
    pageTracker._trackEvent(category, action, opt_label, opt_value);

}

Here I added this to a separate JavaScript file called Tracking.js, but you can also add it straight to your html/asp page inside script tags.
The default script that Google provides you for the analytics remain as they are.

3. Calling Tracking class from your code and passing tracking values
first create a private variable to hold a reference to your Tracking class:

private Tracking.Tracking tracking;

Now initialize your variable in your constructor or Loaded method:

tracking = new SilverlightGoogleAnalytics.Tracking.Tracking();

Now you can call the Track methods within Tracking class anytime needed. i.e.:

tracking.Track("SilverlightApplication", "Loaded");

Here I called the Track method within tracking that takes two parameters: Category and Action. I could also pass another parameter (resource label) for instance:

tracking.Track("Homepage", "Click", "ClickButton");


Improving your code:
The above code works perfectly fine, however this was a small project, if you were dealing with a much bigger scale project then you wouldn’t want to type in the category, action and resource label every time you have to pass the parameters because you could end up with inconsistent data or typo errors.

One solution to this is to use Enum variables for either category, action or resource label. So whenever you have to pass a action you just select it from the list of available actions and if it wasn’t there you can add it to the list so next time you can use the same action and not end up with an inconsistent report like: “Homepage > ClickButton > Clicked” and “Homepage > ClickButton > Mouse Click”

1. create a new class in your Silverlight project and call it Enums.

2. create required enum types

namespace SilverlightGoogleAnalytics.Enums
{
    public enum TrackingCategories
    {
        SilverlightApplication,
        Homepage
    }

    public enum TrackingGenericLabels
    {
        ClickButton
    }


    public enum TrackingActions
    {
        Click,
        Load
    }
}

3. use the created enum types to pass values

tracking.Track(Enums.TrackingCategories.Homepage.ToString(), Enums.TrackingGenericLabels.ClickButton.ToString(), Enums.TrackingActions.Click.ToString());

Posted by Damon Serji on 26. January 2010 10:29 under: Intermediate
 with 2 Comments