加入收藏
担路网,一路担当!

为企业提供互联网工具,让供需互动变得触手可及

这两年,互联网让整个不太景气的传统经济稍有了零星的兴奋点。

但是,实在的企业老板绝对不能把互联网当成救市良药,若真把它当成“良药”,无异于传说中的“马踏飞燕”。

但是,我们必须拥抱这个互联网的社会,因为我们的家人,我们的朋友,我们的客户都在用互联网,他们的生活和工作已经无法与互联网绝缘!

网站分析(WA)中您可能不知道的技术原理


发布日期:2016-08-18

网站分析 (Web Analytics,或简称WA) 可以简单的分成主要3个步骤:

  1. 数据收集

  2. 数据报告

  3. 数据分析

第一点是数据收集。

为什么要收集?很简单,收集数据后,才能出报告,才能得出洞悉(insights),(当然有些情况是什么洞悉也没有),然后才能分析。

我们可以通过简单的解析数据收集的原理,去理解数据收集。

网站分析工具(WA Tools)

我们一般理解的数据收集,是需要通过一些网站分析工具实现的,比如:

  • Google Analytics (GA) – 国际免费工具

  • 百度统计 – 国内免费工具

  • CNZZ统计 – 国内免费工具

  • Adobe / Omniture Site Catalyst – 国外付费工具

  • CampAnalytics – 国内付费工具

我们把网站分析工具简称为WA工具,Web Analytics Tools。收集数据的原理是通过在网站的网页上预先埋好需要的JavaScript代码。有时候,我们会把添加JS监测代码叫做“埋点”。

JS监测*重要的好处是,它能把用户访问网页的行为记录,连很明细的行为也能记录,比如点击了那一个button,用了那一个下拉框,等。能收集到的数据会比较全面。

JS监测*麻烦的事情也是埋点,基础埋点一般不会有太大问题,但一旦需要对很明细的数据记录去做埋点,就会比较费工夫。而且,遇到紧急性的活动时,留给埋点设计和部署的时间往往会不够的,要不活动被延误,要不活动上线时埋点工作可能没法完全完成,导致数据记录不全。

通过Google Analytics (GA)去讲WA原理

为了比较容易说明,我们用Google Analytics (GA)的监测代码作为本文章的例子。以下GA以JavaScript方式收集数据的监测代码,它还是GA监测代码中叫做Universal Analytics版本的代码。

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXX-Y', 'auto');

ga('send', 'pageview');

</script>

用*简单的方式说明GA的原理就是,首先把收集到的原始数据保存到Google的服务器上,处理过,之后生成报告,所以就是你平日在GA帐号界面里能看到的可视化报告。

第一部分的代码,其实是在调用一个GA默认而且很重要的JS文件:analytics.js

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

从代码里你可以看到这个analytics.js文件是放在Google的域名(服务器)上的。有些情况为了网页速度下载,有些国内网站也会把文件拷贝并放到本地服务器上,假设你网站域名是www.example.com,就会像这样做:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.example.com/analytics.js','ga');

GA代码里的第二部分是:

  ga('create', 'UA-XXXXXXXX-Y', 'auto');

 

UA-XXXXXXXX-Y是GA给你网站默认配置好的ID号。假如你在GA帐号里添加多个域名/网站,你的GA ID会有比如:

UA-XXXXXXXX-1

UA-XXXXXXXX-2

UA-XXXXXXXX-3

案例:WAW网站监测代码

比如WAW网站分析星期三网站(chinawaw.org)网页上的GA ID就是**的GA ID,跟你网站使用的GA ID并不一样。

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');




ga('create', 'UA-63334315-1', 'auto');

ga('set', 'dimension1','网站分析星期三-中国');

ga('send', 'pageview', {

'dimension2':  ''

});

ga('send', 'pageview');

</script>

代码看来有些跟默认的不一样,因为是WAW的代码里添加了一些通过custom dimension记录更明细的数据,本文章中我就暂时不展开了。

你会发觉你GA监测代码里的第二部分,用了一个’auto’的字段。

  ga('create', 'UA-63334315-1', 'auto');

假设你网站有多个二级域名,比如:

www.example.com

shanghai.example.com

beijing.example.com

shenzhen.example.com

有了这个’auto’字段,GA会理解这几个域名的cookie都需要被归类为一个网站的cookie。

