使用事件跟踪在 Google Analytics 中进行 A/B 测试

作者 Rostyslav Mykhajliw TrueSocialMetrics.com 创始人 ~ 3 分钟

如您所知，默认情况下，Google Analytics 实验功能仅适用于单独的页面，并且在您开始广告活动时效果很好。所以你可以控制目标网址。但是，如果您不控制流量来源，该怎么办：搜索、推荐、社交媒体帖子。这是主要问题。但是我们有一个简单的解决方案。解决方案需要：

让我们开始测试

/ index 页面默认有一张图片，但我们想为 50% 的访问者用视频替换它，并衡量每个案例的注册率。我已经为 A/B 测试创建了一个简单的 js，并在 cookie 中保存分配。

函数分配（名称，单元格）{
    cell = $.cookie('ab-testing-' + name);
    如果（单元格）返回单元格；
    // 分配
    rand = Math.random();
    如果（随机数<0.5）{
        细胞=细胞[0]；
    } 别的 {
        细胞=细胞[1]；
    }
    $.cookie('ab-testing-' + name, cell, { expires: 90, path: '/' });
    返回单元格；
}

此代码随机分配 50% 的用户测试单元，并将分配保存在 cookie 中并返回分配单元名称。第一个参数是“测试名称”，第二个参数是单元格名称列表

用例：

分配（'ImageVsVideo'，['图像'，'视频']）; // 图片或视频

为了在 50% 的情况下用视频替换页面上的图像，我们必须向元素添加唯一标识符。我将其命名为：ab-testing-ImageVsVideo。

太好了，我们已准备好替换逻辑。结果我在 vimeo.com 上上传了视频，转换后我得到了以下导出代码

<iframe src="http://player.vimeo.com/video/45516767" width="460" height="253" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>

我更喜欢 html5 代码（但如果你愿意，你可以随时退后一步并使用旧版 flash 对象）。

我们的逻辑很简单：如果单元格名称等于“Video”，则通过给定的播放器 html 代码更新元素 ID“ab-testing-ImageVsVideo”。

$(函数(){
    cell = allocation('ImageVsVideo', ['Image', 'Video']);
    如果（细胞=='视频'）{
        html = '<iframe src="http://player.vimeo.com/video/45516767" width="460" height="253" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>';
        $('#ab-testing-ImageVsVideo').html(html);
    }
});

一切正常，但我们还没有跟踪我们的目标。我们如何知道哪个测试变体获胜？

Google Analytics 提供了称为事件跟踪的强大功能。它主要用于跟踪页面上的用户操作，例如按钮按下或一些 ajax 操作跟踪。但我们将使用它来跟踪我们测试的单元格分配。有 2 个必需的参数：Category 和 Action，在我们的例子中是所有 a/b 测试的“AB-Testing”类别和动作“ImageVsVideo-Image”（或 ImageVsVideo-Video）作为标识符。我们页面的工作脚本。

<脚本类型="文本/javascript">
  _gaq.push(['_trackEvent', 'AB-Testing', 'ImageVsVideo-' + allocation('ImageVsVideo', ['Image', 'Video'])]);

你可以在landing page source code找到sample，我也把分配函数放到了文件ab-testing.js中，方便使用。

Google Analytics 报告是下一步

我们最初的目标是提高“注册率”，但我们也想知道经济成果、一般转化率和目标完成情况。所以我们选择了以下指标：

独特的访客
注册（Goal11 完成）
注册（Goal11 转化率）
每次访问目标值
目标转化率
目标完成

将“新”和“回访”访客分开也很好，因为大多数时候当我们谈论“注册”时，我们关心的是新用户。因此，让我们转到自定义报告并创建一个新的“A/B 测试”
太棒了！但是我们仍然有完整的访问列表，没有区别“图片”或“视频”，因此我们必须创建 2 个自定义细分。转到“高级细分”并创建“新自定义细分”-“图像”。查找指标“事件操作”包含“ImageVsVideo-Image”。
对“视频”片段重复相同的操作，“事件操作”等于“ImageVsVideo-Video ”。

最后，应用“图像”和“视频”这两个片段，您将看到如下内容：

结果：视频转化率 13% vs 图像转化率 10%，经济价值更高，但目标转化率略低。所以我们需要更多的统计数据。让我们选择次级维度“流量类型”。
对于直接流量，结果几乎相同，但对于搜索流量，“注册率”和经济价值要高得多。但从另一个角度来看，现有用户的转化率正在降低。这表明对于已经访问过我们网站的人来说，“快速反应”更为重要。因此，向来自搜索引擎的新客户展示“视频”是有意义的。

