这一节要介绍如何在GTM对页面的按钮颜色做AB测试，同样的，这个原理在有Call To Action的地方都可以应用，比如电商的点击购物车按钮，结账，注册表单的注册，导航栏的颜色等。
原理：利用GTM对按钮做AB测试，原理并不难，通过在GTM中自定义html将js注入页面，然后对页面的原有代码做修改，展示成其他的颜色，并将分组的信息写入cookie，从而实现AB测试，通过原理，可以找到重点，难点就是注入的自定义js，这个已经有人已经写好了，地址在：https://github.com/thenextweb/cro
过程：
1、开启变量中的随机数，因为后面的AB测试需要用到这个。
2、复制ab_testing.js，在GTM中新建html，然后选择All Pages，触发器这里可以根据你自己的需要做选择，如果你只对产品详情页面，那就在触发器里面只选择该页面就可以
3、需要对ab_testing.js的代码做修改
function createCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function createABtest() {
var randomChange = randomNumber % variants.length;
createCookie(prefix + '-cookie', variants[randomChange], 9);
if (variants[randomChange] != "0") {
var newcookie = variants[randomChange].split('.');
var changeID = newcookie[0];
var variantID = newcookie[1];
changes[changeID]['variants'][variantID].execute();
sendDimension(changeID, variantID);
} else {
sendDimension(0)
}
}
function sendDimension(changeID, variantID) {
if (readCookie('_ga')) {
if (changeID != 0) {
dataLayer.push({ 'event':'abTest', 'eventCategory': 'ab-test', 'eventAction': prefix + '-' + changeID + '-' + variantID, 'eventLabel': prefix + '-' + changeID + '-' + variantID, 'eventNonInteraction': 1 });
} else {
dataLayer.push({ 'event':'abTest', 'eventCategory': 'ab-test', 'eventAction': prefix + '-0-0', 'eventLabel': prefix + '-0-0', 'eventNonInteraction': 1 });
}
}
}
function checkCookie(name) {
ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(name) > -1) return true;
}
return false;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
var prefix = 'tnw';
var randomNumber = {{Random Number}};
var changes = {
1: {
variants: {
1: {
execute: function () {
}
}
}
},
2: {
variants: {
1: {
execute: function () {
}
},
2: {
execute: function () {
}
}
}
}
};
var variants = ["0"];
for (var j in changes) {
for (var x in changes[j]['variants']) {
variants.push(j + '.' + x);
}
}
if (readCookie(prefix + '-cookie')) {
if (variants.indexOf(readCookie(prefix + '-cookie')) != -1) {
var currentCookie = readCookie(prefix + '-cookie').split('.');
var currentChangeID = currentCookie[0];
var currentVariantID = 0;
if (currentChangeID != 0) {
currentVariantID = currentCookie[1];
changes[currentChangeID]['variants'][currentVariantID].execute();
}
sendDimension(currentChangeID, currentVariantID);
} else {
eraseCookie(prefix + '-cookie');
createABtest();
}
} else {
createABtest();
}
0
从上面的代码中找到这儿一段，需要对这一段的代码做修改：
var prefix = 'tnw';
var randomNumber = {{Random Number}};
var changes = {
1: {
variants: {
1: {
execute: function () {
}
}
}
},
2: {
variants: {
1: {
execute: function () {
}
},
2: {
execute: function () {
}
}
}
}
};
上面的tnw是cookie的名字，如果你做多个ab测试，那就需要修改成不同的名字。然后execute：function里面就是需要对页面的原有属性做替换的代码了，这个根据你自己的测试的内容做调整，如果只是原有的和增加一个颜色做测试，那就只要保留一个就够了。
4、以改变页面的颜色为例子，点击查看页面元素的，找到该出位置对应的代码
可以看到<header> 里面对应的就是网站头部部分的代码了，里面class对应的是header，切换到Console里面，输入document.getElementsByClassName(“header”)，然后回车：
可以看到站点文章里面的代码就看到了，在后面精确一点document.getElementsByClassName(“header”)[‘0’]:
可以看到头部颜色的代码就看到，接下来就是对颜色代码做替换了，这里选择用黑色的，代码为：document.getElementsByClassName(“header”)[‘0′].style.background=’black’
可以看到头部就变成了黑色的了。
接下来就是要把这段代码：document.getElementsByClassName(“header”)[‘0′].style.background=’black’ 添加到execute function里面就可以了
接下来可以再debug，可以看到信息都已经推送到数据层上面去了，下面就是要配置GTM接受相应的数据：
触发器中设置自动事件变量，接受event abTest：
可以看到很多数据层的信息，这个就需要在变量用用数据层变量接受，我这里只接受eventAction：
然后再配置事件，想GA发送数据：
然后在实时里面看看：
就是这么简单，最难部分，前人已经造好了轮子。
来源：MP