如果没有添加’auto’的话,像一下,用户在访问每个二级域名的网页时,GA都会把用户浏览器中的cookie重置,这样网站的cookie,又即是UV数(**用户数)会被错误多算(重复计算)。

  ga('create', 'UA-XXXXXXXX-Y');

其实WAW网站,暂时并没有使用多个二级域名,所以’auto’暂时是不影响UV数的记录。

我们回来继续讲GA代码中的第三段,以下这行:

  ga('send', 'pageview');

意思基本上是说,把这个用户产生的浏览(Page View / PV)数据记录并传到Google指定的数据库里。

WA记录用户访问的*基础原理,我们刚完成说明了。

部署GA默认*基础的监测代码,基本上’out of the box’的 – 即Google已经把它*简单化过了,标准化过了。一般情况下,部署是不会出什么大错误的。

就算你不懂JavaScript,就算你在读过本文章前并不懂怎样安装GA监测代码,你现在应该可以有足够信息去尝试自己安装GA代码了。

自己动手尝试WA

当一位Web Analyst,其实早晚也需要自己动手干。

手痒的话,可以自己到Google Analytics官网上,开个GA帐号,获取GA代码。

http://www.google.com/analytics

当然你需要先注册一个域名(domain name),购买一个网站空间(web host)。比如在Godaddy.com上,你可以注册一个自己的域名,并买个空间。再到Wordpress.org上,下载一套Wordpress CMS,按照说明安装到你购买好的空间上。安装上GA。

案例:网站分析星期三(chinawaw.org)网站

比如以下是网站分析星期三(chinawaw.org)网站的GA代码:

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');


ga('create', 'UA-63334315-1', 'auto');

ga('send', 'pageview');


</script>

这个代码是需要添加到网站上的每一张网页,这是因为我们需要通过代码去监测每一张网页上的用户行为。

电商数据监测

假设,网站分析星期三(WAW)要新增加一个电商业务,比如会卖的商品有:

  1. 水果类:包括有,橙子、苹果、西瓜、等

  2. 零食类:包括有,瓜子、饼干、糖果、等

比如在某个电商网站上,一个用户选择了某商品,用户下单购买成功。这个用户下过的订单是会有类似这样的记录,该记录并是保存到后台数据库里的。以下我只罗列*基础的信息:

  • 订单号(order id)

  • 订单金额(total price)

每个商品的基础信息会有:

  • 商品名称(item name)

  • 商品**号(SKU)

  • 商品单价(price)

  • 商品数量(quantity)

注: 一个订单可以包含多个SKU,这是因为用户可以在一次下订单购买多个不同的商品。

当然每次下订单,还会牵涉到跟多的用户信息,包括:商品属于的类目、税、配送费用、直销商品还是加盟商的产品(因为可能会牵涉到不同的佣金、等),太多了,为了能比较简单的说明,这里我们暂时先不展开讲。

我们的目的就会需要去监测用户的订单行为。我们可以通过WA工具。比如通过GA去实现的话,在用户提交订单的一刻,在网页上激活以下这个代码:

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');


ga('create', 'UA-63334315-1', 'auto');

ga('send', 'pageview');



ga('require', 'ecommerce');

ga('ecommerce:addTransaction',

{

'id': 't0000399168',

'affiliation': '直销',

'revenue': '270.00',

'shipping': '5.00',

'tax': '27.00',

'currency': 'CNY'

});

ga('ecommerce:addItem',

{

'id': ' t0000399168',

'name': '某品牌橙子',

'sku': 'gt345',

'category': '水果类',

'price': '70.00',

'quantity': '1'

'currency': 'CNY'

});

ga('ecommerce:addItem',

{

'id': ' t0000399168',

'name': '瓜子',

'sku': 'gt017',

'category': '零食类',

'price': '100.00',

'quantity': '2'

'currency': 'CNY'

});

ga('ecommerce:send');

</script>

第一部分是初始化“电子商务”的监测模块:

ga('require', 'ecommerce');

第二部分是一张订单相关的信息。id是给你传订单号,revenue是传订单金额的,其他都是可选项:

ga('ecommerce:addTransaction',

{

'id': 't0000399168',

'affiliation': 'None',

'revenue': '270.00',

'shipping': '5.00',

'tax': '27.00',

'currency': 'CNY'

});

第三部分是每张订单中每个商品相关的信息。id是传订单号,name是该商品的名称,sku是该商品的**识别号,price是该商品的金额,quantity是该商品的数量,其他都是可选项。你留心看会发现这张订单是有两种商品:橙子和瓜子,而且橙子是一份,瓜子是两份。

