Nick's .NET Travels

Continually looking for the yellow brick road so I can catch me a wizard....

How’s my Windows Phone 7 application being used? Getting started with the Microsoft Silverlight Analytics Framework for Windows Phone development

Microsoft has just released an update to the Silverlight Analytics Framework which now includes support for Windows Phone development. This gives you a standard approach to include usage tracking within your Silverlight application that is somewhat independent of the tracking site/service you use. I say somewhat as each service requires a custom behavior to be created in order for it to be used with the framework. Luckily the major tracking services already have behaviors available for Silverlight 3 and 4.

To get started tracking usage within your Windows Phone application get the updated version of the Microsoft Silverlight Analytics Frameworkand run through the installer.

image

We’ll cover using the Console output and Google Analytics to track usage but you can use the behavior that corresponds to the tracking service you use (at the time of writing this only includes Webtrends, Google Analytics and the generic Service Oriented Analytics).

In this case we’re going to create a new Windows Phone application but there is no reason why you can’t add the event tracking to an existing application (just skip the first step of creating a new application).

image

Next, add the following references to your application:

ComponentModel
Composition.Initialization
Google.WebAnalytics (only required if you want to use Google Analytics to track events)
Microsoft.WebAnalytics
Microsoft.WebAnalytics.Behaviors
Microsoft.WebAnalytics.Navigation
System.Windows.Interactivity

image

Due to some of the limitations of the Silverlight implementation on Windows Phone there is an additional step that is required in order for the MSAF to work properly. Add a new class called AnaltyicsApplicationService to your project can update the code to look like the following:

using System.ComponentModel.Composition.Hosting;
using System.Windows;

public class AnalyticsAppplicationService : IApplicationService
{
    public void StartService(ApplicationServiceContext context)
    {
        CompositionHost.Initialize(new AssemblyCatalog(
            Application.Current.GetType().Assembly),
            new AssemblyCatalog(typeof(Microsoft.WebAnalytics.AnalyticsEvent).Assembly),
            new AssemblyCatalog(typeof(Microsoft.WebAnalytics.Behaviors.TrackAction).Assembly));
    }

    public void StopService() { }
}

Next, update your App.xaml to look like the following. If you are adding MSAF to an existing application the important part in this code snippet is the creation of the two additional ApplicationLifetimeObjects, AnalyticsApplicationService and WebAnalyticsService.

<Application 
    x:Class="MSAFSampleForWP7.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:local="clr-namespace:MSAFSampleForWP7"
    xmlns:mwa="clr-namespace:Microsoft.WebAnalytics;assembly=Microsoft.WebAnalytics">

    <!--Application Resources-->
    <Application.Resources>
    </Application.Resources>

    <Application.ApplicationLifetimeObjects>
        <local:AnalyticsAppplicationService/>
        <mwa:WebAnalyticsService/>
        <shell:PhoneApplicationService 
            Launching="Application_Launching" Closing="Application_Closing" 
            Activated="Application_Activated" Deactivated="Application_Deactivated"/>
    </Application.ApplicationLifetimeObjects>

</Application>

We’re going to add some behaviors to the pages of the application so let’s jump across to Expression Blend. You can easily do this by right-clicking on the Windows Phone application project and clicking the Open in Expression Blend link

image

Make sure that you rebuild the application within Blend so that the various windows are all up to date. In the Assets window, under Behaviors > Analytics, you’ll see that there are a number of different behaviors that you can drag onto your application to track events.

image

Start by dragging both the ConsoleAnalytics and GoogleAnalytics behaviors on the LayoutRoot node in the Objects and Timeline window. In this example we’re also going to track a button click event, so you’ll have to add a button to the page. Then you can drag the TrackAction behavior onto the button. This should give you the following tree in the Objects and Timeline window.

image

There are some additional properties you will need to set on the GoogleAnalytics behavior. Whilst the Category isn’t required, it’s a good idea to set it so that you can easily filter the event data by category. I’d suggest at least making the Category application specific.

image

The Web Property ID is required and needs to correspond to the ID of your Google Analytics account. When you log into Google Analytics, you can find this ID on the first page, along side the list of profiles.

image

You also need to configure properties on the TrackAction behavior. In this case the behavior is responding to the Click event of the button. We’re also going to specify both a Category and Value that will be passed through to Google Analytics (don’t include any user information that can be identified unless you’re going to be using SSL!)

image

And that’s all there is to it. Run your application up and you will see a basic page where you can go ahead and click the button. The Google Analytics event tracking will record application start up and the button click event.

