邵珠庆の日记 生命只有一次,你可以用它来做很多伟大的事情–Make the world a little better and easier


38月/12

Google Analytics跨域跟踪原理分析与设置-[跟踪代码设置]

发布在 邵珠庆

 

自定义域跟踪可用于多种情况:

  • 子域 - 跟踪访问过 dogs.example.com 和 www.example.com 这两个网站的所有访问者,两者的数据将显示在同一个报告配置文件中
  • 子目录 - 只跟踪访问了某个子目录(如 www.example.com/dogs)的访问者,其数据将单独显示在一份报告中,就像它是一个单独的网站一样
  • 顶级域 - 跟踪对您拥有的两个域(如 www.example.com 和 www.example2.com)进行访问的所有访问者,两者的数据将显示在同一个报告配置文件中
  • IFrame 的内容 - 跟踪另一个域的 iFrame 中的内容的访问者和浏览量数据。

部署实现要点,请严格按照实验步骤实现:

前两点:注意push方法的顺序;_setDomainName设置

  _gaq.push(['_setAccount', 'UA-XXX-1']);

  _gaq.push(['_setDomainName', '.XXX.cn']);//(请设置在各自跨域的根域下)

  _gaq.push(['_setAllowLinker', true]);

  _gaq.push(['_setAllowHash', false]);

  _gaq.push(['_trackPageview']);//(请放在后面,否则会重新刷新Cookie)

后两点:传递链接href与_link要是同一个URL;要写return false

<a href="http://abc.shaozhuqing.com/abc.html" onclick="_gaq.push(['_link', ' http://abc.shaozhuqing.com/abc.html']); return false;">_link(get) View My OTA fengshun</a>

辅助工具插件:

Firebug查看Cookie的变化和_utm.gif参数的专递

Omnibug 监控服务器发送请求情况

默认情况下,Google Analytics为每个独立域名(包括主域名下的子域名)创建单独的数据报告(包括访问者信息、流量来源等),两个域名网站间的任何链接将被归为引荐流量。因此,如果要实现同时跨域跟踪主域名与子域名、单独跟踪网站的某个子目录、同时跨域跟踪两个主域名、跟踪iFrame嵌入的域名内容等,就需要对Google Analytics基础跟踪代码进行自定义,以实现跨域跟踪。本文将介绍Google Analytics跨域跟踪的设置,以及和大家一起探讨跨域跟踪的原理。

Google Analytics跨域跟踪代码设置:跨域跟踪主域名及其子域名、跨域跟踪两个主域名、 跨域跟踪主域名与另一主域名的子目录 、 跨iFrame跟踪 、 跟踪单个子目录 、 跨主域名跟踪其两个或多个子目录

跨域跟踪原理说明

默认情况,Google Analytics通过读取网页托管的 document.domain 属性,获取网站的域名(主域名、子域名),然后为其设置/读取 Cookie,并最终生成该域名的数据。

Google Analytics跨域跟踪Cookie主域名与域哈希值

图一:Google Analytics跨域跟踪Cookie主域名与域哈希值

因此,可以通过控制各域名间(主域名与主域名之间、主域名与子域名之间)的Cookie共享,将各域名的访问数据记录到同一个域名Cookie上,实现主域名之间、主域名与子域名之间的访客数据共享,即跨域跟踪。

跨域跟踪设置成功后,通过查看浏览器访问Cookie中Google Analytics跟踪参数_utma,你会发现各个域名下的Cookie有相同的部分,例如跨域跟踪主域名与其二级域名设置后,Cookie中_utma都属于共同一个域名,例如.exmaple.com,且其域哈希值为1。

同样,可以通过限制Cookie共享,实现Google Analytics跟踪单个子目录。

Google Anlaytics跨域跟踪主域名及其子域名

图二:Google Anlaytics跨域跟踪主域名及其子域名

跨域跟踪主域名及其子域名

通常,规模较大的网站会考虑为每个大分类、项目、购物车等在主域名下创建一个独立子域名,例如:

* www.example-.com

* news.example.com

* cart.example.com

