如何将 A/B 测试与 Voluum、Redtrack 和 ClickFlare 集成
简介 在数字营销领域，A/B 测试是广告活动成功的关键。LanderLab 现在提供了一款出色的工具，可以在服务器端设置 A/B 测试，使用同一个 URL 轮换不同变体。
Bruno Agalliu阅读 2 分钟
简介
在数字营销领域，A/B 测试是广告活动成功的关键。LanderLab 现在提供了一款出色的工具，可以在服务器端设置 A/B 测试，使用同一个 URL 轮换不同变体。有了这次更新，用户可以对落地页做 A/B 测试，并在自己偏好的追踪工具里交叉核对结果。
为什么要通过 LanderLab 做 A/B 测试
大多数营销人员都用自己的追踪软件（如 ClickFlare、Voluum 或 Redtrack）对落地页做拆分测试，而且在大多数情况下这已经绰绰有余。不过，也有些情况下无法用追踪工具做拆分测试。优质流量来源不允许重定向，最终目标 URL 必须与落地页 URL 相同。
这时，LanderLab 的服务器端 A/B 测试就派上用场了，它可以省掉流程里的一次重定向。想详细了解 A/B 测试在 LanderLab 中的工作方式，可以阅读这篇文章。最棒的是，LanderLab 可以与大多数现代追踪工具集成。
思路很简单：把 LanderLab 的 A/B 测试与每个追踪工具都提供的 Direct Tracking 方式结合起来。为了涵盖基础内容，本文将介绍如何用 ClickFlare、Voluum 和 Redtrack 实现这一方案。
使用 ClickFlare 设置 A/B 测试
ClickFlare 的 Direct Tracking 方式正好能与这套方案完美搭配。毕竟这两个平台由同一家公司打造和开发，所以搭配使用、实现更好的集成也顺理成章。想进一步了解 ClickFlare 提供的 Direct Tracking，可以阅读这篇文章。
实施这套方案有 2 个基本步骤，同样的步骤也适用于 Voluum 和 Redtrack。第一步是在 ClickFlare 中定义一个新的追踪参数，用来上报 variantID。
要在追踪工具中追踪 variantID，需要对 Direct Tracking 脚本做一些修改。下面的脚本包含 2 个需要替换的变量：“REPLACE_ME_CAMPAIGN_ID”和“REPLACE_ME_CUSTOM_DOMAIN”。准备好后，需要把整段代码放到 LanderLab 的 Settings > Custom Code > Header Section 中。
<script> ! function() {
"use strict";
var t = "lp_ref",
n = "cpid",
e = "lpurl",
r = "REPLACE_ME_CUSTOM_DOMAIN",
c = "(?<domain>http(?:s?)://[^/]*)".concat("/cf/click"),
a = "(?:(?:/(?<cta>[1-9][0-9]*)/?)|(?:/))?",
i = "^".concat(c).concat(a).concat("(?:$|(\\?.*))"),
o = 'javascript:window.clickflare.l="(?<original_link>'.concat(c).concat(a, '("|(\\?[^"]*"))).*'),
s = function() {
return new RegExp(i, "")
},
u = function() {
return new RegExp(o, "")
};
function l(t) {
var n = function(t) {
return t.replace(s(), (function(t) {
for (var n = [], e = 1; e < arguments.length; e++) n[e - 1] = arguments[e];
var c = n[n.length - 1].domain;
return t.replace(c, r)
}))
}(t);
return 'javascript:window.clickflare.l="'.concat(n, '"; void 0;')
}
function f(t, n) {
if (n && t && n.apply(document, [t]), /loaded|interactive|complete/.test(document.readyState))
for (var e = 0, r = document.links.length; e < r; e++)
if (s().test(document.links[e].href)) {
var c = document.links[e];
window.clickflare.links_replaced.has(c) || (c.href = l(c.href), window.clickflare.links_replaced.add(c))
}
}! function(c, a) {
var i = document.onreadystatechange;
window.clickflare || (window.clickflare = {
listeners: {},
customParams: {},
links_replaced: new Set,
addEventListener: function(t, n) {
var e = this.listeners[t] || [];
e.includes(n) || e.push(n), this.listeners[t] = e
},
dispatchEvent: function(t, n) {
n && (this.customParams[t] = n), (this.listeners[t] || []).forEach((function(t) {
return t(n)
}))
},
push: function(t, n) {
n && (this.customParams[t] = n), (this.listeners[t] || []).forEach((function(t) {
return t(n)
}))
}
}, document.onreadystatechange = function(t) {
return f(t, i)
}, f(null, i), setTimeout((function() {
! function(c, a) {
var i, o = function(c, a) {
var i = new URL("".concat(r).concat(c)),
o = "{",
s = o + o;
a.startsWith(s) || i.searchParams.set(n, a);
return i.searchParams.append(t, document.referrer), i.searchParams.append(e, location.href), i.searchParams.append("variantId", window.LL_VARIANT_ID), i.searchParams.append("lpt", document.title), i.searchParams.append("t", (new Date).getTime().toString()), i.toString()
}(c, a),
s = document.createElement("script"),
l = document.scripts[0];
s.async = 1, s.src = o, s.onerror = function() {
! function() {
for (var t = function(t, n) {
var e = document.links[t];
u().test(e.href) && setTimeout((function() {
e && e.setAttribute("href", function(t) {
var n = t.match(u());
if (n) {
var e = (n.groups || {}).original_link;
return e ? e.slice(0, -1) : t
}
return t
}(e.href))
}))
}, n = 0, e = document.links.length; n < e; n++) t(n)
}()
}, null === (i = l.parentNode) || void 0 === i || i.insertBefore(s, l)
}(c, a)
})))
}("".concat("/cf/tags", "/").concat(new URL(window.location.href).searchParams.get("cftmid") || "{{__CONTAINER_ID__}}"), new URL(window.location.href).searchParams.get(n) || "REPLACE_ME_CAMPAIGN_ID")
}(); </script>使用 Voluum 设置 A/B 测试
Voluum 是联盟营销领域最老牌的追踪工具之一，至今仍占据很大的市场份额。我们依然依靠 Direct Tracking 将 variantID 上报到这个追踪工具，方法与前面相同。
VariantID 添加在流量来源模板的底部，不过插入顺序其实无关紧要。为了保持名称一致，同样需要替换这 2 个变量：“REPLACE_ME_CAMPAIGN_ID”和“REPLACE_ME_CUSTOM_DOMAIN”。将下面的代码复制粘贴到 LanderLab 的自定义代码区域，设置就完成了。
<<b>style</b>>.dtpcnt{opacity: 0;}</<b>style</b>>
<<b>script</b>>
(function(d, c, k, l, r, t, g, u, A, e, m, v, B, a, n, p, h, q, w, D, x) {
function y() { for (var f = c.querySelectorAll(".dtpcnt"), b = 0, a = f.length; b < a; b++) f[b][u] = f[b][u].replace(/(^|\s+)dtpcnt($|\s+)/g, "") }
function C(a, b, d, e) { var f = new Date;
f.setTime(f.getTime() + (e || 864E5));
c.cookie = a + "=" + b + "; " + d + "samesite=Strict; expires=" + f.toGMTString() + "; path=/";
k.setItem(a, b);
k.setItem(a + "-expires", f.getTime()) }
function z(a) {
var b = c.cookie.match(new RegExp("(^| )" + a + "=([^;]+)"));
return b ? b.pop() : k.getItem(a + "-expires") && +k.getItem(a +
"-expires") > (new Date).getTime() ? k.getItem(a) : null
}
x = "https:" === d.location.protocol ? "secure; " : "";
d[e] || (d[e] = function() {
(d[e].q = d[e].q || []).push(arguments) }, p = c[r], c[r] = function() { p && p.apply(this, arguments); if (d[e] && !d[e].hasOwnProperty("params") && /loaded|interactive|complete/.test(c.readyState))
for (; a = c[t][m++];) /\/?click\/?($|(\/[0-9]+)?$)/.test(a.pathname) && (a[g] = "javascrip" + d.postMessage.toString().slice(4, 5) + ":" + e + '.l="' + a[g] + '",void 0') }, setTimeout(function() {
(q = /[?&]cpid(=([^&#]*)|&|#|$)/.exec(d.location.href)) &&
q[2] && (h = q[2], w = z("vl-" + h));
var f = z("vl-cep"),
b = location[g];
if ("savedCep" === B && f && (!h || "undefined" === typeof h) && 0 > b.indexOf("cep=")) { var e = -1 < b.indexOf("?") ? "&" : "?";
b += e + f } a = c.createElement("script");
n = c.scripts[0];
a.defer = 1;
a.src = v + (-1 === v.indexOf("?") ? "?" : "&") + "lpref=" + l(c.referrer) + "&lpurl=" + l(b) + "&lpt=" + l(c.title) + "&vtm=" + (new Date).getTime() + (w ? "&uw=no" : "") + "&variantId=" + window.LL_VARIANT_ID ;
a[A] = function() { for (m = 0; a = c[t][m++];) /dtpCallback\.l/.test(a[g]) && (a[g] = decodeURIComponent(a[g]).match(/dtpCallback\.l="([^"]+)/)[1]);
y() };
n.parentNode.insertBefore(a, n);
h && C("vl-" + h, "1", x)
}, 0), setTimeout(y, 7E3))
})(window, document, localStorage, encodeURIComponent, "onreadystatechange", "links", "href", "className", "onerror", "dtpCallback", 0, "REPLACE_ME_CUSTOM_DOMAIN/d/REPLACE_ME_CAMPAIGN_ID.js", "savedCep");
</<b>script</b>>
<<b>noscript</b>>
<<b>link</b> href="REPLACE_ME_CUSTOM_DOMAIN/d/REPLACE_ME_CAMPAIGN_ID.js?noscript=true&lpurl=" rel="stylesheet" /></<b>noscript</b>>使用 Redtrack 设置 A/B 测试
最后，我们为 Redtrack 实现同样的方案。这款追踪工具占有相当可观的市场份额，功能与 ClickFlare 和 Voluum 相同。
不过与另外 2 个追踪工具不同，variantID 需要分配到某个特定的 token 上，因为其中一些 token 是系统专用的。在这个示例中，variantID 被分配到 sub18，Direct Tracking 脚本中也会同步体现。
替换掉“REPLACE_ME_CAMPAIGN_ID”和“REPLACE_ME_CUSTOM_DOMAIN”后，代码就可以在 LanderLab 中使用了。
<script>
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length === 2) {
return parts.pop().split(";").shift();
}
}
var trackerURL = "REPLACE_ME_CUSTOM_DOMAIN";
var campaignID = "REPLACE_ME_CAMPAIGN_ID";
var cachebuster = Math.round(new Date().getTime() / 1000);
var rtkClickID;
var rtkfbp = getCookie('_fbp') || '';
var rtkfbc = getCookie('_fbc') || '';
var LL_VARIANT_ID = window.LL_VARIANT_ID;
var locSearch = window.location.search;
var urlParams = new URLSearchParams(locSearch);
var pixelParams = "&" + locSearch.substr(1) + "&sub18=" + LL_VARIANT_ID + "&sub19=" + rtkfbp + "&sub20=" + rtkfbc
if (campaignID == "") {
campaignID = urlParams.get('rtkcmpid')
}
var initialSrc = "https://"+ trackerURL + "/" + campaignID + "?format=json";
function stripTrailingSlash(str) {
return str.replace(/\/$/, "");
}
var rawData;
function fixHrefWithClick(
_rawData,
_cachebuster,
_rtkClickID
) {
document.querySelectorAll('a').forEach(function(el) {
if (el.href.indexOf(trackerURL + "/click") > -1) {
if (el.href.indexOf('?') > -1) {
el.href = stripTrailingSlash(el.href) + "&clickid=" + (_rtkClickID || _rawData.clickid) + "&rtkck=" + _cachebuster
} else {
el.href = stripTrailingSlash(el.href) + "?clickid=" + (_rtkClickID || _rawData.clickid) + "&rtkck=" + _cachebuster
}
}
if (el.href.indexOf("clickid={clickid}") > -1) {
el.href = el.href.replace(/{clickid}/, _rawData.clickid) + "&rtkck=" + _cachebuster;
}
});
}
setTimeout(function() {
if (!urlParams.get('rtkcid')) {
xhr = new XMLHttpRequest;
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
rawData = JSON.parse(xhr.responseText);
rtkClickID = rawData.clickid
setCookie();
// fixHrefWithClick(rawData, cachebuster)
document.querySelectorAll('a').forEach(function(el) {
if (el.href.indexOf(trackerURL + "/click") > -1) {
if (el.href.indexOf('?') > -1) {
el.href = stripTrailingSlash(el.href) + "&clickid=" + rawData.clickid + "&rtkck=" + cachebuster
} else {
el.href = stripTrailingSlash(el.href) + "?clickid=" + rawData.clickid + "&rtkck=" + cachebuster
}
}
if (el.href.indexOf("clickid={clickid}") > -1) {
el.href = el.href.replace(/{clickid}/, rawData.clickid) + "&rtkck=" + cachebuster;
}
});
xhrr = new XMLHttpRequest;
xhrr.open("GET", "https://"+ trackerURL +"/view?clickid=" + rawData.clickid)
xhrr.send();
}
}
xhr.open("GET", initialSrc + pixelParams)
xhr.send();
} else {
rtkClickID = urlParams.get('rtkcid')
setCookie();
xhrTrack = new XMLHttpRequest;
xhrTrack.open("GET", "https://"+trackerURL+"/view?clickid=" + rtkClickID)
xhrTrack.send();
// fixHrefWithClick(rawData, cachebuster, rtkClickID)
document.querySelectorAll('a').forEach(function(el) {
if (el.href.indexOf(trackerURL+ "/click") > -1) {
if (el.href.indexOf('?') > -1) {
el.href = stripTrailingSlash(el.href) + "&clickid=" + rtkClickID + "&rtkck=" + cachebuster
} else {
el.href = stripTrailingSlash(el.href) + "?clickid=" + rtkClickID + "&rtkck=" + cachebuster
}
}
if (el.href.indexOf("clickid={clickid}") > -1) {
el.href = el.href.replace(/{clickid}/, rawData.clickid) + "&rtkck=" + cachebuster;
}
});
}
}, 5e1)
function setCookie() {
var cookieName = "rtkclickid-store",
cookieValue = rtkClickID,
expirationTime = 86400 * 30 * 1000,
date = new Date(),
dateTimeNow = date.getTime();
date.setTime(dateTimeNow + expirationTime);
var date = date.toUTCString();
document.cookie = cookieName + "=" + cookieValue + "; expires=" + date + "; path=/;"
}
</script>总结
现在数据已经上报到追踪工具里，你就能实际衡量某个变体带来了多少事件。一旦知道哪个变体获胜，只需结束 A/B 测试，并把它设为主变体。今天就用 LanderLab 开始拆分测试吧，同时彻底避免被封禁的风险。
想结合追踪工具优化 A/B 测试吗？
立即开始免费试用，在 LanderLab 中结合 ClickFlare、Voluum 或 Redtrack 使用高级 A/B 测试！
