网站术语与度量基础知识及网页技术基础知识

“美丽说”是目前国内大型女性社区时尚媒体，成立之初即开创“内容—社区—导购”的新模式，快速吸引了上千万年轻时尚爱美的女性用户，成为中国年轻女性青睐的时尚风向标。

1）网站术语与度量基础知识

(1)Visit

Visit表示“访问”，如果数据分析工具对Visit的定义不同，那么相同的“访问”行为会得到不同的数据结果。例如：数据分析工具定义1个Visit是一系列在网站上的点击鼠标的动作，且两个点击网站页面超链接的时间不能超过30 min。如果两次点击间隔20 min，就记录1次Visit。如果两次点击时间间隔35min，就记录2次Visit。

(2)UV

UV是Unique Visitor的简称，意思是唯一的访问者。UV在网站数据分析里面是非常重要的一个Metric（度量），也是一个重要的KPI（Key Performance Indicator，关键性能指标）。

举例说明UV的重要性。例如：数据分析工具记录了访问某网页的访问记录有10次，即Visit=10次，UV≤10人。同一个访问者登录某网页浏览后关闭了浏览器，过了一段时间再回来，打开收藏夹，又打开同一页面看了一会儿，工具会记录Visit=（1+1）次，UV=1。例子中UV的准确表达式：0<UV≤10（UV∈Z）。

(3)PV

PV是Page View的简称，译为页面浏览，是可以被量化的。PV=1的通俗解释为：网络服务器接到来自浏览器发出的一个浏览页面的Request（请求）之后，会开始把该Request对应的一个Page（网页）发送到客户端的浏览器上。一般来说，只要浏览器发出Request，无论有没有成功下载这个网页，PV都被记录一次。

(4)Bounce Rate

访问者从其他网站开始访问美丽说网站，进入的第一个页面称为Enter Page，Enter Page逐渐打开，如果没有完全打开（下载完毕）就被访问者关闭，美丽说网站的分析数据里面就记录一次Loss（丢失）。Bounce是指浏览器下载完Enter Page进入美丽说网站后，却没有用鼠标点击Enter Page上面的任何Link（链接），就关闭了它。从网站数据分析角度讲就是Bounce+1。简单来说，如果成功进入一个网站，却没有点击该网站上的任何链接，那么就为这个网站创造了一个Bounce。

Bounce Rate是指对某个网站的访问中，Bounce掉的访问占总访问数量的百分比。计算的方法一般使用Visit来计算。即Bounce Rate=Single Page Visits/Total Visits（只浏览了一个页面的访问/全部的访问）

Bounce Rate是非常重要的，它可以反映网站对于访问者吸引力的强弱。更重要的是在网络营销效果分析方面它极具说服力。即使把访问者都引导进入宣传产品或品牌的网站上，如果访问者都Bounce掉了的话，Bounce Rate将接近100%，将是非常可怕的事情。因为这意味着网站的访问者都跑掉了，所以Bounce Rate有一个贴切翻译“蹦失率”。

（5）Homepage与Landing Page

大多数互联网的冲浪者都知道网站首页，那就是一个网站提纲挈领的“门面页”，网站分析中将其称为Homepage。一个网站最终都是以页面（Page）的形式显示。即使这个网站背后有很大的数据库，以及极为复杂的程序，最终表现给访问者的一定都是一个一个互相链接（Link）的Page。

如果说Homepage是从网站本身产生的一个概念，那么Landing Page就是关于网络广告或者网上网站推广的一个概念。例如：某网站有A、B、C 3个页面，现在你要推广这个网站，因此你做了2个banner（可以链接的图片广告），一个是a，一个是b，分别放到搜狐和新浪上。其中，a直接链接到你网站的A页面，b则直接链接到B页面。这样，A相对于广告banner a而言，就是它的Landing Page。同样，B是b的Landing Page。除了banner，对于花钱竞价的搜索引擎关键词也同样存在Landing Page，道理是完全一样的，只是这时候的Landing Page是对应于关键词的，而不是对应于Banner的。

（6）Im pression、Click与CTR

电子商务网站数据分析所指的分析对象可以是网站本身，还可以是与网站相关的网络营销活动。因为让互联网用户访问网站是目的，而网络营销则是激发用户访问网站的手段。只分析目的而不看手段，不可能达到分析的目的。