对于此类情况,你需要对主域名与子域名的所有跟踪代码使用以下的自定义设置。

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-1']);
_gaq.push(['_setDomainName', '.example.com']);
_gaq.push(['_setAllowHash', false]);
_gaq.push(['_trackPageview']);

 

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

说明:_setAllowHash(bool),此方法主要用于设置“允许域哈希”,当设置为true(默认值)时Google Analytics会为每个域名设置一个哈希值,并以此来辨别访客Cookie的完整性,此时访客Cookie将拒绝接收另外域名的访问数据;设置为false将停用域哈希功能(此时域哈希值为1),可进行Cookie数据共享。

Google Analytics跨域跟踪两个不同的主域名

图三:Google Analytics跨域跟踪两个不同的主域名

_setDomainName(DomainName),为Cookie设置域名,跨域跟踪时设置为:前导向“.”主域名,设置前导向“.”主要便于更深层级子域名的跨域跟踪,例如跨域跟踪二级子域名下的三级子域名a.news.example.com。

通过将各域名所有跟踪代码,设置为以上自定义跟踪,即可实现跨域跟踪主域名及其多级子域名。

跨域跟踪两个主域名

若要同时跟踪两个不同的主域名(例如网店www.store.com与购物车www.carts.com),可以做一下跟踪代码自定义。

主域名www.store.com中设置的跟踪代码

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-1']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_setDomainName', '.store.com']);
_gaq.push(['_setAllowHash', false]);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

同时,需要给www.store.com中跳转到www.carts.com的链接以及数据表单添加跟踪代码,以传递Cookie共享数据:

<a href="www.carts.com"
onclick="_gaq.push(['_link', 'www.carts.com']); return false;">View My Carts</a>
<form name="f" method="post" onsubmit="_gaq.push(['_linkByPost', this]);">

主域名www.carts.com的跟踪代码为:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-1']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_setDomainName', '.carts.com']);
_gaq.push(['_setAllowHash', false]);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

同时,传递链接以及数据表单Cookie共享数据:

<a href="www.store.com"
onclick="_gaq.push(['_link', 'www.store.com']); return false;">View My Store</a>
<form name="f" method="post" onsubmit="_gaq.push(['_linkByPost', this]);">

说明:_setAllowLinker(bool),true启用跨域跟踪,并允许通过链接、表单在地址参数中传输Cookie数据,默认为flase;_link()、_linkByPost()分别用于跨域跟踪中链接、表单的Cookie数据传输。

跨域跟踪主域名与另一主域名的子目录

如果想跨域跟踪跟踪一个网站(www.example.com)以及在一另个域名目录下的内容(例如博客、购物车等,www.other.com/myblog),那么可以采用以下跟踪代码(请自行修改UA-XXXXX-1、.example.com):

主域名www.example.com中设置的跟踪代码

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-1']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_setDomainName', '.example.com']);
_gaq.push(['_setAllowHash', false]);

 

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

同时,需要给www.example.com中跳转到www.other.com/myblog的链接以及数据表单添加跟踪代码,以传递Cookie共享数据:

<a href="www.other.com/myblog"
onclick="_gaq.push(['_link', 'www.other.com/myblog']); return false;">View My Blog</a>
<form name="f" method="post" onsubmit="_gaq.push(['_linkByPost', this]);">

另一主域名的子目录跟踪代码为:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-1']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);

 

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

同样需要给跳转到www.example.com的链接与数据表单,添加跟踪代码:

<a href="www.example.com"
onclick="_gaq.push(['_link', 'www.example.com']); return false;">View My Site</a>
<form name="f" method="post" onsubmit="_gaq.push(['_linkByPost', this]);">
Google Analytics跨iFrame跟踪

图四:Google Analytics跨iFrame跟踪

由于二者没有共同的主域名,因此需要将www.other.com/myblog中的_setDomainName设置为none,并通过给链接、表单添加代码传送Cookie共享数据。

跨iFrame跟踪

