Hack30.Hack the JavaScript Document Object Model

Hack 30. Hack the JavaScript Document Object Model

Understand how the JavaScript Document Object Model is used by many, if not all, tag-based web measurement solutions.

Since most web measurement vendors use the JavaScript Document Object Model (DOM) extensively, you may be concerned about whether your provider's code interferes with your own JavaScript programming. More importantly, you should be concerned about whether your provider is taking advantage of all the possibilities for data collection the DOM makes available.

Some examples of information the DOM provides include the following.

• Browser version

• OS time

• OS language

• Monitor resolution

• Monitor color depth

• Browser height and width

• Form analysis

The Document Object Model is a framework used by web browsers and JavaScript to store and access information about a document and, in our case, a web page (Figure 2-16). JavaScript and the JavaScript programmer use the DOM to both gather and place information. From placing the web beacon to gathering information about site visitors, the DOM is central to web analytics.

While Figure 2-16 shows only a small selection of DOM components, it is useful in outlining the structure of the DOM. The window object is the root element and provides access to all other elements. Each object contains functions, properties, events, and/or other objects. JavaScript can be used to access or control each piece of the DOM, as described in the following sections.

2.19.1. Placing the Beacon

As you might expect, the most important piece of beacon-based web data collection is the beaconthe invisible GIF [Hack #29]. There are two main ways to place the beacon on the page: via server-side image tag generation and via client-side JavaScript. By using JavaScript to create the image tag, the web analytics provider allows itself to gather the most amount of information possible. When the web server creates the image tag, much of the information about the user is unavailable.

Figure 2-16. The JavaScript Document Object Model

The document object's write function is used to write HTML or JavaScript into the HTML document. Here is how it is done:

 <script language="JavaScript"><!-- window.document.write("<img src='/books/4/263/1/html/2/http://omniture.com/images/1x1.gif' />"); //--></script> 

This illustrates the ever-changeable nature of the DOM. We used the document object to add an element to the document. In this case, the element is an image. Now that the image is in place, it can be accessed via the DOM.

An element within the JavaScript document model can change locations at any time.

2.19.2. Returning Document Information

While placing the image is essential, the reason for the image is to gather information about the page, browser, and visitor. This information is again available via the DOM. See how the DOM can be used to identify the URL of the page, and include that URL with the beacon:

 <script language="JavaScript"><!-- var url=window.location.href; window.document.write("<img src='/books/4/263/1/html/2/http://omniture.com/images/1x1. gif?url='"+url+" />"); //--></script> 

Fortunately, the DOM can be used to gather a lot more than just the viewed URL. It can give you information about page layout, multimedia support, and form design, to name a few. Next, we'll address page layout.

2.19.3. Finding the Browser Width

If your entire web page fits in the left half of the browser window, you may be ignoring a valuable resourceempty real estate. Rather than having your developers ask their friends about browser width, the DOM can be used to ask your customers whether you're wasting real estate, for example:

 window.document.documentElement.offsetWidth; 

For recent versions of IE, this code returns the pixel width of the browser window. While this specific property is not available in all browsers, most browsers have a corresponding property offering the same information. If your web measurement provider does not make this information available in the report you need, you can get it yourself with the following code. Notice that the width is rounded to the nearest 50 pixels so that sorting through the resulting data isn't too cumbersome.

 var width= window.document.documentElement.offsetWidth;  var width=Math.round(width/50)*50; // round width to the nearest 50 pixels 

2.19.4. Track Form Entry Errors

So far, the DOM has been used to gather information about your web page and the browser. However, the DOM can also be used to watch the movements of the visitor to the page. For example, you can choose to monitor whether, and to what extent, a user interacts with a form. The DOM can be used to call a function when an event occurs. Many sites have JavaScript based error checking for forms. What those sites often don't take advantage of is tracking which errors are occurring most often. The following example shows how to use your error checking function to record information about errors that occur in a form:

 function checkError(){    // check that the credit card number contains 16 digits    if( window.document.forms[0].creditcard.value.length!=16 ) {       sendErrorInfo(window.document.forms[0].name,"Credit Card Error: Length");       return false;    }    // more error checking    return true;  }  // call checkError when the form is submitted  window.document.forms[0].onsubmit=checkError; 

After defining the checkError function, the JavaScript uses DOM to call that function as the form is submitted (the onsubmit event). Notice that the checkError function contains a call to a function named sendErrorInfo. A function like this, which should be available from your web analytics provider, writes an image to the page, thus sending information about the error to the data collection servers. The result is a report like the one in the next section, which shows the most common form errors on your site.

2.19.5. Form AnalysisManna from the DOM

Now that you understand how the DOM is used to place an image, read browser information, and watch visitor interaction, we can combine these to create a valuable measurement tool. The DOM can provide valuable business information and a glimpse into the subtleties of the user experience. For example, which field in a form is the straw that breaks the camel's back? Is it too much to ask for a credit card number, hair color, mother's maiden name, or neighbor's phone number? At what point do potential customers give up?

JavaScript and the DOM can be used to send information (write an image to the page) as someone leaves that page. And before that person leaves the page, it can identify the last field touched by the user, the field that was quite possibly the last straw. The report in Figure 2-17 shows an example for the ShippingInfo form on the Checkout-Shipping page. Notice that the form was successfully submitted 154 times, but there were 202 instances when users left without touching the form. Notice also that users most often left the form after touching the PhoneNumber field.

For all analysts who have wished to be the proverbial fly on the wall of their customer's offices, the DOM is here to grant that wish. Like all web analytics tools, this method of gathering data won't capture 100 percent of visitors, but since well over 95 percent of the visitors to your site have JavaScript enabled, you get much more than a "statistically significant sample." There is a lot of information about your site that is waiting to be gathered. You just need to find someone who can unlock the information.

Figure 2-17. Sample form field analysis

Brett Error, John Pestana, and Eric T. Peterson