Impression的意思是“显示”，网络营销中一个广告被显示了多少次，“显示”就计数多少。比如，你打开“美丽说”的一个页面，这上面的所有广告就被“显示”了一次，每个广告增加1个Impression。如果你刷新这个页面，所有的广告就又增加1个Impression，每个广告总计增加2个Impression。

Click是指互联网用户点击某个广告的次数，无论用户是真正想点击还是误点击了，也不管弹出的新页面有没有全部打开，总之Click一下算一下。

很少单纯用Impression和Click做分析，但它们是很多更复杂分析的基础，CTR就是其中之一。一般而言，Click比Impression要小很多，原因不言而喻。因此，把某个广告的实际被点击（Click）的数量除以它的Impression的数量，就是Click Through Rate，译为“点击通过率”，或简称“点击率”。

CTR计算公式：CTR=Click/Impression

如果一个广告的Impression是100次，被点击了1次，那么CTR就是1个Click除以100个Impression，即CTR=1%。一般网站的CTR在千分之几的数目上徘徊，即1 000个Impression才可能产生几个Click，而且其中还可能有误点击的。

(7)Engagement

Engagement是网站数据分析中唯一一个存在不确定性的度量，译为“交互度”。顾名思义，“交互度”衡量的是访问者和网站的交互程度。一般认为，访问者对电子商务网站提供的服务做出某些能被网站感知的反应的行为，在网站数据分析中这些行为被认定为“交互”。交互的类型包括但不限于：

①访问网站、收藏宝贝、分享链接、点击链接，访问下一个页面；

②宝贝放入购物车、下单支付；

③在线咨询、提交留言、参与调查；

④进入互动游戏（如Flash形式的游戏）；

⑤取消订单。

你会看到，所有上面的这些交互行为都有一个共性，那就是用户必须做点儿能让网站感知的事情，使网站与用户之间产生“互动”。Engagement是上面这些行为的总称，并且还可以继续根据用户的消费心理和行为扩充。Engagement作为一个度量，就是衡量网站和用户之间交互的整体情况，而不是分别衡量网站的各个交互类型。

如果用一个数量来衡量Engagement，则称这个数量为Engagement Index，即“交互度指数”。如何得到一个网站的Engagement Index，举一个计算某网站某页面的用户Engagement Index的例子，从而发现用户在这个页面上的参与度究竟如何，如图1-1所示。

图1-1　网站交互度指数计算

具体过程如下所述。

第一，首先考虑“美丽说”首页的不同交互，哪些是你认为重要的，哪些是次重要的，哪些是不重要的。假设存在一个在线营销活动，我们最希望首次访问网站的用户点击E区，访问“广告活动”页面。其次，我们希望用户尽量注册我们的网站，也就是C区，然后我们希望用户登录，即B区。再次，我们希望用户尽量能够扫二维码下载“美丽说”手机客户端，即A区。最后，我们希望用户根据商品类目点击访问D区，继续留在网站内浏览商品。虽然点击D区的价值没有前述行为那么大，但至少提升了PV。这样，我们就有了一个图景：首访用户访问的价值从大到小依次是：E>C>B>A>D。

第二，为不同的价值互动区域赋以不同的权重（Weights）。既然，我们认为对E区的访问是最有价值的，那么我们就为每个点击E区的行为赋5分。点击C区的行为赋值3分，单次点击B、A、D区域的赋值分别为：2分、1．5分、1分。除了A、B、C、D、E区域外，还有其他可以点击访问的链接，但是我们认为它们对这次营销活动意义不大，因此不赋分数。(www.xing528.com)

第三，假设24小时更新网站统计数据（这里主要指网站首页A、B、C、D、E区域的点击次数），点击A、B、C、D、E区域的次数依次为：A=1 000，B=2 500，C=10 000，D=200，E=50。将各区域的点击次数与各自的权重相乘，然后再相加，得到的总数即是Engagement Index。Engagement Index=1 000×1．5+2 500×2+10 000×3+200×1+50×5=36 750。

第四，与具有可比性的数据进行比较，例如：其他的营销活动数据，或者历史数据相比较，就能够说明这一次网站开展营销活动互动情况的效果。