若想同时跟踪网站(例如www.example.com)以及通过iFrame嵌入的另一个网站(例如www. iframecontent.com)间的访客信息、广告些列信息等,需要已设置跨域跟踪两个域名的跟踪代码后,使用在www.example.com中(iframe嵌入的当前页)使用_getLinkerUrl() 方法传输共享Cookie数据。

_gaq.push(function() {
var pageTracker = _gat._getTrackerByName();
var iframe = document.getElementById('myIFrame');
iframe.src = pageTracker._getLinkerUrl('http://www. iframecontent.com/');
});

说明:_getLinkerUrl(targetUrl, useHash) ,用于跨域跟踪主域名与iFrame(或者在新窗口中打开的外部网站链接)时的网址参数传递Cookie共享数据。

跟踪单个子目录

如果你的网站字子目录没有采用子域名形式,内容又很多或者是单个独立项目(例如www.example.com/myblog/),想单独跟踪,那么可以在该子目录下采取以下跟踪代码:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-1']);
_gaq.push(['_setCookiePath', '/myblog/']);
_gaq.push(['_trackPageview']);

 

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

说明:_setCookiePath(newCookiePath),为您的网站设置新的 Cookie 路径。默认Cookie路径为主域名的根级路径(/),通过它可以设置Google Analytics所有跟踪的默认路径,从而限制跟踪,实现跟踪单个子目录。

此时,Google Analytics会将/myblog/下的页面当做一个独立的域名站点对待,有独立的访客信息与广告系列信息。
 

28月/12

揭秘我所知道的网站分析

发布在 邵珠庆

到底网站分析(Web Analysis,以下简称WA)是什么,有什么用,有没有必要做投入,投入多少,回报如何,诸如此类;每次我都要废老大的口水解释半天,今天终于有点小空,还是写一篇“科普文章”,给朋友们一个较为综合的参考吧。

首先,我不是Web Analyst,但是我有很多朋友是资深的Web Analyst;其次,除了早期,我几乎不再自己动手部署监控代码,但是我是资深的“WA消费者”,无论是过去还是现在,我已经习惯依赖WA的分析结果来做决策。所以,我想,我应该能够把WA说的相对简单易懂,呵呵。

“科普文章”嘛,都会有个小目录,我也先加一个:

一, Web Analysis的前世今生与方法论

二, Web Analysis的监控原理与实现工具

三, 实战:电商运营优化的WA重点

一 Web Analysis的前世今生与方法论

1,  虽然网站分析是一个新词,但是WA的内容却是由来已久:从最早的所谓网站统计(PV/UV),到后来的互联网广告定向投放,再到如今的网站访问内容/访问流程优化(营销活动,购物流程等);虽然筐里装的东西越来越多,但仍脱不出两条主要的发展脉络:

A, 从简单的统计分析向过程解析演进:很显然,大家都已经不再满足于得到一个简单的报表,列举一些数字,更多希望了解,这些数字是如何产生的。

B,从基于网站自身的分析,转向“以人为本”的分析:大家都发现,访客的行为强烈的受到其自身特征(年龄,性别,职业,地域等)的影响,要想转化率更高,必须大规模的定位访问者(使用cookies或者flash cookies),从而使得商业活动的执行更有针对性,性价比更高。

2,  抛开历史旧账不谈,如今网站分析在两大领域中运用最为广泛:互联网广告定向投放与电子商务运营优化。原因简单,WA在这两者中的运用,能够非常直接的提升业绩:无论是前者成本的降低还是后者收入的增加。(小小的感慨一下:商业的力量真强大,好东西总能先用上)

A-1,互联网广告定向投放,在国外最著名的公司是double click,可惜后来被google收购,失去了独立第三方的身份;国内最早的试水者是1998年成立的好耶,最早想走技术路线卖软件,结果媒体只愿意用广告付费,被迫变成了Agency;被分众收购之后,变的什么都做,又失去了第三方的身份,影响力大不如前。倒是后起之秀的AdChina,专心致志,成长惊人,无论是从技术层面还是销售额,确实值得期待。WA界大家熟知的Sydney Song(宋星),正是就职于类似的一家北京公司。

