Hack28.Deconstruct JavaScript Page Tags

Hack 28. Deconstruct JavaScript Page Tags

Page tagging and the hosted data collection model are relatively new, but becoming more popular. Learn how JavaScript page tags work and make better decisions about deploying them on your site.

JavaScript is a scripting language that is used in web browsers to enable an HTML page to communicate with the visitor's browser. By understanding JavaScript and how it interacts with variables, you can pass in friendly information like page names, product information, campaign data, or anything else.

2.17.1. How Do Web Measurement Tools Use JavaScript?

Not all web measurement tools collect data the same way, but many use JavaScript to collect information from the visitor's browser and act as an API to the web server that displays the content. All the popular web browsers on the market use JavaScript, so it is a good medium to use to interact with the browser application and any server-side technology you may have deployed (Active Server Pages, Cold Fusion, etc.).

Since JavaScript resides in the HTML page, it can access variables populated by the application server and the document object. If you are looking at a web page URL, it normally does not contain all the information you would like to collect. For example, only JavaScript can collect the browser resolution of a visitor to your web site.

2.17.2. How a JavaScript Page Tag Works

The basic JavaScript page tag functions in what is loosely referred to as a "round trip"the embedded code is delivered with the web page, but it programmatically builds another script request that is sent back to the original server (hence the round trip) to get additional code necessary for the tag to function. In most instances, this is a four-step process.

2.17.2.1 Step one: JavaScript in web pages is executed.

JavaScript and variables embedded into the application templates (HTML pages) are executed while the web page loads into the visitor's browser, depending on where the tag is located in the file (Figure 2-12). Most vendors recommend putting your tags at or near the top of the page to ensure data collection even in very large HTML pages (knowing that sometimes visitors click "stop" or back up, resulting in an incomplete page load).

Figure 2-12. Embedded JavaScript page tag

2.17.2.2 Step two: JavaScript source file is requested and returned to the browser.

Java-Script source file referenced within the embedded JavaScript is requested from the original web server (or the browser's cache, or an external content distribution network, Figure 2-13). This code usually provides the bulk of the functionality found in a page tag.

Figure 2-13. The embedded JavaScript requests an external file

2.17.2.3 Step three:The page tag collects data and reports back.

The JavaScript builds an invisible image to send the web analytics collection server. This image request has a long query string, appended to the URL, containing the information gathered out of the visitor's browser about her visit.

2.17.2.4 Step four: A cookie and P3P privacy policy are returned.

In the final step, a cookie is written to the visitor's browser to store a unique identifier and any other necessary information, and the invisible image is returned (Figure 2-14). Also, most measurement applications will send a P3P privacy policy [Hack #26] back to the visitor's browser along with the cookie to prevent cookie dropping [Hack #17].

Figure 2-14. A blank image and a P3P privacy compact are returned to the visitor's browser

2.17.3. Deconstructing an Archetypical JavaScript Page Tag

Let's take a detailed look at the JavaScript page tag used in Omniture's SiteCatalyst product. Normally, there is a company copyright at the top of the code.

   <!--SiteCatalyst code version: G.7. Copyright 1997-2004 Omniture, Inc  More    info available at http://www.omniture.com --><script language="JavaScript"> 

Next, there is a section of variables that you can customize to collect data about the displayed page. For example, if the web application server displays a product page, it would populate information about the product being displayed into the variables. If the page is on a travel web site, it would pass in information about the hotel or trip someone is viewing. The variable acts as a bridge between the application server and the web analytics application. IDs, instead of friendly names, are frequently passed back and forth, but either will work.

Since JavaScript can happen anywhere on the page, there are times that you will not see the code completely laid out together. For example, some variables may sit at the top of the page, while other variables are located in the middle of the page.

   <!-   /*You may give each page an identifying name, server, and channel on the    next lines. */    var s_pageName=""    var s_server=""    var s_channel=""    var s_pageType=""    var s_prop1=""    var s_prop2=""    var s_prop3=""    var s_prop4=""    var s_prop5=""    /* E-commerce Variables */    var s_campaign=""    var s_state=""    var s_zip=""    var s_events=""    var s_products=""    var s_purchaseID=""    var s_eVar1=""    var s_eVar2=""    var s_eVar3=""    var s_eVar4=""    var s_eVar5=""    /* Hierarchy Variables */    var s_hier1="" 

Since the application server needs to interact only with the JavaScript variables, the majority of the JavaScript tag is placed into a JavaScript include file. The logic code is placed in this file so that, once cached, it will download only once and not need to be placed in full text on every page. By caching the file, load times are typically much faster.

 /********* INSERT THE DOMAIN AND PATH TO YOUR CODE BELOW ************/ /********** DO NOT ALTER ANYTHING ELSE BELOW THIS LINE! *************/ var s_code=' ' //--></script> <script language="JavaScript" src="/books/4/263/1/html/2/http://INSERT-DOMAIN-AND-PATH-TO-CODE- HERE/s_code.js"></script> 

The following block of code writes the image request to send to the analytics application. This is how the information is passed to the analytics program, and has a very cryptic look.

 http://stats.mysite.net/b/ss/mysiteID/1/G.6-Pd-R/ s45641272328490?purl=http%3A%2F%2Fwww.mysite.com%2F&pccr=true&&ndh=1 (etc.) 

Some analytics vendors put this code inside of the JavaScript include file. However, by placing the code inside the include file, several browsers may be excluded from tracking.

 <script language="JavaScript"> <!- var s_wd=window,s_tm=new Date; if(s_code!=' '){     s_code=s_dc('pestana'); if(s_code)document.write(s_code)} else document.write('<im'+'g  src="/books/4/263/1/html/2/http://stats.mysite.net/b/ss/mysiteID/1/G.7--FB/s'+s_tm.getTime       ()+'?[AQB]'+'&j=1.0&[AQE]" height="1" width="1" border="0" alt="" />')  //--></script> <script language="JavaScript"> <!-- if(navigator.appVersion.indexOf('MSIE')>=0)document.write(unescape('%3C')+'\  !-'+'-') //--> </script> <NOSCRIPT><img src=http://pestana.112.2O7.net/b/ss/pestana/1/G.7--NS/0 height="1" width="1" border="0" alt="" /></NOSCRIPT> 

The final block of code is designed to capture information about the visitors who did not have JavaScript enabled or are using a browser that does not support JavaScript.

If you want to optimize data collection about your non-JavaScript users, you will also want to populate the <NOSCRIPT>image tag with the information you placed into the JavaScript variables. Keep in mind that if your visitor has JavaScript disabled, you will likely miss a lot of information that can be collected only with JavaScript.

Additionally, JavaScript plays a key role in cache busting [Hack #24], which is how JavaScript ensures that it tracks every page view even if it is reloaded from browser cache or a proxy server. It does this by generating a random number via JavaScript and then placing the number in the URL, which makes the browser believe it is requesting a new page every time.

Many web measurement products do not collect information from browsers that do not support JavaScript.

By understanding how a JavaScript page tag works, we hope that you're able to develop an appreciation for the complexity involved. One thing to keep in mind is that you should never modify the functional component of a page tag unless directed by your vendor. Because vendors spend so much time optimizing their JavaScript, even the smallest change can break the tag (and in somecases, your entire web page). While it is possible to trim functional code [Hack #19] to further reduce download time and optimize performance, you should do so only with your vendor's assistance (or have them do it for you!).

John Pestana and Eric T. Peterson