Engagement作为一个非常特殊的度量。第一，它是一个复合度量，即权重和访问的乘积，然后求和；第二，它并不是放之四海而皆准的度量，根据不同的营销目的或网站，其度量规则一般都是不同的。

2）网页技术基础知识

（1）html简介

HTML是Hyper Text Markup Language的缩写，译为超文本标识语言，是一种广泛应用于Internet网页制作的标记语言，也是描述网页内容和外观的标准。HTML文档是由HTML标签组成的描述性文本，可以标识文字、图形、动画、声音、表格和链接等。

（2）html结构

使用HTML标签编写的文档称为HTML文档，一般包含两个部分：头部区域和主体区域。HTML文档基本结构由3个标签负责组织，即<html>、<head>、<body>。其中<html>标签标识HTML文档，<head>标签标识头部区域，而<body>标签标识主体区域。一个完整的HTML文档基本结构如图1-2所示。

每个标签都是成对组成的，第一个标签（如<html>）表示标识的开始位置，而第二个标签（如</html>）表示标识的结束位置。<html>标签中包含<head>和<body>标签，并且<head>和<body>标签是并列排列的。如果把图1-2中的字符代码放置在文本文件中，然后另存为“test．html”，就可以在浏览器中浏览了。

图1-2　HTML文档基本结构

（3）HTML语法

HTML文档是一个文本文件，它由标签和信息遵循一定的组合规则混合组成，否则浏览器是无法解析的。标签包含的内容称为网页元素，网页文档就是由元素和标签组成的容器。所有的标签都包含在“<”和“>”中，例如：<style>、<head>、<body>和<div>等。在起始标签之间包含的是元素主体，例如：<body>和</body>中间包含的就是网页内容主体，如图1-3所示。

图1-3　HTML文档网页内容主体

起始标签包含元素的名称以及可选属性。元素的属性包含属性名称和属性值两部分。例如：<div id="topbar"style="height：31px">，如图1-4所示。

图1-4　HTML文档起始标签包含的元素

（4）HTM　L标签

HTML定义的标签比较多，在使用中不用死记硬背，随着阅读运用频率的增加，相信能够理解这些标签的含义与作用。链接标签<a>…</a>，标识超链接，可以实现把多个网页联系在一起；多媒体标签<img/>，嵌入图像并进行显示；表格标签<th>…</th>，定义表头；<tr>…</tr>，定义表格行；<td>…</td>定义表格单元格。表格标签用来组织和管理数据。表单标签主要用于制作交互式表单，例如：<input/>定义文本域、按钮和复选，<textarea>…</textarea>定义多行文本框，<select>…</select>定义下拉列表，<option>…</option>定义下拉列表中的选择项目，部分标签如图1-5所示。

图1-5　HTML文档标签

（5）HTML属性

HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。HTML元素包含的属性众多，仅就部分公共属性进行最简要介绍。基本属性主要包括：class、id、style 3个，这3个基本属性大部分元素都拥有。语言属性主要用来定义元素的语言类型，包括：lang、dir2个。键盘属性定义元素的键盘访问方法，包括两个属性：accesskey、tabindex。内容属性定义元素包含内容的附加信息，这些信息对于元素来说具有重要补充作用，避免元素本身包含信息不全而被误解，它们分别是：alt、title、longdesc、cite、datetime，部分元素属性如图1-6所示。

图1-6　HTML元素属性

(6)JavaScript

JavaScript的缩写是JS，它是一种脚本语言，不是一种工具。实际运行所写的JS代码的软件是环境中的浏览器，JS依赖于浏览器本身，与操作环境无关。只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。JavaScript通过浏览器实现信息浏览或动态交互，但它不允许访问本地的硬盘，而且不能将数据存入服务器，不允许对网络文档进行修改和删除，这样可以有效地防止数据的丢失，因此非常安全。

JavaScript与编译性Java语言不同，是Web开发中基于对象的一种脚本语言。“基于对象”是相对于“基于过程”而产生的概念。“基于过程”和“基于对象”的主要区别是：“基于过程”没有办法重复使用，“基于对象”可以重复使用。