ga('ecommerce:addItem',

{

'id': ' t0000399168',

'name': '某品牌橙子',

'sku': 'gt345',

'category': '水果类',

'price': '70.00',

'quantity': '1'

'currency': 'CNY'

});

ga('ecommerce:addItem',

{

'id': ' t0000399168',

'name': '瓜子',

'sku': 'gt017',

'category': '零食类',

'price': '100.00',

'quantity': '2'

'currency': 'CNY'

});

**(第四部分)是需要把以上记录到的电子商务(订单)信息传给GA。传GA后,这一切的订单相关数据才会在GA里的电商模块(Ecommerce Tracking)报告里出现。

ga('ecommerce:send');

没有WA工具数据

你要理解的是,就算你网站不用任何WA工具,订单信息肯定也是有记录的。以下是简单的说明:

电商网站,在不安装WA工具的情况下,能收集到的基础订单数据有,每个用户的:

每个订单:

l  订单号(order id)

l  订单金额(total price)

每个商品:

l  商品名称(item name)

l  商品为一号(SKU)

l  商品单价(price)

l  商品数量(quantity)

为什么要把订单数据给GA也传一份?

有WA工具数据

当你网站给GA传一份订单信息后,你才能把用户行为(即用户下订单前)和订单信息绑起来使用,以后才能开始分析。当然还会有更深入的用途,这里就先不展开了。

电商网站,已经顺利安装WA工具的情况下,能收集到的基础订单数据有,每个用户的:

每个订单:

l  订单号(order id)

l  订单金额(total price)

每个商品:

l  商品名称(item name)

l  商品为一号(SKU)

l  商品单价(price)

l  商品数量(quantity)

能交叉匹配到网站用户行为数据,比如:

访问数(sessions)

浏览数(page views)

跳出率(bounce rate)

访问时长(time on site)

设备(device)

城市/地域(city)

来源(source)

等等…

还会有个别页面上比较零碎的一些行为,比如button点击、下拉框行为、等 – 这些取决于你当初埋点的时候的深度和多仔细。

以上把WAW当成一个电商,只是个例子,当然WAW是不可能是个电商。以上例子作为演示给在电商做网站分析的同学们,希望会有点帮助。

GA的Enhance Ecommerce Trackin

关于对电子商务订单数据的追踪,GA已经推出升级版的Ecommerce Tracking,叫做Enhance Ecommerce Tracking。如果你需要通过GA去部署电子商务订单数据的追踪,接下来需要选择部署Enhance Ecommerce Tracking。

以上案例纯是用来说明电子商务追踪订单数据的原理,所以使用了GA的Ecommerce Tracking功能,而并非Enhance Ecommerce Tracking。当然,两个功能其实非常类似。

GA/WA的部署策略

接下来我们来讲WA部署时需要考虑的策略。

继续以网站分析星期三(chinawaw.org)网站的Google Analytics (GA)的帐号为例子。

我们登录到WAW网站分析星期三的GA帐号里,到管理(admin)界面去,*左一列是帐号管理,我们选择了chinaWAW.org帐号(account),下拉框展开后可以看到有多个帐号(这里我们就不全部展开了):

中间一列是Property,用来管理在chinaWAW.org帐号底下的所有properties。

以下的图我们放大后,你会清楚看到一个叫做ChinaWAW.org的property,它对应的GA ID号是UA-63334315-1。

 

你回去看我们上面的WAW 网页上的GA代码,不就是这个ID:

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');


ga('create', 'UA-63334315-1', 'auto');

ga('send', 'pageview');


</script>

*右边一列是View,在ChinaWAW.org property下我们可以建立多个views,一般我们可以通过filters配置,去建立不同的views。这里我们暂时先不展开view的功能。

简单说说Views的意思吧。你GA代码收集到的数据是按property范围的,每个view是在它对应的property的数据范围内的范围。以下的图说明了view与property的数据范围关系:

手机时代的GA/WA high-level部署

在智能手机时代,你会留意到很多国内的电商网站或者旅游产品预订网站,它们会给用户去搭建一个适合手机屏幕使用的网站。

  • www.ctrip.com – 适合PC和平板上使用的网站 (主域名下)

  • m.ctrip.com – 适合手机上使用的网站 (二级域名)

当然,你平常留意多的话,你会看到携程官网(PC/平板适合用)下也有二级域名,比如:

  • flights.ctrip.com

  • hotels.ctrip.com

  • vocations.ctrip.com

