收藏本站|设为首页

您现在的位置: 首页 > 新闻中心 > 建站经验 > 详细内容

网站剖析Hacks精选系列之JavaScript文档对象模子

2012-10-12 13:40 来源: 卓杰科技 www.zhuojie.cc [ ]

所有的剖析师都想亲自到他们客户的办公室里去体味客户的真实需求,DOM就可以实现他们的愿望。和所有的网站剖析工具一样,这种收集信息的体例并不能捕捉到100%的用户,可是因为访谒网站95%的用户都启用了JavaScript,是以这些信息要比“统计学上的主要样本”多的多。网站中需要收集的其他信息还有良多,只需要找到阿谁能解开这一切信息的“人”。

– HACK#30 “Hack the JavaScript Document Object Model”

注:相关网站培植技巧阅读请移步到建站教程频道。

网站剖析解决方案普遍采用标签体例,理解他们是若何使用JavaScript文档对象模子(DOM)的。

● 浏览器的版本

● 操作系统的时刻

● 操作系统的说话

● 显示器的分辩率

● 显示器的颜色深度

● 浏览器的高度和宽度

● 表单剖析

简单表单项目剖析

获取浏览器的宽度


}

界说好checkError函数之后,当表单提交时(onsubmit事务),JavaScript就会使用DOM来挪用该函数。需要注重的是,在checkError函数中,还挪用了一个名叫sendErrorInfo的函数。网站剖析工具会供给近似的函数体例,在页面中生成一张图片,然后将错误信息发送到数据收集处事器。最终,用户会获得一个陈述(不才一节中会讲到),陈述中显示了网站中最常见的表单犯错情形。

文档对象模子(DOM)是Web浏览器和JavaScript用来存储和获取文档(也就是页面)信息的一个数据结构(图 2-16)。JavaScript和JavaScript开发人员使用DOM收集数据,并显示数据信息。年夜插入网页监测标签到收集网站用户信息,DOM是焦点。在图2-16中只是展示了DOM组件的一个片段,它能清楚的展示DOM年夜体结构。window对象是根节点,经由过程它能访谒到所有其他元素。每一个对象都拥有函数、属性、事务、或者是包含其他对象。使用JavaScript可以存取或者节制DOM的每一个元素,下面的章节会具体声名。

 JavaScript的文档对象模子

图2-16 JavaScript的文档对象模子


var width=Math.round(width/50)*50;// 宽度按50像素取整

插入监测标签

跟你猜想的一样,基于监测标签的网站数据收集体例中最主要的工具就是监测标签(一个不成见的GIF图片 Hack#29)。往页面上插入监测标签首要有两个体例:经由过程处事器端的图片标签生成器和经由过程客户端的JavaScript。经由过程JavaScript来建树图片标签,网站剖析工具供给商能收集到尽可能多的信息,而经由过程处事器端建树的图片标签,良多用户的信息就收集不到。

年夜年夜都网站剖析工具供给商都普遍使用JavaScript文档对象模子(DOM),你可能会担忧供给商的代码是否会干扰到你自己的JavaScript代码。更主要的是,你应该也会担忧处事商为了收集数据,使用了DOM可能供给的所稀有据。


// –>
</script>

这剖明DOM的结构什么时辰都是可以改变的。在这个例子中,我们使用document对象往文档中添加了一个元素,这个元素是一个图片。此刻这个图片已经插入进去了,经由过程DOM就可以访谒到它。

获取文档信息

接下来图片的设置长短常主要的。这个图片的目的是用来收集页面,浏览器和用户的相关信息。这些信息也是经由过程DOM获取的。这里我们试着经由过程DOM获取页面的URL,并将这个URL包含到监测标签中:

<script language=”JavaScript”>
<!—
var url = window.localtion.href;
window.document.forms[0].onsubmit=checkError;

window.document.write(“<img src=http://www.zhuojie.cc/?/web/2012/1012/’http://www.zhuojie.cc/?/2012/1012/1350020408930.gif?url=’”+url+” />”);
// –>

document对象的write函数可以把HTML和JavaScript写入HTML文档。下面的代码就是一个例子:

<script language=”JavaScript”>
</script>

幸运的是,经由过程DOM可以收集到的信息不仅仅是上边演示的URL。好比:页面结构,多媒体撑持,表单设计等信息它都能供给给我们。接下来,我们将讲解页面结构。

此刻应该年夜白若何使用DOM来生成一张图片,年夜而收集浏览器信息,看管用户的操作情形了,我们可以将这些信息组合起来,缔造一个有价值的统计工具。DOM可以供给有价值的商业信息,而且可以窥探到用户体验的精妙之处。例如,可以找到表单中哪个项目让用户无法忍受了;信用卡账号、头发颜色、母亲的旧姓、或者邻人家的电话号码等等是不是太多的项目需要填写了;到底是在哪一步让你失踪去了潜在的客户?

当你把整个Web页面都放置在浏览器窗口的左半部门的话,可能就轻忽了一些有价值的资本(空白版面)。除了闪开发人员去询问他们伴侣的浏览器的宽度,可以使用DOM来询问你的客户是否存在空间的华侈,

window.document.documentElement.offsetWidth;

下面是一些DOM供给的信息的例子:

跟踪表单项目错误

当用户分开页面时,可以使用JavaScript和DOM发送信息(经由过程在页面中生成一张图片来实现),我们就可以知道该用户在分开页面之前访谒的最后一个表单项目,也许这个表单项目就是让用户无法忍受的部门。图2-17中的陈述展示了Checkout-Shipping页面的ShippingInfo表单。值得注重的是,该表单成功提交了154次,可是有202次用户并没有点击过表单就分开了页面。还有一点,年夜年夜都用户在点击了PhoneNumber字段后就分开了。

到今朝为止,DOM首要用来收集Web页面和浏览器的信息。其实也可以使用DOM来看管用户在页面上的动作。例如,看管用户是否使用了表单,以及对表单的使用情形。使用DOM,当事务发生时来挪用响应的事务措置函数。年夜年夜都网站都使用基于JavaScript的表单错误验证,可是这些网站凡是都没有跟踪表单中那些最轻易犯错的项目。下面的例子将展示若何使用错误验证函数来记实表单的犯错情形。

function checkError() {
    // 搜检信用卡号是否是16位
    if ( window.document.forms[0].creditcard.value.length!=16 ) {
        sendErrorInfo(window.document.forms[0].name, “Credit Card Error: Length”);
        return false;

在IE的最新版本中,以上代码能返回浏览器窗口的像素值。虽然这个特有属性并不是在所有的浏览器里都可用,可是在年夜部门浏览器中,经由过程近似的属性供给了不异的信息。如不美观你使用的网站剖析工具中,不能为你供给这些信息的陈述,你可以经由过程下面的代码来自己获取。宽度被取整到最接近于50像素的值,以便于在对数据进行排序时不至于很麻烦。

var width=window.document.documentElement.offsetWidth;

本文节选译自网站剖析巨匠Eric T.Peterson的《Web Site Measurement Hacks》


// 更多的错误搜检
    return true;
}
// 当表单提交时挪用checkError函数
<!—

表单剖析 – 来自DOM的恩义

JavaScript文档对象模子中的元素可以在任何时辰改变位置。


window.document.write(“<img src=http://www.zhuojie.cc/?/web/2012/1012/’http://www.zhuojie.cc/?/2012/1012/1350020408186.gif’ />”);

图2-17简单表单项目剖析

— Brett Error, John Pestana, Eric T. Peterson

文章来历:数码林网站剖析博客,转载请注明出处。