The Legacy Web Tracking Method
On a standard web page, the older implementation for Google Analytics is to include the following text within the <head> section of the page:

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>

The effect of this reference is to call the method urchinTracker() contained in the file urchin.js each time that the page is loaded. This method then collects the appropriate data and transmits it back to the Google Analytics server where it can later be incorporated into various reports which the site administrator can access.

This structure, while designed for standard websites, nevertheless still works nicely where each element in a Silverlight website is contained on a separate page, as illustrated in the following screenshot taken from the TravelsWithCal website:

Figure 3. The TravelsWithCal Deep Zoom Zone

In this case each link leads to a separate page containing an independent Silverlight Deep Zoom image. The appropriate analytics technique in a case like this, therefore, is to simply include the standard tracking script in the <head> section of each page—just as would be done in a non-Silverlight context.

Now consider the following website design which was created specifically to illustrate the principles enumerated in this article. In this Travel IQ Quiz, a user is offered a choice of four categories (Rivers, Churches, Roads and Museums). Assume that the website administrator would like to know what percentage of users chose any particular category. In this case, the selection of any one of the radio buttons will not switch to a new page but instead only load the image control with a new photo from the selected set.

imgPhoto.Source = new BitmapImage(new Uri("Images/MassiveOverload.jpg", UriKind.Relative));

Figure 4. Travel IQ Quiz illustrates a typical Silverlight application which consists of only a single page.

Not withstanding that the structure of this website does not involve multiple pages, there is a solution which is referred to by Scherotter and Garrison as a "pseudo page view" technique. The urchinTracker() method takes a single parameter of data type string representing the name of the current page. The trick is to call this method passing in the name of a pseudo page representing the particular user action which you would like to track.

This is roughly the equivalent of tracking JavaScript events, instructions for which are covered in the Google Analytics help files. These instructions require that the pseudo page parameter must begin with a forward slash and must be in quotes. These pseudo pages can be organized into any desired directory style structure.

So to track the selection of user choices of the different categories in my Travel IQ Quiz, we need to put an entry in each radio button's Checked event handler which will call the urchinTracker() method and pass in a string value representing the corresponding category. (Calling JavaScript code from managed code typically uses the HtmlPage.Window.Invoke() method. HtmlPage is a Silverlight .NET Framework class designed to permit access to a browser's DOM. The HtmlPage's Window property returns a reference to the browser's JavaScript window object. From there, the Invoke() method can be used to execute any available JavaScript method.)

HtmlPage.Window.Invoke("urchinTracker", "/RiversPhotoCollection");

HtmlPage.Window.Invoke("urchinTracker", "/ChurchesPhotoCollection");

HtmlPage.Window.Invoke("urchinTracker", "/RoadsPhotoCollection");

HtmlPage.Window.Invoke("urchinTracker", "/MuseumsPhotoCollection");

Since the urchinTracker() method believes, for example, that RiversPhotoCollection is a web page, it will record one pageview each time that the Checked event is raised for the Rivers radio button.

Please note that the directive "using System.Windows.Browser;" is required in order to reference HtmlPage from within the C# code.

The New Web Tracking Method
The new Google Analytics web tracking method requires the following text to be included in the <head> section of each trackable web page:

      <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">

        var pageTracker = _gat._getTracker("UA-xxxxxxx-x");

        pageTracker._trackPageview();

    </script>

An apparent goal of this new structure is to accommodate both secured (https) and unsecured (http) web pages. In addition, the Google Analytics online instructions point out that using the new tracking method will permit a site administrator to access new features for this service as they are added. Obviously, therefore, the new method is recommended.

In this case, the _trackPageview() method contained in the ga.js file is called to collect and upload the desired tracking data. However, this new web tracking method uses a slightly different technique to call this function. It requires a reference to a pageTracker object in order to perform this task. This difference, in turn, requires a slight modification of the technique described above to call the data collection function (_trackPageview()).

In addition to putting the above standard tracking code on the Travel IQ Quiz web page, it is necessary to add another JavaScript entry (also in the <head> section of the web page):

    <script type="text/javascript">

        function CallPageTracker(strPseudoPage) {

            var pageTracker = _gat._getTracker("UA-xxxxxxx-x");

            pageTracker._trackPageview(strPseudoPage);

        }

    </script>

The code to call this JavaScript function is very similar to the code required by the legacy method:

HtmlPage.Window.Invoke("CallPageTracker", "/RiversPhotoCollection");

HtmlPage.Window.Invoke("CallPageTracker", "/ChurchesPhotoCollection");

HtmlPage.Window.Invoke("CallPageTracker", "/RoadsPhotoCollection");

HtmlPage.Window.Invoke("CallPageTracker", "/MuseumsPhotoCollection");

The difference between the two techniques is that instead of calling the collection method directly, we call a function of our own creation which in turn calls the Google Analytics collection method.

The following screenshot shows how Google Analytics then records this tracking information:

Figure 5. Screenshot of Content Overview showing pageviews for our collection of real and pseudo pages.

Notice how each of the pseudo page views is treated in the identical fashion as an actual webpage. This is true even with respect to the detailed reports which are derived from this Content Overview, as illustrated in the following screenshot.

Figure 6. Screenshot of Content Performance report showing additional detail.

Thus we see that although tracking Silverlight content requires a modification of the standard web tracking techniques, the changes necessary are relatively easy to implement. And once these tracking mechanisms are in place, it is possible to track user interaction with Silverlight content just like a standard web page.

Previous Page: Intro to Web Analytics Next Page: Silverlight Analytics Tracking Flexibility