A-2, 无论是好耶还是AdChina,基础方法论都是一样的:通过cookies来识别和记录访客的访问行为;然后细分客户族群,把消费者感兴趣的互联网广告推送给TA看。随着广告投放数量的不断增加和cookies数目的不断积累,客户访问数据会被“清洗”的越来越精确,覆盖面会越来越广,最终达到广告主希望什么人群看,就只有这些特定的人能看到,“不错过,也不放过”。

A-3, 我和AdChina负责广告网络运营的同学聊过,他们的精确投放技术真的很有意思:如果我的习惯是看到2-3次广告banner才会点击进去,我到sina看到了2次,到sohu又看到了1次才点击进去;如果广告投放期内我又访问sina和sohu的同一位置,就再也看不到这个广告了,广告主因此则节约了大量重复或无效的付费曝光;此外,如果您是广告主,预算有限,又想投门户,传统的买位置投放就不行,因为可能一小时就把预算消耗掉了;AdChina则提供了一个所谓平均投放的技术,保证页面刷新N次才出现1次广告,这样可以保证页面曝光比较均匀,有限的预算可以支撑广告持续较长的时间,降低了品牌网络广告的门槛。此外,还有些常规的按地域,时段,人群投放,创意轮播,前问卷后问卷之类的技术,就不多说了。有点预算(一个月几万块)的同学可以尝试投放一下,毕竟打品牌还是要靠硬广的。

B-1,与互联网定向广告相比,电子商务运营优化要复杂的多,门槛也高的多;我个人印象中,电子商务界最早大规模采用WA的公司应该是Ebay,可惜的是,外部的同学只能下载到一些for seller的统计结果,关于网站访问的渠道,内容等分析则无从得知。在中国,WA则是一个brand-new的行当,新到许多业界的同学都不知道WA为何物。阿里系也是从2007年之后才开始正式组建类似的部门,还从我上家公司挖了一个很NB的DA。说起来,新蛋在中国的WA部门算是国内最前沿的,我自己的DA也是从那里挖的。(可惜,我挖不起新蛋的前首席Dave Zheng同学,被安居客搞走了,这里算帮他打个小广告了,呵呵)

B-2,与定向广告相比,电子商务运营优化的方法论要复杂的多,而且国内外差异颇大,细细盘下来,大致的逻辑如下:

识别虚假流量,剔除那些绝非人类产生的访问行为(Avinash大神肯定没干过这个,呵呵)

使用不同维度(按来源渠道,按老客户新客户,按访问次数,按不同的campaign,按是否具备某种自然特征如地理分布/性别)把总流量划分成各个子流量

从2个不同的角度(统计概率分布和特定目标完成)去观察用户的访问行为,并在不同的子流量之间横向对比

通过上述对比,得出两个结论:

1. 宏观上,各子流量所代表的客群有哪些访问特征,如何利用这些特征把网站的UE做的更好,吸引到更多的目标客群,从而实现商业目标。

2.微观上,具体到一个特定的商业目标,如何调整网站的定位(主要是商品策略),功能,界面,设计,提升目标转化率,改进返单率,提升客单价与销售额。

值得注意的是,无论是哪个领域,网站分析一切的一切必须基于一个宏观的商业目标,自顶向下,逐步分解的;如果目标不明,WA人员是无法开展真正有价值的工作的;这也是一小部分同学始终坚称WA无用的深层次原因:其实TA们自己都没想好建这个网站到底要干嘛

二.Web Analysis的实现工具和监控原理

俗话说,工欲善其事,必先利其器,WA也不例外。不过这里的“器”,除了分析软件,还有自身对WA工作原理的一些基础了解。(Web Trends之类的服务器端分析机制就不介绍了,国内用的人很少,我自己也只懂个皮毛,就不误导大家了)

目前最主流的网站分析工具采用的都是Page Tag;基本原理都一样,在HTML页面的头部或尾部嵌入一段js代码,浏览器读到这段代码,触发远程服务器的程序,自动记录用户的访问行为。WA人员则使用客户端软件,通过一些标准的和自定义的模型,来展现和分析这些数据。比较NB的公司,也有自己开发类似系统的,如AdChina的AdServer定向广告投放系统,让人不佩服都不行。

