Silverlight has brought greater interaction and experience to web users. However, when it comes to SEO and web statistics, it is probably not the best solution. Imagine you need to track down what visitors do in your web site. You need to integrate a statistics framework into your web site. You can create your own or integrate an existing one. What are the advatages of using an existing analytics framework?
- you just sign in for an account and start using it – simple and fast
- you have an access to a wide range of statistics – graphical and textual
There are many analytics vendors. One of them is Google Analytics – the one I will use to demonstrate its integration into Silverlight in my post.
To ease our work, Microsoft has created a framework, called Microsoft Silverlight Analytics Framework. Goals of that frameworks are:
- Support out-of-browser scenarios
- Support offline scenarios
- Support multiple analytics services simultaneously without impacting performance
- Support for designers in Microsoft Expression Blend to add tracking to applications without coding
- Support A/B Testing
- Support SketchFlow Prototypes
Let’s see how it works. Before starting you must ensure you have the following components installed on your computer:
- Silverlight 4
- Expresson Blend 4 SDK (or Expression Blend 4)
- Microsoft Silverlight Analytics Framework
First you need to download the framework. Then add the following references to your project:
- System.Windows.Interactivity.dll
- Microsoft.WebAnalytics.dll
- Microsoft.WebAnalytics.Behaviors.dll
- Google.WebAnalytics.dll
In most of the cases you would need Google Analytics with a Navigation Silverlight Application. But I will also demonstrate how you can track down other activities (except changing the url). In order to put Google Analytics into work, you must attach a behavior to your top layout element in the main page.
|
1 2 3 4 5 6 |
<Grid x:Name="LayoutRoot" Background="White"> <interactivity:Interaction.Behaviors> <ga:GoogleAnalytics WebPropertyId="" /> </interactivity:Interaction.Behaviors> ... <Grid> |
The WebPropertId is your Google analytics key. It looks like UA-00000000-0. Now you need to indicate what you want to track down. You can do tihs using event triggers. In our case we want to track down page changes so we will put a trigger to the Navigated event of our navigation frame.
|
1 2 3 4 5 6 7 |
<navigation:Frame UriMapper="{StaticResource myMapper}" Source="/Views/Home.xaml"> <interactivity:Interaction.Triggers> <interactivity:EventTrigger EventName="Navigated"> <msafb:TrackAction Category="Navigation" Value="1" /> </interactivity:EventTrigger> </interactivity:Interaction.Triggers> </navigation:Frame> |
The Category property indicates a category. The Value one is an integer. It indicates how much the statistics will be increased for that track action. Let’s see what is happening.
Notice the URL above. Enter something in the textbox and click the button. You will go to another page.
If you check the reuqests the application has made, you will see the following one:
http://www.google-analytics.com/__utm.gif?utmac=UA-00000000-0&utmcc=__utma%3D0.1536915019.1289736044.1289736044.1289736044.1%3B&utmwv=4.4wp7&utmn=1316222758&utmt=event&utme=5(Navigation*Navigated*)(1)8()9()11()&utmcs=utf-8&utmul=bg-bg&utmsr=1440×460&utmsc=32-bit&utmdt=SilverlightAnalytics&utmp=/SilverlightAnalyticsTestPage.aspx/Views/Items.xaml?name=bag&utmhn=localhost&utmr=0
The utmdt parameter in the query string contains your URL and utme contains custom data for the statistics. In our case it contains the name of the event, the category name and the value.
Isn’t it easy? The coolest thing is that you can put as many behaviors as you want and you will have your Silverlight application integrated with many analytics vendors.
In one of the next posts I will show you how to send custom data to Google Analytics.