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.

In my previous posts I explaind how to use Google Analytics in Silverlight to track different information about users interaction with your Silverlight application.

One of the things you want to include in your tracking report is how many users who visited your site had Silverlight installed and how many didn’t. In addition, you might want to go in deeper details and find out more about users who didn’t have your required  Silverlight plug-in on their computers:

- how many had an older version of Silverlight – and which version did they have
- how many had/didn’t have a Silverlight compatible platform
- haw many of users without Silverlight plug-in clicked on “Download Silverlight plug-in” that you provided
- how many didn’t download the Silverlight plug-in and continued interacting with the “none-Silverlight” version of the application that you provided (if you provided any)

The source code for this project is available for download from CodePlex.

You can capture all above details and add to your analytics report.

Doing above tracking requires you to A. Find the required information about user, and B. Send them to your analytics software.

You can find all information about the user Silverlight support from Silverlight.supportedUserAgent.js file which is provided by Microsoft. You can download Silverlight.supportedUserAgent.js from Microsoft’s website.

However in order to send the right data to Google Analytics/Webtrends (or any other analytics software) you need to modify this file slightly to send the information when necessary:

1. add Silverlight.supportedUserAgent.js to your project
After downloading the Silverlight.supportedUserAgent.js file, add it to your Web project and call if from your Default.aspx (or any page that hosts your Silverlight application). You can call this file from the header, but just make sure it is called after your Tracking.js file (your tracking code).

2. add tracking code to Silverlight.supportedUserAgent.js
If you open this file and have a look, you will quite quickly notice there are a few if-else statements which checks different browser and OS to see which is the user using. Off course it depends how you like your report to be generated and what you would like to capture, but this is what I have done:

At the end of “if (slua.OS != 'Unsupported')” statement and just before the final closing curly bracket, add the following tracking code:

trackEvent("SilverlightApplication", "Platform supports Silverlight", "OS: " + slua.OS + " - Browser: " + slua.Browser);

Above code could generates a similar report to this:

Category: SilverlightApplication
Action: Platform supports Silverlight
Label: OS: Windows – Browser: IE5

So by seeing above report I know how many users did support Silverlight and what platform where they using.

Find and modify the “if (version == '2.0')” and “else if (version == '1.0')”  statements at the bottom of the page and change them to include tracking code like this:

if (version == '2.0') {
    trackEvent("NoneSilverlight", "Unsupported silverlight", "Silverlight Version: 2.0");
    return (supUA && (slua.OS != 'MacPPC'));
}

else if (version == '1.0') {
    trackEvent("NoneSilverlight", "Unsupported silverlight", "Silverlight Version: 1.0");
    return (supUA && (ua.indexOf('Windows NT 5.0') < 0));
}

Now you know if user had a different version of Silverlight, and can drill down in the report to find out which version did they have.

3. If your Silverlight application was loaded
Since it is not clear from above report if user actually saw your Silverlight application you can add the below code:

In your Silverlight object add the following parameter:


<param name="onload" value="onSilverlightLoad" />

And then add the following java script code to your Default.aspx page:
function onSilverlightLoad(sender) {
    trackEvent("SilverlightApplication", "Platform supports Silverlight", "SilverlightApp was loaded");
}

This piece of code will be loaded every time your Silverlight application is loaded.

4. if user interacts with the none-Silverlight version of your site/application
if (and you must always) prepared a none- Silverlight version, using above method you should now have a good idea on how to send the tracking code to your analytics software if Silverlight was not loaded for any reason and the user carries on interacting with your none- Silverlight version.

Hint: to add none Silverlight version you can add your HTML inside the <object> tag and right after the last <param> tag. Any code or text before the </object> will be displayed when you don’t have Silverlight installed/enabled.

And to send the tracking on i.e. links, add it to your onload or similar function/event.

5. Call CheckSupported()function
Finally, add this function to your page:

function CheckSupported() {
    var tst = Silverlight.supportedUserAgent();
    if (tst) {
        return true;
    }
    else {
        return false;
    }
}

And now call it from your Default.aspx just before to </body> tag. i.e.:


<script type="text/javascript">
    CheckSupported();
</script>   
</body>

Posted by Damon Serji on 10. February 2010 13:24 under: Intermediate
 with 1 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