谷歌分析实战指南-F

  1. 主页
  2. 文档
  3. 谷歌分析实战指南-F
  4. 第4章 Google Tag Manager实战指南
  5. 4.11、对按钮颜色做测试

这一节要介绍如何在GTM对页面的按钮颜色做AB测试,同样的,这个原理在有Call To Action的地方都可以应用,比如电商的单击购物车按钮,结账,注册表单的注册,导航栏的颜色等,这是一种页面微调非常好的方法。

原理利用GTM对按钮做AB测试,原理并不难,通过在GTM中自定义html将js注入页面,然后对页面的原有代码做修改,展示成其他的颜色,并将分组的信息写入Cookie,将相关的信息抛到数据层,再用GTM接收向GA发送数据,从而实现AB测试,通过原理,可以知道重点,难点就是注入的自定义js,这个已经有人已经写好了,地址在Github上,所以您只需要知道原理流程和怎么用就可以了。

实详细实现过程:

1、开启变量中的随机数,因为后面的AB测试需要用到这个作为测试分组。

2、复制ab_testing.js,在GTM中新建html,然后选择All Pages,如图3-97所示,触发器这里可以根据您自己的需要做选择,如果您只对产品详情页面,那就在触发器里面只选择该页面就可以,如果是所有的页面,那就选择All Pages,代码到http://www.ichdata.com/book.html下载。

4.11、对按钮颜色做测试
图3-97 自定义html

3、需要对ab_testing.js的代码做修改,从上面的代码中找到这儿一段,需要对这一段的代码做修改:

代码清单3-5

var prefix = ‘tnw’; var randomNumber = ; var changes = { 1: { variants: { 1: { execute: function () {

}
}
}
},
2: {
variants: {
1: {
execute: function \(\) {

}
},
2: {
execute: function \(\) {

}
}
}
}

};

上面的tnw是Cookie的名字,如果您做多个ab测试,那就需要修改成不同的名字。然后execute:function里面就是需要对页面的原有属性做替换的代码了,这个根据您自己的测试的内容做调整,如果只是原有的和增加一个颜色做测试,那就只要保留一个就够了。

4、以改变页面的颜色为例子,单击查看页面元素的,找到该出位置对应的代码,如图3-98所示:

4.11、对按钮颜色做测试
图3-98 元素定位

可以看到<header>里面对应的就是网站头部部分的代码了,里面clas对应的是header,切换到Console里面,输入document.getElementsByClasName(“header”),然后回车,可以看到如图3-99所示:

4.11、对按钮颜色做测试
图3-99 获取header代码块

可以看到输出了header的一些属性信息,在后面更精确一点用document.getElementsByClasName(“header”)[‘0’]。结果如图3-100所示:

4.11、对按钮颜色做测试
图3-100 获取头部颜色代码

可以看到头部颜色的代码就看到,接下来就是对颜色代码做替换了,这里选择用黑色的,代码为:document.getElementsByClasName(“header”)[‘0’].style.background=’black’,运行后效果如图3-101:

4.11、对按钮颜色做测试
图3-101 将头部改为黑色

可以看到头部就变成了黑色的了。接下来就是要把这段代码:document.getElementsByClasName(“header”)[‘0′].style.background=’black’ 添加到execute function里面就可以了

接下来可以再debug,可以看到信息都已经推送到数据层上面去了,如图3-102所示,下面就是要配置GTM接收相应的数据:

4.11、对按钮颜色做测试
图3-102 数据推送到数据层

触发器中设置自动事件变量,接收自定义事件 abTest,具体设置如图3-103所示:

4.11、对按钮颜色做测试
图3-103 接收自定义事件

可以看到很多数据层的信息,这个就需要在变量用数据层变量接收,我这里只接收eventAction,具体配置如图3-104所示:

4.11、对按钮颜色做测试
图3-104 接收数据层变量

然后再配置事件,向GA发送数据,如图3-105所示:

4.11、对按钮颜色做测试
图3-105 配置代码,向GA发送数据

然后在实时里面测试查看是否生效,如图3-106所示:

4.11、对按钮颜色做测试
图3-106 测试

可以看到数据已经成功接收到,AB测试的信息就可以再GA的事件里面查看导对应的报告了。

就是这么简单,最难部分,前人已经造好了轮子。


这篇文章对您有用吗?

我们要如何帮助您?

发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址