Hack69.Measure Connection Type

Hack 69. Measure Connection Type

Determine whether your visitors use modems or broadband connections, and support critical site design decisions.

One of the most common questions asked of web measurement applications regarding site performance is, "How can I tell how my visitors connect to the Internet when they're coming to my site?" This question gets asked most often when companies are trying to make design decisions about page size, use of multimedia and Flash, and whether or not to deploy weighty tracking code.

Figure 5-3. High-end geographic reporting

Many web measurement vendors attempt to provide this information using an obscure hack, the fact that IE users self-report how they connect to the Internet, and that this information is available via the JavaScript document object model. You'll commonly see reports called "Connection Type" that provide percentage of visitors using "LAN," "modem," and "unknown" or "other" types of connections (Figure 5-4).

While these reports are moderately useful, especially considering they come with no additional setup hassles, you can use some relatively simple JavaScript to build a much more complete report using custom variables.

5.3.1. The Code

The following code has been written in JavaScript, which is pretty much your only option since it needs to run in the visitor's web browser to test how long it takes to download an image.

The essence of this hack is as follows:

Download the sample image from http://www.webanalyticsdemystified.com/sample/speedtest_28629B.gif and save on your local server in the /images directory. The size of this file is the basis for the cstImageSize variable; if you use a different image, be sure to change the value of that and the cstImageURL variables.

Figure 5-4. Connection type report
You add the JavaScript code to your home page (ideally, via a server-side include called visitor_connection_type.inc).
You pass the value of the script's variable connectionType to your client-side page tag.

The imageSRC variable references a sample image you can use, thanks to Ian Houston of VisioActive. Go to http://www.webanalyticsdemystified.com/sample/speedtest_28629B.gif, download the image, and save the file on your local server in the /images directory. If you change the image, be sure to change the imageSize variable to the size of the image in bits.

Set the URL of the image to use for the test, the size of the image in bytes, and the name of the cookie you'll be using to store the information. Save the code into a file called visitor_connection_type.inc and plan on including it on your site's home page via a server-side include.

 <script language="JavaScript"> var cstImageURL = "speedtest_28629B.gif"; // Specify the size of the test image in Bytes var cstImageSize = "28629"; // Specify the name of the cookie to use var cstCookieName = "ConnectionSpeed"; //Specify ConnectionSpeed Default Value var ConnectionSpeed = "undetermined"; // If the cookie exists, pull the value from the Cookie. // Otherwise set window.onload to run the test after the page has finished loading. // Initialize the Test var cstCookies = document.cookie; var cstCookieStart = cstCookies.indexOf(cstCookieName + "="); if (cstCookieStart != -1) { cstCookieStart += cstCookieName.length + 1; var cstCookieEnd = cstCookies.indexOf(";", cstCookieStart); if (cstCookieEnd == -1) cstCookieEnd = cstCookies.length; ConnectionSpeed = cstCookies.substring(cstCookieStart, cstCookieEnd); } else { window.onload = RunCST; } // Start the test by setting the start time, declaring a new image object by  // calling the calculating function and telling the new image object to // begin the download.  // Run the Test  function RunCST() { cstStartTime = new Date(); var cstImageTest = new Image(0,0); cstImageTest.onload = CalcCST; cstImageTest.src = cstImageURL + "?" + cstStartTime.getTime(); } // Finish the test by getting the end time and calulating the speed of the  // download in kbps. # Wrap it up by passing that value to a function that  // will interpret and output the results.  // Calculate the Results to kbps function CalcCST() {    cstEndTime = new Date();    var cstDownloadTime = (cstEndTime.getTime() - cstStartTime.getTime())/1000;  if (cstDownloadTime == 0) cstDownloadTime = .001;  var cstKBytes = cstImageSize/1000;  var cstLineSpeed = cstKBytes/cstDownloadTime; var cstKbps = (Math.round((cstLineSpeed*8)*10*1.02))/10;  OutputCST(cstKbps); } // Read in the speed of the download and translate into manageable groupings related to  // connection types. Output the new value to a cookie to make it available going forward  // without running the test with every subsequent every page view.  // Output the Test Results function OutputCST(cstKbps) { if (cstKbps <= 14.4) { ConnectionSpeed = "14.4 modem"; } else if (cstKbps <= 28.8) { ConnectionSpeed = "28.8 modem";  } else if (cstKbps <= 33.6) {  ConnectionSpeed = "33.6 modem";  } else if (cstKbps <= 53.4) {  ConnectionSpeed = "56.6 modem"; } else if (cstKbps <= 64) { ConnectionSpeed = "ISDN"; } else if (cstKbps <= 128) { ConnectionSpeed = "Dual ISDN or cable modem or dsl"; } else if (cstKbps < 1500) { ConnectionSpeed = "fractional T1 or cable modem or dsl"; } else if (cstKbps >= 1500) { ConnectionSpeed = "T1 or faster"; }  var cstExpiration = new Date();  cstExpiration.setTime(cstExpiration.getTime() + 86400000); document.cookie = cstCookieName + "=" + ConnectionSpeed + "; expires=" +  cstExpiration.toGMTString() + ";path=/"; }

The code basically checks to see if the test has already been run by checking for a cookie that expires in 24 hours. If the cookie exists, the connection information is available via the ConnectionSpeed JavaScript variable, which can be passed to your web measurement application.

The code is written this way since most page tagbased measurement applications won't wait for the test to run before passing information back to their servers. You're only going to get connection information for visitors who view more than one page, but this is a benefit really, helping you to better understand the connection type for people who are at least nominally engaged.

5.3.2. Running the Code

The code is self-sufficient and will run on its own based on the window.onload = RunCST command. When all is said and done, the variable ConnectionSpeed has a string value that describes the visitor's connection to the Internet. All that remains is to load that value into a custom variable supplied by your web measurement vendor. Using Omniture's SiteCatalyst, the code to do this is simply:

 var s_prop3=ConnectionSpeed;

If you are using a web server log-based measurement application, you may want to consider appending the ConnectionSpeed variable's value to subsequent page requests in the URL. For example, if you have a linkto index.asp you would modify that link dynamically to index.asp?ConnectionSpeed=56.6+modem. Doing this will allow your application to mine for the particular name/value pair you provide and report on the connection speeds provided without affecting the link being clicked.

5.3.3. The Results

As you can see in Figure 5-5, as this information is passed into your web measurement application, you're able to see the distribution of connection types, ideally over both unique visitors and page views.

Figure 5-5. Connection type report

Whatever level of granularity you choose to report on, this information should be trended over time and, depending on the flexibility of your web measurement application and its ability to correlate custom variables, allow you to segment visitors or otherwise examine browsing habits by connection type. This data provides high-level insight into your visitors' needs that will impact design and development decisions over time.

Ian Houston and Eric T. Peterson