Jaa

Determining Silverlight Installation Metrics at your site

  • Artikkeli

del.icio.us Tags: Silverlight

Technorati Tags: Silverlight

Following lots of requests from folks inside MS, I wrote this paper as a very simple guide to determine installation metrics. No reason why it shouldn't see light of day, so share and enjoy! :)

 

Introduction

This paper is intended to provide a methodology for customers to measure the level of Silverlight adoption amongst their customer base. Silverlight does not write to the HTTP_USER_AGENT string, so server logs will not contain any direct data for Silverlight installations. However, a very straightforward process may be used on web pages on the customer site to determine Silverlight penetration. This paper discusses two of these methods.

Overview.

The procedure is very straightforward. In both cases, client-side JavaScript and Dynamic HTML are used. The JavaScript is used to detect the presence of the Silverlight plug-in on the browser. The server hosts two images, one which is loaded if Silverlight is present, one which is loaded if Silverlight is not.

In this example, the images are called ‘red.gif’ and ‘green.gif’. Server logs can be used to see the traffic to each of these images. If R is the total traffic to ‘red.gif’ and G is the total traffic to ‘green.gif’, then R+G is the total traffic and [100* G/(R+G)] gives us the total percentage of traffic that comes from browsers with Silverlight installed.

Please note that these samples use red.gif and green.gif for illustrative purposes only. In a production system, it is recommended to use a 1 pixel by 1 pixel image which is not visible to the user.

[The assumption being made here is that R and G can be measured in Unique Users (UU)]

Method 1 – Using Silverlight.js.

This method involves the customer putting ‘Silverlight.js’ on their site. This JavaScript library is approximately 8Kb in size, and contains functions that are heavily tested across different browsers and operating systems.

It includes a variable: Silverlight.available which evaluates to True is Silverlight is installed and False if Silverlight is not.

This can then easily be used within HTML like this:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <title>Silverlight Test Page 1</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript">
        function doTest()
        {
            if(Silverlight.available)
            {
                imgContent.innerHTML = "<img src='green.gif' />";
            }
            else
            {
                imgContent.innerHTML = "<img src='red.gif' />";
            }
        }
    </script>
</head>
<body onload="doTest()">
    <div id="imgContent"></div>
</body>

</html>

This HTML contains a DIV element called imgContent. Upon the page loading, the doTest() function is called. This checks to see if Silverlight is available. If it is, it sets the innerHTML property of imgContent to contain an HTML Image element that has its source set to the URL of either the red or green image. This generates a call to the image, and thus loggable traffic on that image.

The logs can then be inspected as outlined in the overview section.

Method 2 – No Silverlight.js

A similar approach may be taken if Silverlight.js is not present. The advantage of this is that the customer does not need to distribute or update the Silverlight.js file. The disadvantage is that it is a little more complex, and will require maintenance as new Silverlight versions, browser versions, and operating systems platforms are supported.

It follows a similar approach to method 1 in that it determines if Silverlight is installed. If it is, then the imgContent div will have its innerHTML set to an image referencing the green.gif URL, otherwise it will be set to an image referencing the red.gif URL.

 <html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <title>Silverlight Test Page 2</title>
    <script type="text/javascript">
    function doTest()
    {
        var container = null;
        try {
            var control = null;
            if (window.navigator.userAgent.indexOf('MSIE') >= 0) {
                // For Internet Explorer, Create an ActiveX Object
                // And assign it to the 'control' variable.
               // If Silverlight is not installed, this should throw an error
                control = new ActiveXObject('AgControl.AgControl');
            }
            else {
             // For FireFox/Safari
             // Check to see if the plug-in is present
                    
             if (navigator.plugins['Silverlight Plug-In']) {
             {
                container = document.createElement('div');
                document.body.appendChild(container);
                container.innerHTML= 
                   '<embed type="application/x-silverlight" src="data:," />';
                control = container.childNodes[0];
            // If the plug-in is present, then we should have gotten this far
            // without an error. If we threw an error, it is caught later on
             }
             else
             {
                        // plug-in is not present, so we go red
                        imgContent.innerHTML = "<img src='red.gif' />";
             }
            }
           }
           if (control) {
                // plug-in is present and we were able to instantiate
                imgContent.innerHTML = "<img src='green.gif' />";
           }
           else
           {
                // we weren't able to instantiate, so we say it isn't present
                imgContent.innerHTML = "<img src='red.gif' />";
           }
         }
        catch (e) { 
            // we hit an error so we say it isn't present
            imgContent.innerHTML = "<img src='red.gif' />";
        }

        // Let's clean up
        if (container) {
           document.body.removeChild(container);
        }

    }
    </script>
</head>
<body onload="doTest()">
        <div id="imgContent"></div>
</body>
</html>

As can be seen in the code, the approach is to try to create an instance of the plug-in on the page using DHTML. If this fails, or if the plug-in is found to not be present by checking the browser-dependent methods, Silverlight is deemed to be not installed. If it succeeds, Silverlight is deemed to be installed. The appropriate ‘red’ or ‘green’ URL calls are then made, and their logs can be checked against in the way discussed in the overview.

Summary

This paper discussed two methods for determining Silverlight penetration at a client site, by using web pages with JavaScript and Dynamic HTML. The first approach used libraries within Silverlight.js, and the second bypassed using this file. At time of writing the first approach is recommended as the Silverlight.js library is fully and extensively tested for cross-browser and cross-platform correctness, and thus the most accurate results may be attained.

Comments