Google Analytics with C1Silverlight

January 28 2011

The Microsoft Silverlight Analytics Framework (MSAF) is a set of behaviors used in Expression Blend to enable scenarios for web analytics within Silverlight applications. It uses existing analytics services (such as Google Analytics and EQATEC) along with common Silverlight controls. There are a number of different types of services which track different types of information. Some track interaction, media, performance, duration and even site demographics. With interaction services you can basically track certain events that happen in your application, such as when a button is clicked or a listbox selection is changed. ComponentOne Studio for Silverlight controls support the most common interaction service supplied by the Silverlight Analytics Framework. We've exposed the specific event handlers in our controls that you may want to track. This post describes the steps needed to add Google Analytics tracking to a Silverlight application using C1DataGrid. The same basic steps could be applied to any service or use of another ComponentOne control. 1. Download and install the Microsoft Silverlight Analytics Framework. http://msaf.codeplex.com/ 2. Open up a C# Silverlight 4 project in Expression Blend 4. The framework is meant to be used in Blend, but the XAML can also be written long hand in Visual Studio. 3. Add a C1DataGrid to the page named c1DataGrid1. 4. In the code behind, populate the datagrid with some data. You can use any data. For example, replace the code with the following sample data:

public partial class MainPage : UserControl  
{  
public MainPage()  
{  
// Required to initialize variables  
InitializeComponent();  
this.Loaded  =new System.Windows.RoutedEventHandler(MainPage_Loaded);  
}  

private void MainPage_Loaded(object sender, System.Windows.RoutedEventArgs e)  
{  
List contacts = new List();  
contacts.Add(new Contact("Henry", "Clinton", "hclintock@gmail.com"));  
contacts.Add(new Contact("Marietta", "Dupree", "dupme@gmail.com"));  
contacts.Add(new Contact("Charles", "Jackson", "cjack223@gmail.com"));  
c1DataGrid1.ItemsSource = contacts;  
}  
}  

public class Contact  
{  
public Contact(string f, string l, string a)  
{  
FirstName = f;  
LastName = l;  
Email = a;  
}  
public string FirstName { get; set;}  
public string LastName { get; set; }  
public string Email { get; set; }  
}

5. Select the Analytics behavior group from the Assets tab in Blend. Here, you will see the services and analytic behaviors that you just installed in Step 1. 6. Drag a GoogleAnalytics behavior element onto the LayoutRoot of the page. The service elements can be added to any container element, such as a Grid or StackPanel, and they will collect and send data for any trigger within the scope of that element. 7. On the GoogleAnalytics element, set the WebPropertyID to your Google account number. Below is the complete XAML generated up to this point. You'll see I forgot the step for adding a TextBlock. Please forgive me.


<UserControl  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"  
                     xmlns:ga="clr-namespace:Google.WebAnalytics;assembly=Google.WebAnalytics"  
                     xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"  
                     xmlns:mwab="clr-namespace:Microsoft.WebAnalytics.Behaviors;assembly=Microsoft.WebAnalytics.Behaviors"  
    x:Class="SilverlightAnalytics1.MainPage"  
    Width="640" Height="480">  

    <Grid x:Name="LayoutRoot" Background="White">  
        <i:Interaction.Behaviors>  
            <ga:GoogleAnalytics WebPropertyId="UA-XXXXXX-X" />  
        </i:Interaction.Behaviors>  
        <c1:C1DataGrid Margin="28,107,264,166" Name="c1DataGrid1"/>  
        <TextBlock Height="27" Margin="28,63,286,0" TextWrapping="Wrap" Text="My Silverlight Analytics Application" VerticalAlignment="Top" FontSize="16"/>  
    </Grid>  
</UserControl>

8. Add a reference to C1.Silverlight.DataGrid.Analytics.dll to the project. This is necessary to add specific handling events for a control. If you're working in Visual Studio, you will also need to add references to Microsoft.WebAnalytics.dll, Microsoft.WebAnalytics.Behaviors.dll, and Google.WebAnalytics.dll (these are automatically added in Blend). 9. From the Assets tab, drag a TrackAction element onto the C1DataGrid control. This will create an EventTrigger element within C1DataGrid. 10. Set the EventName on the EventTrigger element to the SelectionChanged event. The page will send data to the analytics service each time the user changes selection in the C1DataGrid (notice the SourceObject is c1DataGrid1).

11. Set the Category property on the TrackAction element to something descriptive like "C1DataGrid." You can also set the Value property. These values will act as parameters sent to the analytics server so you can easily distinguish among many actions on your site. Here is the updated XAML for C1DataGrid after steps 9, 10 and 11.


<c1:C1DataGrid Margin="28,107,264,166" Name="c1DataGrid1">  
    <i:Interaction.Triggers>  
        <i:EventTrigger EventName="SelectionChanged">  
            <mwab:TrackAction Category="C1DataGrid" Value="1" />  
        </i:EventTrigger>  
    </i:Interaction.Triggers>  
</c1:C1DataGrid>

12. Build and publish the application. Each time you select a different row in the C1DataGrid, data is fired off to the Google Analytics server. Note: you need to publish the application at the domain where you have your Google Analytics account set up. Otherwise, your app will still try to send data but the receiving end will reject data from localhost.

Web Analytics Tips

If you use Mozilla Firefox, I recommend you download and use WASP - Web Analytics Solution Profiler/Debugger. Because during debugging you may not immediately see your tracked actions through your analytics service, so WASP allows you to see this data being sent from your page. This also allows you to test without fully publishing the app.

In this example I used Google Analytics because it is a common service that I have used and could prove the entire concept from start to finish. In the screenshot below, you can see what my results looked like on Google's end. The category I labeled "C1DataGrid" was triggered 61 times with a Value of 1.00 on January 28th, 2011.

If you don't have any service account (check out the MSAF page for all supported services) you can use the ConsoleAnalytics service to mess around with your analytic antics. The ConsoleAnalytics behavior allows you to track events in the Visual Studio debugger window. If you download Studio for Silverlight, included is a sample which uses this service, found under Samples/C1.Silverlight/Analytics.

Greg Lutz