链接

Event Tracking Guide

2013 年 5 月 7 日更新

我通过添加对同一页面的多重测试支持来更新“分配代码”。例如，在当前的博客页面上 - 2 个测试： - 有 4 种不同的“singup”形式，带有不同的消息（但其余 3 种被隐藏）。如果您以源代码模式打开页面，您会找到它们。

第二个测试是表格下方的一条消息，其中包含指向“How-it-works”或“Singup”页面的链接。

完整的代码在这里，你也可以 download 我们的最新版本（记住我们使用的是专门的异步 js loader，如果你不使用它，你必须将 head.ready(function(){ 替换为 $(文档）.ready（函数（）{。

函数分配测试单元格（名称，单元格）{
    cell = $.cookie('ab-testing-' + name);
    如果（单元格）返回单元格；
    // 分配
    rand = Math.random();
    开始= 0；
    delta = 1/cells.length;
    细胞=细胞[0]；
    对于 (i=0;i<cells.length;i++) {
        如果 (i*delta<=rand && rand<(i+1)*delta) {
            细胞=细胞[i]；
            休息;
        }
    }
    $.cookie('ab-testing-' + name, cell, { expires: 90, path: '/' });
    返回单元格；
}
$(文档).ready(函数(){
    var AbTesting = {};
    $('.ab-testing').each(函数(索引, 元素) {
        test = $(element).attr('data-ab-testing-test');
        cell = $(element).attr('data-ab-testing-cell');
        如果 (!(AbTesting[test] instanceof Array)) {
            AbTesting[测试] = [];
        }
        AbTesting[测试].push(细胞);
    });
    // 分配
    对于（在 AbTesting 中测试）{
        allocation = allocationTestCell(测试, AbTestting[测试]);
        _gaq.push(['_trackEvent', 'AB-Testing', test + '-' + allocation, 'ab-testing-'+test+'-'+'allocation', 0, true]);
        $('.ab-testing').each(函数(索引, 元素) {
            _test = $(element).attr('data-ab-testing-test');
            _cell = $(element).attr('data-ab-testing-cell');
            如果（_test！=测试）返回；
            如果（_cell！=分配）{
                返回 $(元素).隐藏();
            }
            $(元素).show();
        });
    }
});

主要区别在于新代码不需要在 JS 上编写任何代码。您只需要将类“ab-testing”添加到要测试的任何元素并指定测试名称和单元名称，例如<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">一些测试代码</div>。

让我们看看从头开始应用此测试的真实示例。

该元素的源代码如下所示：

<分区>
  分析和改善您的社交媒体形象<a href="/how-it-works">立即开始</a>
</div>

在第一阶段，您必须复制元素、更改消息并将其隐藏。

<分区>
  分析和改善您的社交媒体形象<a href="/how-it-works">立即开始</a>
</div>
<div style="display:none;">
  分析和改善您的社交媒体形象<a href="/signup">立即开始</a>
</div>

现在，如果您刷新页面，则不会发生任何变化：您有 1 个可见元素和 1 个不可见元素以及您要测试的链接。在下一步中，我们需要选择一个测试名称和一个单元格名称。在我的例子中：

signupblogtext - 测试名称
它是如何工作的 - 第一个块的单元格名称，链接到“它是如何工作的”
注册 - 带有“注册”链接的隐藏块的单元格名称

我们还将添加类“ab-testing”作为我们 JS 的标记。所以完整的工作代码如下所示：

<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">
  分析和改善您的社交媒体形象<a href="/how-it-works">立即开始</a>
</div>
<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="sign-up" style="display:none;">
  分析和改善您的社交媒体形象<a href="/signup">立即开始</a>
</div>

结果，50% 的用户将看到一个带有“工作原理”链接的块，而另外 50% 的用户将看到第二个块。

测试

我的代码将分配存储在用户 cookie 中，这意味着分配只发生一次，所以如果你想测试它，你需要一个没有 cookie 的干净浏览器。但是更简单的解决方案是使用 Google Chrome 功能 Incognito Window。它提供了绝对清晰的新浏览器窗口，没有任何 cookie。因此，您可以多次打开该页面并检查是否一切正常。