image

Now you might be wondering how you’re going to view the console output. Well there are two ways: Firstly, assuming the debugger is attached you can view the console output in the Output window in Visual Studio. Alternatively, if you’re running the application on the emulator you can enable the console output window. This is done by setting the \HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\XDE\EnableConsole registry key to 1 – you’ll most likely have to create this entry as it isn’t there by default.

image

With this registry key set, if you restart the emulator, you should see a command prompt window appear that lists the console output from the emulator.

image

Ok, now the last thing to do is to go back to Google Analytics and check that the events are coming through. Be warned that there can be a substantial delay between raising the events and them appearing in the Google Analytics window. To find the event tracking you have to drill into the Content > Event Tracking node on the left side of the page.

image

That’s all there is to getting started with the MSAF for Windows Phone.

________________________________________________________________________________________

Issues: At the moment the current installer doesn’t work as described above. There are a couple of issues, one relating to the binaries that are installed and the other relating to the Google Analytics implementation for WP7. The installer is also missing half the source files for the WP7 sample project

1 & 3) The first and third issues can be resolve by downloading the actual source for the MSAF. This includes all the source code for the sample project and will allow you to recompile the MSAF. Download the source from the Source Code tab of the MSAF codeplex site

2) The second issue relates to the way the code detects whether to use ssl or not for downloading the Google Analytics event tracking image. Essentially this code attempts to detect whether the uri for the current document uses ssl or not. Clearly for a WP7 app this isn’t going to work. The work around for this is to decompile the GoogleAnalytics assembly (not sure why this isn’t checked into codeplex), modify the code and recompile the source. The following link contains the Google Analytics assembly along with the working test project.

MSAF with Fixed Google Analytics Download

Comments (1) -

  • Michael S. Scherotter

    8/3/2010 9:59:14 AM |

    Nick,
    Thank you so much for the thorough review!  Please post your suggestions in the Issue Tracker on the MSAF site.
    Michael

Pingbacks and trackbacks (1)+

Comments are closed
3D Motion, a Bogus iOS7 Feature, implemented in 50 lines of code on Windows Phone 8

Nick's .NET Travels

Continually looking for the yellow brick road so I can catch me a wizard....

3D Motion, a Bogus iOS7 Feature, implemented in 50 lines of code on Windows Phone 8

After playing with iOS7 for a little, I was curious about the new 3D effect they have going on the home screen. For those familiar with Windows Phone you’ll already be familiar with the parallax effect that is used within the Panorama control to give the idea of motion. So, I’m thinking it can’t be that hard to produce the same sort of effect using the gyroscope capability coupled with a simple render transform or two.

A few minutes later I’ve got the following code which produces a similar effect to what you’d see on iOS7:

Motion sensor = new Motion();
public MainPage()
{
    InitializeComponent();
 
    sensor.CurrentValueChanged += sensor_CurrentValueChanged;
    sensor.Start();
}
 
private ManualResetEvent waiter=new ManualResetEvent(false);
void sensor_CurrentValueChanged(object sender, 
     SensorReadingEventArgs<MotionReading> e)
{
    try
    {
        var pitch = e.SensorReading.Attitude.Pitch;
        var roll = e.SensorReading.Attitude.Roll;
 
        Dispatcher.BeginInvoke(() =>
            {
                var transform = B_Background.RenderTransform as CompositeTransform;
                var contentTransform = GD_Content.RenderTransform as CompositeTransform;
                    var newTrans =  24*roll*2/Math.PI;
                    var contentShift = 18 * roll * 2 / Math.PI;
                transform.TranslateX = 
                -Math.Max(Math.Min(newTrans, 50),-50);
                contentTransform.TranslateX = 
                Math.Max(Math.Min(contentShift, 12), -12); 
 
                newTrans = 48*pitch*2/Math.PI;
                contentShift = 36 * pitch * 2 / Math.PI;
                transform.TranslateY = 
                -Math.Max(Math.Min(newTrans, 50), -50);
                contentTransform.TranslateY = 
                Math.Max(Math.Min(contentShift, 12), -12); 
                waiter.Set();
            });
        waiter.WaitOne();
    }
    catch (Exception ex)
    {
        Debug.WriteLine(ex.Message);
    }
}

 

It’s not that easy to demonstrate this via a blog but in the following images you can see the slight displacement of the background and the foreground icons as the screen is rotated through different pitch and yaw values.

image image image

Full source:

Comments are closed