用Google Tag Manager对按钮颜色做AB测试

Google Tag Manager Haran 8年前 (2017-04-23) 6009次浏览 0个评论

这一节要介绍如何在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,触发器这里可以根据你自己的需要做选择,如果你只对产品详情页面,那就在触发器里面只选择该页面就可以

用Google Tag Manager对按钮颜色做AB测试

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、以改变页面的颜色为例子,点击查看页面元素的,找到该出位置对应的代码

用Google Tag Manager对按钮颜色做AB测试

 

可以看到<header> 里面对应的就是网站头部部分的代码了,里面class对应的是header,切换到Console里面,输入document.getElementsByClassName(“header”),然后回车:

用Google Tag Manager对按钮颜色做AB测试

可以看到站点文章里面的代码就看到了,在后面精确一点document.getElementsByClassName(“header”)[‘0’]:

用Google Tag Manager对按钮颜色做AB测试

可以看到头部颜色的代码就看到,接下来就是对颜色代码做替换了,这里选择用黑色的,代码为:document.getElementsByClassName(“header”)[‘0′].style.background=’black’

用Google Tag Manager对按钮颜色做AB测试

可以看到头部就变成了黑色的了。

接下来就是要把这段代码:document.getElementsByClassName(“header”)[‘0′].style.background=’black’ 添加到execute function里面就可以了

接下来可以再debug,可以看到信息都已经推送到数据层上面去了,下面就是要配置GTM接受相应的数据:

用Google Tag Manager对按钮颜色做AB测试

触发器中设置自动事件变量,接受event abTest:

用Google Tag Manager对按钮颜色做AB测试

可以看到很多数据层的信息,这个就需要在变量用用数据层变量接受,我这里只接受eventAction:

用Google Tag Manager对按钮颜色做AB测试

然后再配置事件,想GA发送数据:

用Google Tag Manager对按钮颜色做AB测试

然后在实时里面看看:

用Google Tag Manager对按钮颜色做AB测试

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

 

来源:MP

 


如有疑问,可以在文章底部留言或邮件(haran.huang@ichdata.com) 我~
喜欢 (1)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

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

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