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