WA中您可能不知道的小技术(三)

上一篇“WA中你可能不知道的小技术2”文章里我们讲过电子商务监测,即通过WA工具,监测用户订单行为。这次我们来讲WA部署时需要考虑的策略。

连续两篇文章,我们都罗列了很多代码,本文章里我们会多用一些图去说明。

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

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

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

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

你回去看我们上两篇文章给你讲过的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的功能。
004

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

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

lwww.ctrip.com – 适合PC和平板上使用的网站 (主域名下)
lm.ctrip.com – 适合手机上使用的网站 (二级域名)

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

lflights.ctrip.com
lhotels.ctrip.com
lvacations.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)
006

<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。
007

最后一种方法是,用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里。

008

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

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

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

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

总结
很多时候,由于不同的情况,不同的原因,会有不同的需求。就以我们刚讲过的一些网站会使用到二级域名,其他又不使用。

好啦,已经一共3篇文章了,所以顺带一提,我们例子上使用的GA代码都是GA Universal Analytics版本的代码,假如你不是这个版本,比如是老一号版本(Asynchronous)的,代码看起来会跟我们文章里的不一样。

作者简介
蔡维东Gordon Choi,E-Bizcamp联合创始人