当初是什么原因使用过个二级域名,我们这里先不展开了。

我们再以一个基础GA监测代码为例去说明,比如这是用来监测某一个的网站的监测代码。

比如这网站其实有PC站和手机站:

www.example.com – PC站

m.example.com – 手机站

第一个部署方式是,两个二级域名都是用相同的GA ID,比如:

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');


ga('create', 'UA-xxxxxxxx-1', 'auto');

ga('send', 'pageview');


</script>

会造成什么问题呢?你在GA报告看到的任何数据,都是两个站(PC+手机)混在一起的,你会需要用GA报告里的一个功能(second dimension)才能把两个站的数据在报告中区分。(这网站不是WAW)

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');



ga('create', 'UA-XXXXXX-1', 'auto');

ga('send', 'pageview');



</script>

不想数据都混在一堆,经常分不清楚的话,也有办法的。这是第二种方法。给PC站一个GA ID,给手机站另一个GA ID。这个是PC站的代码,留意GA ID是UA-xxxxxxxx-1。

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');




ga('create', 'UA-xxxxxxxx-1', 'auto');

ga('send', 'pageview');




</script>

有注意到,比如GA ID是UA-xxxxxxxx-2,跟PC站不一样的。

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');




ga('create', 'UA-xxxxxxxx-2', 'auto');

ga('send', 'pageview');




</script>

回去管理界面的话,也就是中间一列,会出现2个GA ID。

**一种方法是,用3个GA ID实现。为什么3个?

首先GA报告里用的数据是不能回滚的,比如你一开始用一个GA ID放在两个站上(PC和手机),已经归属到这个ID的数据,是不能通过其他方式去区分了。

另外,如果你在中途,部署第二种方式,收集到的数据是从代码部署完成开始的。你第一种方式的代码如果同时撤掉的话,你老的数据就在放在第一个property里,而后来的数据都只能在后来添加的properties里。

又不想失去以前的数据延续性,有需要以后把两个站的数据区分开,你会需要分别在PC站和手机的网页上修改小部分GA代码。比如,PC站的网页上,需要改成:

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');




ga('create', 'UA-xxxxxxxx-1', 'auto');

ga('send', 'pageview');




ga('create', 'UA-xxxxxxxx-2', 'auto', 'a');

ga('a.send', 'pageview');




</script>

手机站的网页上,需要改成:

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');


ga('create', 'UA-xxxxxxxx-1', 'auto');

ga('send', 'pageview');


ga('create', 'UA-xxxxxxxx-3', 'auto', 'b');

ga('b.send', 'pageview');


</script>

留意到UA-xxxxxxx-1 (property 1)是继续保留的,而且分别在PC站和手机站添加了UA-xxxxxxx-2 (property 2)和UA-xxxxxxx-3 (property 3)的监测。

*终实现到的数据收集就像以下图里,数据收集到3个properties里。

WAW网站的GA/WA部署

chinawaw.org网站只有www.chinawaw.org 一个域名,而并没有用到m.chinawaw.org (你不相信可以在浏览器上尝试打开,然后你会发现它并不存在)。 你可以自己分别在PC打开www.chinawaw.org,你会发现在PC浏览器上,WAW网站是这样的:

而在手机浏览器(比如苹果iPhone里的Safari),它是这样的:

 

WAW是不需要给PC和手机提供两个不同二级域名的,因为网站本身采用了Responsive design (响应式设计)。如果是熟悉Wordpress CMS模板设计的同学,还会看得出WAW网站的模板/CMS是Wordpress的。简单说,无论网站从PC访问还是手机访问,都只有一个版本的域名(或URL)。

所以chinawaw.org无论如何就只需要用一个property。

顺带推荐更多关于Google Analytics代码部署的案例:

  • Gordon Choi的Analytics Book书中的这一章(Google Analytics Tracking Codes)详细说明了更多GA代码部署的案例。




分享到:

加载中
旗下网站
产品体系
其它链接
CONTACT
联系我们
  • 热线:021-39517056 代理商咨询:15121033560
  • 投诉专线: 15121030463
  • 公司地址: 上海松江九亭九杜路349号417/418/419
  • 几万客户见证
  • 6x8小时售后服务
  • 免费的产品培训
  • 基于SaaS的云架构
  • 系统持续更新
友情链接:

高新技术企业编号:GR201631001183        ISO9001证书编号:ZZW16Q1111ROS