網站分析Hacks精選系列之JavaScript文件物件模型

仲介交易 SEO診斷 淘寶客 雲主機 技術大廳

本文節選譯自網站分析大師Eric T.Peterson的《Web Site Measurement Hacks》

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

網站分析解決方案普遍採用標籤方式，理解他們是如何使用JavaScript文件物件模型(DOM)的。

大多數網站分析工具供應商都廣泛使用JavaScript文件物件模型(DOM)，你可能會擔心供應商的代碼是否會干擾到你自己的JavaScript代碼。 更重要的是，你應該也會擔心服務商為了收集資料，使用了DOM可能提供的所有資料。

下面是一些DOM提供的資訊的例子：

●　瀏覽器的版本

●　作業系統的時間

●　作業系統的語言

●　顯示器的解析度

●　顯示器的色彩深度

●　瀏覽器的高度和寬度

●　表單分析

文件物件模型(DOM)是Web瀏覽器和JavaScript用來存儲和獲取文檔(也就是頁面)資訊的一個資料結構(圖 2-16)。 JavaScript和JavaScript開發人員使用DOM收集資料，並顯示資料資訊。 從插入網頁監測標籤到收集網站使用者資訊，DOM是核心。 在圖2-16中只是展示了DOM元件的一個片段，它能清晰的展示DOM大體結構。 window物件是根節點，通過它能訪問到所有其他元素。 每一個物件都擁有函數、屬性、事件、或者是包含其他物件。 使用JavaScript可以存取或者控制DOM的每一個元素，下面的章節會詳細說明。

圖2-16 JavaScript的文件物件模型

插入監測標籤

跟你猜想的一樣，基於監測標籤的網站資料收集方式中最重要的東西就是監測標籤(一個不可見的GIF圖片 Hack#29)。 往頁面上插入監測標籤主要有兩個方法：通過伺服器端的圖片標籤產生器和通過用戶端的JavaScript。 通過JavaScript來創建圖片標籤，網站分析工具供應商能收集到盡可能多的資訊，而通過伺服器端創建的圖片標籤，很多使用者的資訊就收集不到。

document物件的write函數可以把HTML和JavaScript寫入HTML文檔。 下面的代碼就是一個例子：

<script language=」JavaScript」>
<!—
window.document.write(「<img src=’HTTP://visionalist.cn/images/1×1.gif’ />」);
–>
</script>

這表明DOM的結構什麼時候都是可以改變的。 在這個例子中，我們使用document物件往文檔中添加了一個元素，這個元素是一個圖片。 現在這個圖片已經插入進去了，通過DOM就可以訪問到它。

JavaScript文件物件模型中的元素可以在任何時候改變位置。

獲取文檔資訊

接下來圖片的設置是非常重要的。 這個圖片的目的是用來收集頁面，瀏覽器和使用者的相關資訊。 這些資訊也是通過DOM獲取的。 這裡我們試著通過DOM獲取頁面的URL，並將這個URL包含到監測標籤中：

<script language=」JavaScript」>
<!—
var url = window.localtion.href;
window.document.write(「<img src=’HTTP://visionalist.cn/images/1×1.gif?url=’」+url+」 />」);
–>
</script>

幸運的是，通過DOM可以收集到的資訊不僅僅是上邊演示的URL。 比如：頁面配置，多媒體支援，表單設計等資訊它都能提供給我們。 接下來，我們將講解頁面配置。

獲取瀏覽器的寬度

當你把整個Web頁面都放置在瀏覽器視窗的左半部分的話，可能就忽視了一些有價值的資源(空白版面)。 除了讓開發人員去詢問他們朋友的瀏覽器的寬度，可以使用DOM來詢問你的客戶是否存在空間的浪費。

window.document.documentElement.offsetWidth;

在IE的最新版本中，以上代碼能返回瀏覽器視窗的圖元值。 雖然這個特有屬性並不是在所有的瀏覽器裡都可用，但是在大部分瀏覽器中，通過類似的屬性提供了相同的資訊。 如果你使用的網站分析工具中，不能為你提供這些資訊的報告，你可以通過下面的代碼來自己獲取。 寬度被取整到最接近于50圖元的值，以便於在對資料進行排序時不至於很麻煩。

var width=window.document.documentElement.offsetWidth;
var width=Math.round(width/50)*50;// 寬度按50圖元取整

跟蹤表單專案錯誤

到目前為止，DOM主要用來收集Web頁面和瀏覽器的資訊。 其實也可以使用DOM來監視使用者在頁面上的動作。 例如，監視使用者是否使用了表單，以及對表單的使用方式。 使用DOM，當事件發生時來調用相應的事件處理函數。 大多數網站都使用基於JavaScript的表單錯誤驗證，但是這些網站通常都沒有跟蹤表單中那些最容易出錯的專案。 下面的例子將展示如何使用錯誤驗證函數來記錄表單的出錯情況。

定義好checkError函數之後，當表單提交時(onsubmit事件)，JavaScript就會使用DOM來調用該函數。 需要注意的是，在checkError函數中，還調用了一個名叫sendErrorInfo的函數。 網站分析工具會提供類似的函數方法，在頁面中生成一張圖片，然後將錯誤資訊發送到資料收集伺服器。 最終，使用者會得到一個報告(在下一節中會講到)，報告中顯示了網站中最常見的表單出錯情況。

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;
}
當表單提交時調用checkError函數
window.document.forms[0].onsubmit=checkError;

表單分析 – 來自DOM的恩惠

現在應該明白如何使用DOM來生成一張圖片，從而收集瀏覽器資訊，監視使用者的操作情況了，我們可以將這些資訊組合起來，創造一個有價值的統計工具。 DOM可以提供有價值的商業資訊，並且可以窺探到使用者體驗的精妙之處。 例如，可以找到表單中哪個專案讓使用者無法忍受了;信用卡帳號、頭髮顏色、母親的舊姓、或者鄰居家的電話號碼等等是不是太多的專案需要填寫了;到底是在哪一步讓你失去了潛在的客戶?

當使用者離開頁面時，可以使用JavaScript和DOM發送資訊(通過在頁面中生成一張圖片來實現)，我們就可以知道該使用者在離開頁面之前訪問的最後一個表單專案，也許這個表單專案就是讓使用者無法忍受的部分。 圖2-17中的報告展示了Checkout-Shipping頁面的ShippingInfo表單。 值得注意的是，該表單成功提交了154次，但是有202次使用者並沒有點擊過表單就離開了頁面。 還有一點，大多數使用者在點擊了PhoneNumber欄位後就離開了。

圖2-17簡單表單專案分析

所有的分析師都想親自到他們客戶的辦公室裡去瞭解客戶的真實需求，DOM就可以實現他們的願望。 和所有的網站分析工具一樣，這種收集資訊的方法並不能捕捉到100%的使用者，但是由於訪問網站95%的使用者都啟用了JavaScript，因此這些資訊要比「統計學上的重要樣本」多的多。 網站中需要收集的其他資訊還有很多，只需要找到那個能解開這一切資訊的「人」。

— Brett Error, John Pestana, Eric T. Peterson

(版權歸數碼林網站分析博客所有，歡迎轉載，但轉載請注明出處。 )

原文：HTTP://blog.digitalforest.cn/hacks-30-javascript