5.6 A/B测试和灰度测试
5.6.1A/B测试
网站设计中，我们经常会面临多个设计方案的选择，比如某个按钮是用红色还是用灰色，是放左边还是放右边。传统的解决方法通常是集体讨论表决，或者由某位专家或领导来拍板，实在决定不了，也有随机选一个上线的。虽然传统解决办法多数情况下也是有效的，但A/B 测试是解决这类问题的一个更好的方法。
所谓 A/B 测试，简单来说，就是为同一个目标制定两个方案（比如两个页面），让一部分用户使用 A 方案，另一部分用户使用 B 方案，记录下用户的使用情况，看哪个方案更符合设计目标。当然，在实际操作过程之中还有许多需要注意的细节，AB测试需要遵循一个规则。
1、多个方案并行测试
2、每个方案的访客都是随机
3、每个方案只有一个变量不同
4、以某个指标作为对比，优胜劣汰
1.内容实验方法
GA里面本来就有一个做AB测试的模块，叫做内容实验，顾名思义，这种方法只能用于页面内容的AB测试，而运营策略上的这种就不适用，因为内容实验方法主要是通过URL来区分访客分组的，也就是显示的URL要是不同的，这个方法是GA内置的方法，但现在默认已经不推荐使用这种方法了，估计在不久的将来会将这种方法移除，所以不详细介绍这种方法。
2.自定义维度方法
这种方法的原理是全局变量转成维度，具体就是访客访问的时候，程序随机将访客划分成不同的组别，然后将组别信息以全局变量的形式放置在页面上，在通过GTM将该变量读入，自定义维度去存储，然后就可以在报告中通过这个定义维度去划分。详细的配置信息参考GTM章节的全局变量转维度那一节。
这种方法是我最常用的，不仅可以用于页面的AB测试，还可以适用于运营策略的AB测试，非常实用。
3.Google Optimize
（1）什么是Google Optimize？
Google Optimize 360是 Google A/B测试和个性化设置平台，跟大部分的A/B测试平台一样，它的主要的目的是提高网站的转化率，与其他平台不同的是，这款工具是GA原生的。
（2）Google Optimize(免费版) VS Google Optimize 360
Google对不同系列都有非常完成的产品线，下面我就简单的介绍免费版的限制：
限制 | 解析 |
没有受众区分 | 360可以使用Google Analytcs中的受众最为实验目标用户群体的划分，免费版本的不行，如果您需要确保只有特定的用户在这个实验中，您需要使用其他目标优化选项作为组合。 |
限制同时进行实验的数量 | 同时进行的实验最多有3个，这可以满足大部分的小型站点，但对于大型站点，经验更丰富的团队将会发现这是这个很大限制。 |
多变量测试限制 | 免费版本不提供多变量测试，付费版本限制为16个变量 |
预先选择对象 | 360其中一个大的功能就追溯性地改变实验目的可以看到实验如何影响其他的GA目标，之所以能够实现这个本来就是GA中的目标,这是GA视图和 Optimize容器相关联的。 |
（3）Google Optimize如何实现？
之前： Google Optimize第一次发布的使用方法类似于GTM的方式，将代码加到<head>中，大部分A/B测试的跟踪代码都是添加到这个位置是因为能够确保用户访问页面的时候就加载。
现在： Google Optimize可以再GTM实现部署，旧版本的GTM是部署在<body>,新版是做了拆分部署，官方见识是使用新版的GTM做 Google Optimize测试，这样能使测试代码更快加载。
（4）Google Optimize部署过程：
1）创建一个账户和容器
如果您能访问 Google Optimize，您就被允许登录和创建账户，一个账户允许您在一个或多个站点做测试实验，基本上一个公司只需一个账户，容器里面已经就有您所需的实验配置信息。
单击“Create 账号”后，如图5-31所示，您将会被要求输入账户名和容器名，账户名字最好使用您公司的名字，容器名最好使用站点的名字
图5-31 创建账号
2）Google Optimize和GA关联
下一步，您需要将Google Optimize和GA账户中的一个视图关联，在页面的右上角，单击“Link to GA”之后单击“Link 媒体资源”，这是就是出现一个如图5-32所示的页面然给您关联GA的属性，选择属性后选择您所需的视图
图5-32 Google Optimize和GA关联
视图的选择非常重要，免费版GA账户中目标最多有20个，应为Google Optimize会将测试的选项，如事件或单击记录为GA中的目标，所以您需要考虑当前您已经使用了多少个目标，做这个测试还需要做少个目标，建议您使用一个专属的视图用于Google Optimize使用。
3）安装Google Optimize
现在您已经创建了Google Optimize账户和容器，也和GA关联，接下来要将Google Optimize安装到站点上。
1>在GA代码上添加
当您的容器创建好，会生成过一个容器ID(GTM-XXXXXX),如果您用统一版硬编码的硬编码的方式，那么您需要将Google Optimize的代码添加到GA跟踪跟踪代码，您可以再页面上看到GA的跟踪代码如下：
代码清单5-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','[https://www.GA官网.com/analytics.js','ga'](https://www.GA官网.com/analytics.js','ga')\); ga('create', 'UA-123456-1', 'auto'); ga('require', 'GTM-XXXXXX'); ga('send', 'pageview'); </scrIPt>
Google Optimize的跟踪代码就需要添加在这代码的后面，也是在<head>里面
代码清单5-2
<style>.async-hide { opacity: 0 !important} </style> <scrIPt>(function(a,s,y,n,c,h,i,d,e){s.clasName+=' '+y;h.end=i=function(){ s.clasName=s.clasName.replace(RegExp(' ?'+y),'')};(a[n]=a[n]||[]).hide=h; setTimeout(function(){i();h.end=null},c);})(window,document.documentElement, 'async-hide','dataLayer',2000,{'GTM-XXXXXX':true,});</scrIPt>
如果您使用GTM，那您可以通过GTM来管理Google Optimize代码
a、在GTM选择单击“代码”→“新建”→“选择一个代码类型以配置”→“Google Optimize”，可以看到如图5-33所示：
图5-33 GTM中设置Google Optimize
输入Optimize Container ID，和选择谷歌分析设置变量，触发器选择所有页面，然后保存发布即可。
4）创建您的第一个实验
创建实验的过程非常简单
1、在Optimize页面单击“创建体验”，
（这里应该翻译成实验会更恰当，但是目前官方的中文界面是体验，所以跟官方一致，采用体验）如图5-34所示：
图5-34 创建体验
2、配置体验信息
如图5-35所示：
图5-35 体验信息
输入体验名字，是体验的的名称；
编辑页面和实验类型，编辑页面就是需要测试的页面；
选择体验的类型，就是做测试的类型，您有如下选项：
类型 | 解析 |
A/B Test | 可以测试两个或多个变量，所以也就a/b/n测试，这是基础功能 |
Multivariate Test | 在同一个页面上测试两个或多个变量 |
Redirect Test | 测试不同的 URL 或路径识别胡或单独的页面。如果您对页面的代码做了较大幅度的修改可能会导致页面的加载速度变慢，如果您自己能够发现这个，当然是最好的，如果不能，就需要做个重定向测试。别忘了将 noindex 标记添加到测试页 |
这里是配置具体实验的信息，需要设置时间安排、变体和配置这些信息。
3、设置“创建时间安排”
主要是安排实验的起止时间，单击“创建时间安排”可以看到如图5-36所示的页面：
图5-36 创建时时间安排
4、然后设置实验的变体
单击页面上的“创建变体”如图5-37所示：
图5-37 创建变体
5、Optimize可视化编辑器编辑变量
要用这个功能，您需要使用chrome 安装Optimize Extension插件，然后将鼠标移到新创建变体的右侧，直到有个箭头出现“转至编辑器”，单击进入可视化编辑器编辑变量，可以看到如图5-38所示：
图5-38 可视化编辑器
图中各处的功能如下：
1）Experi ment Name：实验名字 2）Toggle Variants：切换变量 3）Device Testing：模拟设备测试 4）Number of Changes Made：版本记录 5）Diagnostics：诊断 6）Custom CS：查看页面代码 7）Interactive Mode：交互模式 8）Settings：设置 9）CS Element Selector cs元素选择器 10）Element Hierarchy：元素层次结构 11）Selected Element：选择元素 12）Modify Element Options：修改元素属性 13）CSS Editor CSS编辑器
将鼠标移动至需要修改的地址，然后修改CS编辑器就就可以对页面做调整，修改完后单击右上角的“完成”。
6、配置部分
配置部分主要是设置目标和定位，目标就是此次试验要优化的目的，定位是流量的划分，如实的界面如图5-39所示
图5-39 配置
试验目标有两大类，一类是从列表选择，一类是创建自定义目标。
从列表选择包含有系统的和GA设置的目标，其中系统的包含有单击的AdSense广告、会话时长、交易次数、收入、跳出次数、网页浏览、AdSense收入、AdSense展示次数；GA设置的目标就是GA里面已经设置的目标会被自动导入到这里。
创建自定义目标包含两种类型，一种是事件数，就是GA中所做的事件跟踪；一种是网页浏览，一般是特定页面的浏览。
定位是对流量的划分，主要关注对象和附加条件，其中对象就是对不同版本的流量的划分比例，这个可以根据实验需要调整比例；附件条件就是对流量的做更细的划分，就是筛选哪些流量进入测试，包含的筛选角度有如下：
网址:可以是一个或一系列页面
受众群体：只有付费版才有，用于特定群体的测试
行为：标记特定的流量来源
地址：标记特定区域
技术：标记特定的设备，浏览器，操作系统弄等
第一方Cookie：根据Cookie划分
自定义JavaScript：标记就有js返回的值
查询参数：Query参数作为目标规则
数据层变量：数据层变量
可以从以上维度去筛选特定的流量去做AB测试，如可以实现对特定城市、特定广告系列、特定设备类型的流量做AB测试。
7、运行您的实验
一旦您保存好的您配置，您将返回实验页面，再次确定您的实验目标选项没问题，就可以开始运行的您实验
5）报告：
我们推荐的测试周期最少为两周。如果您的实验已经运行，在报告的第一个部分将会显示实验中较好的一个的数据，如图5-40所示：
图5-40 实验数据结果1
报告的第二部分是显示每一个变量表现和您设置的目标情况，如图5-41，5-42所示：
图5-42 实验数据结果2
第三部分是实验对象的常规数据可视化，如图5-43所示：
图5-43 实验数据结果3
Improvement：与基准线对比的增幅
Experiment Sesions：实验会话数
Probability to beat baseline：测试变量是否比原来的好
Probability to be best：哪个较优
5.6.2灰度测试
灰度测试在百度百科的定义：灰度发布是指在黑与白之间，能够平滑过渡的一种发布方式。AB test就是一种灰度发布方式，让一部用户继续用A，一部分用户开始用B，如果用户对B没有什么反对意见，那么逐步扩大范围，把所有用户都迁移到B上面来。灰度发布可以保证整体系统的稳定，在初始灰度的时候就可以发现、调整问题，以保证其影响度。”
简单的说就是对于一个比较大的改版或全新的功能，先筛选一部分用户做小范围尝试，然后慢慢扩大比例，直至付费所有的用户，这种做法的优势就是在将新版向所有用户推开之前能够及时发现问题并解决，通常这种方法适用于用户存量比较大的用产品使用，一般千万级别的用户量使用才有价值。
对于用户量巨大的产品，如果直接升级到新版，那么新版会承受很大的压力，一个糟糕的版本或有bug的，可能直接导致的上线后的产出锐减，这对任何一家公司来说都是灾难，所以灰度测试能够规避这种情况的出现。
灰度测试可以看做是AB测试的一个特例，通常可以先AB后灰度的形式，如对于某个核心页面的改版，对新用户先筛选5%的做AB测试，看新版好还是旧版好，新版不好的话，回炉再造；新版好的话调高比例，在这个过程需要观察是否有“规模不经济的”的情况出现，直至全部升级到新版。
就以我们常用的GA为例子，官方在发布Data Studio的时候，就选择了部分国家的用户作为试点，经过数个月后才逐步将这个产品覆盖所有的用户。而且您时不时的会发现，您自己的界面有些新的UI或新的功能，这是Google在做灰度测试。
Last updated