目前比较主流的WA工具,除了收费不菲的Omniture和免费的Google Analytics(前身是WA四大之一的Urchin,以下简称GA),还有一大堆如Crazy Egg之类的免费软件(大家有空可以上网搜)。对国内绝大部分的电子商务平台来说,Omniture实在是太贵了,每年至少30万以上;更郁闷的是,设置非常复杂,不是专业人员根本搞不定,一不小心数据就跑不出来。当然如果您一年市场预算几千万,那么花个50万买一套,再花个50万请2个资深的WA,肯定能值回票价。(插播一个小广告;购买Omniture,请找八叉乐的卫峰同学,呵呵。)

对于绝大多数同学,我的建议是,用GA吧;虽然GA每隔2,3个月总会抽几个小时的筋,好歹免费的不是,另外基础配置也简单,稍微懂点js和html的人都能弄。更难得的是,GA的升级速度很快,总能看到一些新的模型和界面,有些非常有帮助。关于GA的具体功能,就不多说了,网上已经有很多文章了,搜来看看,上手很容易。

不过需要提醒大家的是,所有的WA工具,能够实现的,不过是Metrics的排列组合,最多把模型弄得复杂点,对于基础Metrics的定义,都是统一而无法修改的(比方说old client的定义是cookies未被清空的情况下,只要访问过的都算;如果你想把访问过3次以上的定义为old client,是办不到的)。考虑到中美业界差异和国内奇形怪状的电商模式,工具不一定能够很好的满足您的要求。我自己最近就很纠结,是不是要下定决心,组织开发力量做一套WA工具出来;因为很可能在12个月甚至更短的时间内,GA就将无法满足我的分析需求了。

三.实战:电商运营优化的WA重点

1,  首先,我个人觉得,电商公司都应该设置WA的职位,甭管现在招的人水平好坏,能看看GA,做做最简单的定性分析就成,不能总是拍脑袋;我常和同事说,从无到有是一个飞跃;从有到好是另外一个飞跃。您的WA team其实也一样的。

2,  为了让您的WA人员不致于沦为花瓶或者背黑锅的,您自己得知道,您的WA人员是来干嘛的,千万别看这人家闲着就总想打发人干点啥;在我看来,WA和架构师是一个类型的position,思考多于动手。TA的具体工作,无非如下几项:

把业务层的需求转化为一整套的Metrics(度量指标)体系

与技术人员沟通确保这些Metrics能够被有效的获得,并且系统性误差在可接受范围内

把这些Metrics以易于理解/传播的展现形式(如各种自定义图表界面)传递给相关方(sales,ops等等)

3,  电商网站上线初期(1年内),小规模高频次的做定性分析,不求体系完整,但求能发现问题(甚至不一定要求解决问题);上了量之后,再做大规模少频次的定量分析,制定运营的Kpi体系。

4,  用一句套话,last but not least,千万不要瞎指挥WA;就我个人观察,互联网出身的电商公司还好,一般还能在一个频道上对话;传统行业出身的,很容易瞎折腾,最后的结果很可能是:为了数据而数据,WA人员被迫提供一些不知所云或者虚无缥缈的报告,害人害己。

28月/12

11 个牛X的 CSS3 和 jQuery 制作的教程

发布在 邵珠庆

 

CSS3 为 Web 开发带来了非常令人兴奋的变化,特别是在 CSS 3D 转换、动画等特性的支持,可以轻松的创建很酷的 Web 效果。

在这篇文章中我们介绍 11 个使用 CSS3 和 jQuery 实现的特效,很酷。

使用 jQuery 和 CSS 实现的放大镜效果

简单而惊人的CSS3边框过渡效果

CSS3中的手风琴风格滑块

使用jQuery和CSS3的组合翻转滑块

用CSS3 3D变换显示产品信息

创意CSS3的动画菜单

实验CSS3的动画图像转换

3D缩略图悬停效果

CSS3和jQuery的样书

使用CSS 3D创建变换卡图片廊

CSS3和jQuery制作的模糊效果

via queness/oschina