Event (analytics) tracking in Silverlight
A few days ago Google announced “event tracking” for their Google Analytics platform. My account was invited to participate in this initial wave so I decided to take a look. The main reason of course is because of a keyword in their email they sent to me (emphasis mine):
“Event Tracking allows you to track interactions with Web 2.0 style content such as Flash, AJAX, Silverlight, social networking apps, etc.”
I have the script already running on my site for general analytics so I figured I’d whip up a quick sample to see how it might work with Silverlight. If you are in to analytics you may also want to check out Michael Scherotter’s webcast with WebTrends on some analytics techniques with Silverlight as well.
There are a bunch of existing techniques you can do today using existing analytics packages and scripts, but it is really nice to see movements toward recognizing unique characteristics of rich Internet application activities and the need for something more granular that represents user behavior rather than just a view. After all, “paths” for normal web browsing have been available for analytics for a long while…why should RIA have to suffer? The main reason is that no analytics packages have successfully managed yet to provide enough artificial intelligence to reflect on the behavior within the RIA. As RIA development becomes more mainstream in applications facing the consumers, it will be increasingly important to understand where/what the user’s are doing to discern better usability changes, etc.
Google calls their feature “event tracking” and enables a function on the existing script to track an event, much like a Windows event log (for those who are familiar with it). You provide a category and action, then optionally a label and value (where value is an integer value, generally going to be used I assume for counts of actions). The “action” doesn’t have to actually be an literal action such as “click” but something you can put together.
In my less-than-creative mind I just thought of putting together two category scenarios: media and e-commerce. My commerce actions would be: Add Item to Cart, Sample Music (i.e. a music store action), Start Checkout, Complete Order…all rolled up in a Commerce category. My Media category would include Play and Pause tracking. The signature of the event tracking method in Google is:
1: _trackEvent(category, action, [label], [value]);
This would be called on your variable given to whatever your _getTracker() call was made with (mine is called pageTracker, using the default from the script).
NOTE: This post assumes you know some of the terminology from Google analytics offering. If you don’t, you can read about it at their Analytics page.
Since all of this was Javascript calling from Silverlight I’d have to use the HTML bridge capabilities. You can learn how to call Javascript from Silverlight from here or view a walk-through video on how to do it on the Silverlight community site as well. I created a simple function on my page that basically wrapped the actual function call. Honestly I figured it would be here that you may want to do some error handling or any other event-based “stuff” – but for now, it’s pretty much just a wrapper to the same function and looks like this:
1: <script type="text/javascript">
2: var pageTracker = _gat._getTracker("PROFILE_CODE_HERE");
3: pageTracker._initData();
4: pageTracker._trackPageview();
5: </script>
6:
7: <script type="text/javascript">
8: function trackEvent(category, action, label) {
9: pageTracker._trackEvent(category, action, label);
10: }
11: </script>
As you can see, in my sample I wasn’t concerned with the value parameter for now. Now in my Silverlight application I just created some lame looking XAML that would more generally be spread out throughout a typical application, but just for playing I put it in one place. Here’s the XAML:
1: <UserControl x:Class="GAEventTracking.Page"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="400" Height="600">
5: <Grid x:Name="LayoutRoot" Background="White">
6: <StackPanel Orientation="Vertical">
7: <Button Width="200" Content="Added Item to Cart" x:Name="AddCart" />
8: <Button Width="200" Content="Sampled Music File" x:Name="SampleMusic" />
9: <Button Width="200" Content="Started Checkout" x:Name="StartCheckout" />
10: <Button Width="200" Content="Completed Order" x:Name="CompleteOrder" />
11: <MediaElement x:Name="LakeVideo" Width="320" Height="240"
12: Source="Lake.wmv" AutoPlay="False"/>
13: <StackPanel Orientation="Horizontal">
14: <Button Content="Play" x:Name="PlayVideo" />
15: <Button Content="Pause" x:Name="PauseVideo" />
16: </StackPanel>
17: </StackPanel>
18: </Grid>
19: </UserControl>
On the relevant code I’ve wired up the buttons to the same event handler for simplicity and just looking at the name and content for what to do. Here’s what that looks like:
1: public Page()
2: {
3: InitializeComponent();
4: AddCart.Click += new RoutedEventHandler(EventButtonClick);
5: SampleMusic.Click += new RoutedEventHandler(EventButtonClick);
6: StartCheckout.Click += new RoutedEventHandler(EventButtonClick);
7: CompleteOrder.Click += new RoutedEventHandler(EventButtonClick);
8: PlayVideo.Click += new RoutedEventHandler(PlayVideo_Click);
9: PauseVideo.Click += new RoutedEventHandler(PauseVideo_Click);
10: }
11:
12: void PauseVideo_Click(object sender, RoutedEventArgs e)
13: {
14: LakeVideo.Pause();
15: HtmlPage.Window.Invoke("trackEvent", new object[] { "Media", "Pause", "Lake video was paused" });
16: }
17:
18: void PlayVideo_Click(object sender, RoutedEventArgs e)
19: {
20: LakeVideo.Play();
21: HtmlPage.Window.Invoke("trackEvent", new object[] { "Media", "Play", "Lake video was started" });
22: }
23:
24: void EventButtonClick(object sender, RoutedEventArgs e)
25: {
26: Button btn = sender as Button;
27: string actionName = btn.Name;
28: string label = btn.Content.ToString();
29:
30: HtmlPage.Window.Invoke("trackEvent", new object[] { "Commerce", actionName, label });
31: }
So you can see here at line 30 above is where the relevant code is. Using the HTML bridge, I can invoke a method on the hosting page and provide the arguments to it. That’s it! So what does this look like on the reporting side?
For a summary view of the categories you’ll get some decent information about the action:
But then when you also drill into a specific category, your label information will be viewable:
So that now using methods like this you could track specifically what is going on within your RIA. As I mentioned, you can do this with existing platforms today with being clever of how you track a “PageView” but it is nice to see a specific implementation for event-driven tracking. And this isn’t limited to just RIA, you can still (obviously) use this event tracking in your AJAX applications, static pages, whatever.
The Google links demonstrated how to implement this with ActionScript and Flash, but while they mentioned Silverlight, they didn’t provide a relevant sample. Luckily basically the steps are as easy as outlined here:
- Include the tracking script
- Decide what/when/where you want to track within your Silverlight application
- Use the HTML bridge (Html.Window.Invoke) to call out to the _trackEvent function
Again the relevant code for Silverlight is:
1: HtmlPage.Window.Invoke("[methodName]", new object[] { "[category]", "[action]", "[label]"});
Where the “[methodName]” is whatever Javascript function you are calling that exists in the hosting page (and matching the proper signature you’ve set up. As I mentioned I didn’t use the optional value parameter in the event tracking, but had you done that (say you wanted to know how many times a media item had been played) you’d add a value of “1” for example and the reporting would provide aggregate summaries of that action within the category.
Have fun and hope this helps some!
