Mark Monster

It’s already more than a year ago since Tim Heuer published his article on Event tracking in Silverlight. Since that time we’ve got Silverlight 3 and Silverlight 4 beta. So it’s time for a different implementation that can even be used by non-coders. This article will make use of Silverlight 4 beta, but in the end almost everything works on Silverlight 3 as well.

The idea

Create an Expression Blend Behavior that does all the tracking for me!

The implementation – Some Javascript

Blend Behaviors are extremely easy to use. Designers can use them without having knowledge on code and besides that they don’t dirty the business flow of the code. Also Behaviors can be used very easily in combination with DataTemplates and BindingExpressions.

Let’s start with the very beginning. On the html-page there needs to be some Javascript from Google Analytics to start the Analytics script.

<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
  try{
    var pageTracker = _gat._getTracker("UA-xxxxxx-x");
    pageTracker._trackPageview();
  } catch(err) {}
</script>

This is the generic Google Analytics script to start the normal tracking. Please make sure that you replace xxxxxx with your own Tracking Code you received from Google. The documentation around Tracking Events is very good. The important part is that we need to call a Javascript function from Silverlight. I have wrapped the Google Analytics Track Events call in my own Javascript function.

function trackEvent(category, action, label) {
  pageTracker._trackEvent(category, action, label);
}

But this will directly call into Google Analytics, which is very difficult to test because the data will arrive but the stats aren’t real-time. That’s why I created a small test version of this function that shows an alert.

function trackEvent(category, action, label) {
  alert(category + ", " + action + ", " + label);
}

Alright we now have done all the Javascript stuff, for now I will be using the test version of trackEvent because we’re in the development stage. Let’s continue with the implementation of the behavior.

The implementation – Behavior

There are a few different types of behavior that can be created: Behavior<T>, TriggerAction<T>, TargettedTriggerAction<T>. I won’t explain every type of behavior, but for the implementation of our Google Analytics Tracking behavior I chose fore TriggerAction<T>. I did this because of the flexibility in events which a TriggerAction can react on, besides that this specific behavior won’t change anything in the Silverlight application itself, it will just call out to a Javascript function. To start with the behavior you will first have to add a reference to System.Windows.Interactivity.dll. You can find this library in: C:\Program Files (x86)\Microsoft SDKs\Expression\Blend 3\Interactivity\Libraries\Silverlight\.

public class TrackEventAction : TriggerAction<UIElement>
{
    protected override void Invoke(object parameter)
    {
        try
        {
            HtmlPage.Window.Invoke("trackEvent", new object[] {Category, Action, Label});
        }
        catch
        {
        }
    }
}

The implementation is simple, just a call out to the Javascript function trackEvent, and three parameters. I explicitly put everything in a try catch swallow statement, because I don’t want a failure in this tracking behavior to cause problems in the application. Further on I made it of type UIelement because in that case all UI elements can Track Events. You can see that the parameters for the call to the Javascript function are properties: Category, Action and Label. I explicitly didn’t put in the code, because the code is straight forward, they are DependencyProperties. Full Code is collapsed below ;-).

public class TrackEventAction : TriggerAction<UIElement>
{
    public static readonly DependencyProperty CategoryProperty =
        DependencyProperty.Register("Category", typeof (string),
                                    typeof (TrackEventAction),
                                    new PropertyMetadata("Silverlight.Event"));

    public static readonly DependencyProperty ActionProperty =
        DependencyProperty.Register("Action", typeof (string),
                                    typeof (TrackEventAction),
                                    new PropertyMetadata("Unknown Action"));

    public static readonly DependencyProperty LabelProperty =
        DependencyProperty.Register("Label", typeof (string),
                                    typeof (TrackEventAction),
                                    new PropertyMetadata("Unknown Action fired"));

    public string Category
    {
        get { return (string) GetValue(CategoryProperty); }
        set { SetValue(CategoryProperty, value); }
    }

    public string Action
    {
        get { return (string) GetValue(ActionProperty); }
        set { SetValue(ActionProperty, value); }
    }

    public string Label
    {
        get { return (string) GetValue(LabelProperty); }
        set { SetValue(LabelProperty, value); }
    }

    protected override void Invoke(object parameter)
    {
        try
        {
            HtmlPage.Window.Invoke("trackEvent", new object[] {Category, Action, Label});
        }
        catch
        {
        }
    }
}

The implementation - Let’s use it

Like any other TriggerAction we can add the Interaction.Triggers element to some UIElement. The below example combines Binding in a DataTemplate.

<DataTemplate>
    <Button>
        <ContentControl Content="{Binding Name}"/>
        <Interactivity:Interaction.Triggers>
            <Interactivity:EventTrigger EventName="Click">
                <GoogleAnalytics:TrackEventAction Category="MeXperience.CloudFilter" Action="{Binding Name, StringFormat='Filter.Remove[\{0\}]'}" Label="{Binding Name, StringFormat='Remove filter for \{0\}'}" />
            </Interactivity:EventTrigger>
        </Interactivity:Interaction.Triggers>
    </Button>
</DataTemplate>

In this example I used the Click-event but it could have been any other event as well, just use the different event name and you’re done. If you’re making use of Silverlight 3, be aware that the StringFormat part of the Binding Expression doesn’t exist, if you remove it everything else will be working fine.

After some days you will get data in Google Analytics which will look something like this.

6 Responses to “Capture usage information of a Silverlight application using Google Analytics and a Blend Behavior”

1. Jonathan van de Veen Says:
   January 29th, 2010 at 09:25

   Once again, great article. I might just use some of this to measure usage in our application.

2. Capture usage information of a Silverlight application using Google Analytics and a Blend Behavior Says:
   January 29th, 2010 at 13:40

   [...] from Mark Monster more here [...]

3. Capture usage information of a Silverlight application using … | Drakz Free Online Service Says:
   January 29th, 2010 at 15:47

   [...] more: Capture usage information of a Silverlight application using … Share and [...]

4. Capture usage information of a Silverlight application using … | SFWEBDESIGN.com Says:
   January 29th, 2010 at 17:39

   [...] Here is the original post: Capture usage information of a Silverlight application using … [...]

5. uberVU - social comments Says:
   January 30th, 2010 at 14:28

   Social comments and analytics for this post…

   This post was mentioned on Twitter by Mark_Monster: blogged Capture usage information of a Silverlight application using Google Analytics and a Blend Behaviorhttp://tinyurl.com/yfqtkx6 #in…

6. Twitter Trackbacks for Capture usage information of a Silverlight application using Google Analytics and a Blend Behavior « Mark [mymonster.nl] on Topsy.com Says:
   January 30th, 2010 at 14:42

   [...] Capture usage information of a Silverlight application using Google Analytics and a Blend Behavior

Leave a Reply