網(wǎng)站分析Hacks精選系列之JavaScript文檔對象模型
來源:網(wǎng)站推廣 2012-10-19
本文節(jié)選譯自網(wǎng)站分析大師Eric T.Peterson的《Web Site Measurement Hacks》
– HACK#30 “Hack the JavaScript Document Object Model”
網(wǎng)站分析解決方案普遍采用標簽方式,理解他們是如何使用JavaScript文檔對象模型(DOM)的。
大多數(shù)網(wǎng)站分析工具提供商都廣泛使用JavaScript文檔對象模型(DOM),你可能會擔心提供商的代碼是否會干擾到你自己的JavaScript代碼。更重要的是,你應該也會擔心服務商為了收集數(shù)據(jù),使用了DOM可能提供的所有數(shù)據(jù)。
下面是一些DOM提供的信息的例子:
● 瀏覽器的版本
● 操作系統(tǒng)的時間
● 操作系統(tǒng)的語言
● 顯示器的分辨率
● 顯示器的顏色深度
● 瀏覽器的高度和寬度
● 表單分析
文檔對象模型(DOM)是Web瀏覽器和JavaScript用來存儲和獲取文檔(也就是頁面)信息的一個數(shù)據(jù)結(jié)構(圖 2-16)。JavaScript和JavaScript開發(fā)人員使用DOM收集數(shù)據(jù),并顯示數(shù)據(jù)信息。從插入網(wǎng)頁監(jiān)測標簽到收集網(wǎng)站用戶信息,DOM是核心。在圖2-16中只是展示了DOM組件的一個片段,它能清晰的展示DOM大體結(jié)構。window對象是根節(jié)點,通過它能訪問到所有其他元素。每一個對象都擁有函數(shù)、屬性、事件、或者是包含其他對象。使用JavaScript可以存取或者控制DOM的每一個元素,下面的章節(jié)會詳細說明。
圖2-16 JavaScript的文檔對象模型
插入監(jiān)測標簽
跟你猜想的一樣,基于監(jiān)測標簽的網(wǎng)站數(shù)據(jù)收集方式中最重要的東西就是監(jiān)測標簽(一個不可見的GIF圖片 Hack#29)。往頁面上插入監(jiān)測標簽主要有兩個方法:通過服務器端的圖片標簽生成器和通過客戶端的JavaScript。通過JavaScript來創(chuàng)建圖片標簽,網(wǎng)站分析工具提供商能收集到盡可能多的信息,而通過服務器端創(chuàng)建的圖片標簽,很多用戶的信息就收集不到。
document對象的write函數(shù)可以把HTML和JavaScript寫入HTML文檔。下面的代碼就是一個例子:
這表明DOM的結(jié)構什么時候都是可以改變的。在這個例子中,我們使用document對象往文檔中添加了一個元素,這個元素是一個圖片。現(xiàn)在這個圖片已經(jīng)插入進去了,通過DOM就可以訪問到它。
JavaScript文檔對象模型中的元素可以在任何時候改變位置。
獲取文檔信息
接下來圖片的設置是非常重要的。這個圖片的目的是用來收集頁面,瀏覽器和用戶的相關信息。這些信息也是通過DOM獲取的。這里我們試著通過DOM獲取頁面的URL,并將這個URL包含到監(jiān)測標簽中:
幸運的是,通過DOM可以收集到的信息不僅僅是上邊演示的URL。比如:頁面布局,多媒體支持,表單設計等信息它都能提供給我們。接下來,我們將講解頁面布局。
獲取瀏覽器的寬度
當你把整個Web頁面都放置在瀏覽器窗口的左半部分的話,可能就忽視了一些有價值的資源(空白版面)。除了讓開發(fā)人員去詢問他們朋友的瀏覽器的寬度,可以使用DOM來詢問你的客戶是否存在空間的浪費。
window.document.documentElement.offsetWidth;
在IE的最新版本中,以上代碼能返回瀏覽器窗口的像素值。雖然這個特有屬性并不是在所有的瀏覽器里都可用,但是在大部分瀏覽器中,通過類似的屬性提供了相同的信息。如果你使用的網(wǎng)站分析工具中,不能為你提供這些信息的報告,你可以通過下面的代碼來自己獲取。寬度被取整到最接近于50像素的值,以便于在對數(shù)據(jù)進行排序時不至于很麻煩。
var width=window.document.documentElement.offsetWidth;
var width=Math.round(width/50)*50;// 寬度按50像素取整
跟蹤表單項目錯誤
到目前為止,DOM主要用來收集Web頁面和瀏覽器的信息。其實也可以使用DOM來監(jiān)視用戶在頁面上的動作。例如,監(jiān)視用戶是否使用了表單,以及對表單的使用情況。使用DOM,當事件發(fā)生時來調(diào)用相應的事件處理函數(shù)。大多數(shù)網(wǎng)站都使用基于JavaScript的表單錯誤驗證,但是這些網(wǎng)站通常都沒有跟蹤表單中那些最容易出錯的項目。下面的例子將展示如何使用錯誤驗證函數(shù)來記錄表單的出錯情況。
定義好checkError函數(shù)之后,當表單提交時(onsubmit事件),JavaScript就會使用DOM來調(diào)用該函數(shù)。需要注意的是,在checkError函數(shù)中,還調(diào)用了一個名叫sendErrorInfo的函數(shù)。網(wǎng)站分析工具會提供類似的函數(shù)方法,在頁面中生成一張圖片,然后將錯誤信息發(fā)送到數(shù)據(jù)收集服務器。最終,用戶會得到一個報告(在下一節(jié)中會講到),報告中顯示了網(wǎng)站中最常見的表單出錯情況。
function checkError() {
// 檢查信用卡號是否是16位
if ( window.document.forms[0].creditcard.value.length!=16 ) {
sendErrorInfo(window.document.forms[0].name, “Credit Card Error: Length”);
return false;
}
// 更多的錯誤檢查
return true;
}
// 當表單提交時調(diào)用checkError函數(shù)
window.document.forms[0].onsubmit=checkError;
表單分析 – 來自DOM的恩惠
現(xiàn)在應該明白如何使用DOM來生成一張圖片,從而收集瀏覽器信息,監(jiān)視用戶的操作情況了,我們可以將這些信息組合起來,創(chuàng)造一個有價值的統(tǒng)計工具。DOM可以提供有價值的商業(yè)信息,并且可以窺探到用戶體驗的精妙之處。例如,可以找到表單中哪個項目讓用戶無法忍受了;信用卡賬號、頭發(fā)顏色、母親的舊姓、或者鄰居家的電話號碼等等是不是太多的項目需要填寫了;到底是在哪一步讓你失去了潛在的客戶?
當用戶離開頁面時,可以使用JavaScript和DOM發(fā)送信息(通過在頁面中生成一張圖片來實現(xiàn)),我們就可以知道該用戶在離開頁面之前訪問的最后一個表單項目,也許這個表單項目就是讓用戶無法忍受的部分。圖2-17中的報告展示了Checkout-Shipping頁面的ShippingInfo表單。值得注意的是,該表單成功提交了154次,但是有202次用戶并沒有點擊過表單就離開了頁面。還有一點,大多數(shù)用戶在點擊了PhoneNumber字段后就離開了。
圖2-17簡單表單項目分析
所有的分析師都想親自到他們客戶的辦公室里去了解客戶的真實需求,DOM就可以實現(xiàn)他們的愿望。和所有的網(wǎng)站分析工具一樣,這種收集信息的方法并不能捕捉到100%的用戶,但是由于訪問網(wǎng)站95%的用戶都啟用了JavaScript,因此這些信息要比“統(tǒng)計學上的重要樣本”多的多。網(wǎng)站中需要收集的其他信息還有很多,只需要找到那個能解開這一切信息的“人”。
— Brett Error, John Pestana, Eric T. Peterson
(版權歸數(shù)碼林網(wǎng)站分析博客所有,歡迎轉(zhuǎn)載,但轉(zhuǎn)載請注明出處。)
原文:blog.digitalforest.cn/hacks-30-javascript
文章編輯: 365webcall在線客服(www.365webcall.com)
我的評論
| 登錄賬號： | 密碼： | 快速注冊 | 找回密碼 |  |