这里举个比较简单的例子说明。1+2+3这就是一个过程，计算结果是6。当改为4+5+6，前面的过程1+2+3没有办法重复使用，又要重新写代码。a+b+c命名为A（a，b，c）对象，A是对象名，a，b，c分别是对象的参数，a+b+c是对象的主体，也称为对象的过程，它可以重复使用。A（1，2，3）这就是对象调用，结果是6，不需要写成1+2+3。A（4，5，6）这就是对象调用，结果是15，不需要写成4+5+6。为什么称为对象？这是从英文object翻译过来的，我们可以理解为对象就是有相同过程的集合。

JavaScript缩短传统的编写—编译—链接—运行（edit-compile-link-run）过程，可以直接嵌入在HTML页面中，把静态页面转变成为支持用户交互并响应相应事件（例如点击鼠标、移动窗口、选择菜单等就是一个个“事件”）的动态页面。

使用JavaScript脚本实现的动态页面，在网站上随处可见。例如：JavaScript可以在客户端对输入的数据进行验证。制作用户注册信息页面时，要求用户输入确认密码，如果“确认密码”与“密码”文本框中的信息不一致时，将弹出相应提示信息：用户名或密码错误，请重新登录，如图1-7所示。

广告窗口是网站的重要盈利方式，因此在打开网页时经常看到一些浮动的广告窗口。这也可以通过在<body></body>之间放入一段JavaScript代码来实现。对有一定JavaScript基础的人而言，要制作浮动广告是比较容易的。想进一步了解浮动广告是怎么做出来的，可以进一步学习JavaScript的详细内容，并自己亲手操作一下。

为了突出网页某个频道的显示内容常应用jQuery。另外jQuery也可以实现选项卡的效果。jQuery是JavaScript的一个代码库，或习惯性称为类库，它将一些在JavaScript开发中经常用到的功能集合起来，以方便开发者直接使用，而不需要再用原生JavaScript语句编写大量代码，同时可在不同浏览器间实现一致的效果，是当前较为流行的JavaScript库之一。

图1-7　使用JavaScript脚本实现的动态页面

3）认识网站分析数据的体会

抱着认识网站分析数据的目的进行一个网站的概览，不再是闲庭信步般地东点点，西瞅瞅，而是从网站建设角度观察网站定位、Homepage图文细节；从度量角度观察影响网站运营的各项因素；还要尽量收集、学习网页制作的技术要点。

在浏览网站的过程中我们更加形象、清晰地认识网站的定位。“美丽说”定位为白领女性快消费平台，帮助解决女性穿衣打扮、美容护肤问题，其核心用户是23～30岁的女性群体，Homepage的整体风格充分彰显了网站的这一定位。Homepage的“全部商品”提示网站所有商品的分类，大版面地展示新品，以及大量商品图片宣传都直指定位的核心买家用户。整个网站多渠道聚集用户，Homepage顶端充分运用“用户注册”“登录”“手机扫码下载客户端”等交互性设计，加强用户与网站间的互动。网站的首页充分体现了它是根据年轻女性爱美需求量身打造的购物类网站。

从运营的角度观察“美丽说”网站，将提出一系列用户行为数据的疑问。网站的Visit与UV值分别是多少？为什么会形成差异？UV、PV怎么定义？通过UV与PV的对应关系可以对用户进行细分吗？后台统计功能可以记录新老用户每次来到“美丽说”的Landing Page吗？不同Landing Page的Bounce Rate对比情况如何呢？可以查看每日注册用户的增量吗？这些增量中有多少来自站外投放广告的引流呢？Impression、Click怎么计算？CTR多少？广告投放成本又是多少呢？能接触的网站用户就是学习者最好的用户研究对象，越多人参与学习意味越多有关Engagement的样本。可以设定一套Engagement指数计算方案，进行统计计算。

“美丽说”就是年轻女性专属的购物中心，它的页面好比购物中心的一个个展位空间。网站运营人员一定想知道：如何呈现网页才能更好地吸引用户？解答这个问题需要学习web前端开发基础技术：HTML、CSS、JavaScript语言。简单说，HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。CSS样式是表现，就像网页的外衣。如标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。JavaScript是用来实现网页上的特效效果，如鼠标滑过弹出下拉菜单，或鼠标滑过表格的背景颜色改变，还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。如果作为网站运营人员对这3门技术一无所知的话，现在赶快去“美丽说”网站上去寻找并感受一下它们的魅力吧。