Archive | Expression Blend RSS feed for this section

Track events in Webtrends from Expression Blend

19 Jan

Last week I taught a handful of webmasters the basics about Silverlight. One of the issues that they faced was the integration between Silverlight and tracking engines like Webtrends. Most tracking engines uses JavaScript to communicate between tracking engine and website. None of the webmasters are actually programmers and don’t know how to communicate with the HTML DOM from Silverlight. Furthermore the webmasters primary tool is Expression Blend and not Visual Studio.

To solve their problem I have created a Behavior that can be integrated into the project. The Behavior takes care of calling the JavaScript method with a Category specified by the webmaster – and it is all done from the Expression Blend UI.

How it is done

I have made a Silverlight class library called Quebec.Silverlight.Behaviors containing one class called AnalyticsAction. The class derives from TargetedTriggerAction making it possible to set a Trigger and a Target to the Behavior.

I needed two properties to be able to call the tracking methods: 1) name of the JavaScript method and 2) the Category to track. Both properties are implemented as Dependency properties with the Category attribute set to “Target Properties”:

[Category("Target Properties")]
public string JavaScriptMethod
{
  get { return (string)GetValue(JavaScriptMethodProperty); }
  set { SetValue(JavaScriptMethodProperty, value); }
}
public static readonly DependencyProperty JavaScriptMethodProperty =
   DependencyProperty.Register("JavaScriptMethod", typeof(string), typeof(AnalyticsAction), new PropertyMetadata("dcsMultiTrack"));

[Category("Target Properties")]
public string Category
{
  get { return (string)GetValue(CategoryProperty); }
  set { SetValue(CategoryProperty, value); }
}
public static readonly DependencyProperty CategoryProperty =
   DependencyProperty.Register("Category", typeof(string), typeof(AnalyticsAction), null);

The Category attribute allows the webmaster to set the two properties as part of the Target. The JavaScript method has a default value of “dcsMultiTrack” being the JavaScript method used by Webtrends.

Finally I implemented the Invoke method. This methods is called when the target is triggered (e.g. Click on Button, MouseEnter on Rectangle). The Invoke method is overridden from the base class.

protected override void Invoke(object parameter)
{
  if (Target == null)
    return;

  HtmlPage.Window.Invoke(JavaScriptMethod, new object[] { Category });
}

The Invoke method calls the JavaScript method specified by the webmaster through the HTML DOM and parses the Category as parameter to the method. Note! If the JavaScript method doesn’t exists an Exception will occur.

This Behavior can easily be extended with several properties and integrate into other tracking engines.

How to use the AnalyticsAction in Expression Blend

To use the AnalyticsAction behavior open your project in Expression Blend and add a reference to the assembly Quebec.Silverlight.Behaviors.dll.

clip_image002

Locate the control that you wish to add tracking to – select the control from the object browser. Remember that you can select both the LayoutRoot and controls added to the LayoutRoot.

Go to the Assets Library and select the Behavior tab. DoubleClick the AnalyticsAction to add it to your selected control.

clip_image004

Go to the properties tab – here it is possible to specify the Trigger (the SourceName and related EventName that triggers). Leave the the TargetName under Common Properties to [Parent]. At the Target Properties it is possible to specify the Category (eg. trackid, eventid) that is sent to Webtrends and to set the JavaScript method that works as a brigde between Webtrends and the Silverlight application.

clip_image006

You are now ready to track events directly to Webtrends using Expression Blend.

How to use AnalyticsAction in Visual Studio (XAML)

To use the AnalyticsAction behavior open your project in Visual Studio and add a reference to the assembly Quebec.Silverlight.Behaviors.dll.

Locate the XAML page/control that you wish to add tracking to. Add a namespace reference to the System.Windows.Interactivity assembly and the Quebec.Silverlight.Behaviors assembly.

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:qsb="clr-namespace:Quebec.Silverlight.Behaviors;assembly=Quebec.Silverlight.Behaviors"

Locate the control that you wish to add tracking to in your XAML page. Add a Trigger using the attached properties Interaction.Triggers and add an EventTrigger to the Trigger. At the EventTrigger it is possible to specify the EventName that triggers the tracking.

Add the call to the AnalyticsAction – here it is possible to specify the Category and JavaScriptMethod.

<Button HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Content="Button">
  <i:Interaction.Triggers>
    <i:EventTrigger EventName="Click">
      <qsb:AnalyticsAction Category="Q714" JavaScriptMethod="dcsMultiTrack"/>
    </i:EventTrigger>
  </i:Interaction.Triggers>
</Button>

You are now ready to track events directly to Webtrends using Visual Studio.

by xamlgeek

Follow

Get every new post delivered to your Inbox.

Join 1,356 other followers