Web Analytics Hacks Select series JavaScript Document Object model

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

This article extracts from the website Analysis master Eric T.peterson "web site measurement Hacks"

–hack#30 "HACK the JavaScript Document Object Model"

Web analytics solutions are generally tagged to understand how they use the JavaScript Document Object Model (DOM).

Most Web analytics tool providers use the JavaScript Document Object Model (DOM) extensively, and you may be concerned about whether the provider's code interferes with your own JavaScript code. More importantly, you should also worry that the service provider uses all the data the DOM may provide to collect data.

The following are examples of information provided by the DOM:

Version of the browser

Operating system time

Language of the operating system

Monitor resolution

Color depth of the display

Height and width of the browser

Form analysis

The Document Object Model (DOM) is a data structure used by Web browsers and JavaScript to store and retrieve information about a document (that is, a page) (Figure 2-16). JavaScript and JavaScript developers use the DOM to collect data and display data information. The DOM is the core, from the insertion of the Web Monitor tab to the collection of site user information. A fragment of the DOM component is shown in Figure 2-16, which shows the general structure of the DOM clearly. The Window object is the root node through which all other elements can be accessed. Each object has functions, properties, events, or other objects. Use JavaScript to access or control every element of the DOM, as described in the following sections.

Figure 2-16 JavaScript Document Object model

Insert Monitor Label

As you can guess, the most important thing in the Web site data collection method based on the monitoring label is the monitor label (an invisible gif picture hack#29). There are two main ways to insert a monitoring label onto a page: The server-side picture tag builder and JavaScript through the client. Through JavaScript to create picture tags, web analytics tool providers can collect as much information as possible, and through the server-side to create a picture tag, many users of the information can not be collected.

The write function of the Document object writes HTML and JavaScript to an HTML document. The following code is an example:

<script language= "JavaScript" >
<!-
Window.document.write ("<img src= ' http://visionalist.cn/images/1x1.gif '/>");
–>
</script>

This means that the structure of the DOM can be changed at all times. In this example, we used the Document object to add an element to the documentation, which is a picture. Now that the image has been inserted, it can be accessed through the DOM.

Elements in the JavaScript Document Object model can change position at any time.

Get Document Information

The next picture setting is very important. The purpose of this image is to collect information about pages, browsers, and users. This information is also obtained through the DOM. Here we try to get the URL of the page through the DOM and include the URL in the Monitoring tab:

<script language= "JavaScript" >
<!-
var url = window.localtion.href;
Window.document.write ("<img src= ' http://visionalist.cn/images/1x1.gif?url=" +url+ "/>");
–>
</script>

Fortunately, the information that can be collected through the DOM is not just the URL shown above. For example: page layout, multimedia support, form design and other information it can provide to us. Next, we'll explain the layout of the page.

Get the width of the browser

When you place the entire Web page in the left half of the browser window, you may overlook some valuable resources (blank space). In addition to asking developers to ask about the width of their friends ' browsers, you can use DOM to ask your customers if there is a waste of space.

Window.document.documentElement.offsetWidth;

In the latest version of IE, the above code returns the pixel value of the browser window. Although this unique attribute is not available in all browsers, the same information is provided by similar properties in most browsers. If you are using a Web analytics tool that cannot provide you with this information, you can use the following code to get it yourself. The width is rounded to a value that is closest to 50 pixels, so that it is not cumbersome to sort the data.

var width=window.document.documentelement.offsetwidth;
var width=math.round (width/50) *50;//width in 50 pixel rounding

Tracking form Item Errors

So far, Dom has been used primarily to collect information about Web pages and browsers. You can also use the DOM to monitor users ' actions on the page. For example, monitor whether a user is using a form, and how to use the form. Use the DOM to invoke the appropriate event handler when the event occurs. Most Web sites use JavaScript-based form error validation, but these sites usually do not track the most error-prone items in the form. The following example shows how to use the error validation function to record the error condition of the form.

Once the CheckError function is defined, JavaScript uses the DOM to invoke the form when it is submitted (the onsubmit event). It should be noted that in the CheckError function, a function called Senderrorinfo is also invoked. The Web Analytics tool provides a similar function method, generates a picture in the page, and sends the error message to the data collection server. Eventually, the user gets a report (as described in the next section), and the report shows the most common form errors in the Web site.

function CheckError () {
Check that the credit card number is 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 the CheckError function when the form is submitted
Window.document.forms[0].onsubmit=checkerror;

Form analysis – Grace from DOM

Now you should understand how to use the DOM to generate a picture that collects browser information and monitors the user's actions, and we can combine that information to create a valuable statistical tool. DOM can provide valuable business information and can pry into the subtleties of the user experience. For example, you can find which item in your form is intolerable to the user; credit card account, hair color, mother's old surname, or neighbor's phone number, etc. is not too many items need to fill out, and in what way did you lose potential customers?

When the user leaves the page, you can use JavaScript and DOM to send information (implemented by generating a picture in the page), and we can know the last form item that the user accesses before leaving the page, perhaps the form item is a part of the user that is intolerable. The report in Figure 2-17 shows the Shippinginfo form for the checkout-shipping page. It is worth noting that the form was successfully submitted 154 times, but 202 times the user did not click the form and left the page. Also, most users leave after clicking on the PhoneNumber field.

Fig. 2-17 Simple Form Item Analysis

All analysts want to go to their clients ' offices to understand their customers ' real needs, and Dom can fulfill their desires. As with all Web analytics tools, this method of gathering information does not capture 100% of users, but because JavaScript is enabled for 95% of users visiting the site, this information is much more than a "statistically important sample". There are a lot of other information that needs to be collected in the Web site, just to find the person who can unlock all this information.

-brett Error, John Pestana, Eric T Peterson

(Copyright GUI Lin website Analysis blog All, welcome to reprint, but reprint please specify the source.) )

Original: Http://blog.digitalforest.cn/hacks-30-javascript