Como integrar testes A/B com Voluum, Redtrack e ClickFlare
Introdução No mundo do marketing digital, o teste A/B é essencial para campanhas de sucesso. O LanderLab agora oferece uma ótima ferramenta para configurar testes A/B no servidor, usando a mesma URL para alternar diferentes variações.
Introdução
No mundo do marketing digital, o teste A/B é essencial para campanhas de sucesso. O LanderLab agora oferece uma ótima ferramenta para configurar testes A/B no servidor, usando a mesma URL para alternar diferentes variações. Com essa atualização, os usuários podem fazer testes A/B na landing page e cruzar os resultados no tracker de sua preferência.
Por que usar testes A/B com o LanderLab
A maioria dos profissionais de marketing usa o próprio software de rastreamento, como ClickFlare, Voluum ou Redtrack, para fazer split tests em landing pages, e na maior parte dos casos isso é mais do que suficiente. No entanto, há situações em que não é possível fazer split testing com um tracker. As fontes de tráfego premium não permitem redirecionamentos: a URL de destino final precisa ser a mesma da landing page.
É aí que o LanderLab entra em cena, com seu teste A/B no servidor, eliminando um redirecionamento do fluxo. Você pode ler mais detalhes sobre como funciona o teste A/B no LanderLab neste artigo. E o melhor: o LanderLab pode ser integrado com a maioria dos trackers modernos.
O conceito é simples: combinar o teste A/B do LanderLab com o método de direct tracking oferecido por qualquer tracker. Para cobrir o básico, este artigo explica como implementar essa configuração com ClickFlare, Voluum e Redtrack.
Como configurar testes A/B com o ClickFlare
Usar o método de direct tracking do ClickFlare pode ser a combinação perfeita para essa configuração. Afinal, as duas plataformas são criadas e desenvolvidas pela mesma empresa, então faz sentido ter uma integração melhor entre elas. Aqui está um artigo para saber mais sobre o direct tracking oferecido pelo ClickFlare.
Há 2 etapas básicas para implementar essa configuração, e as mesmas etapas valem para Voluum e Redtrack. A primeira é definir um novo parâmetro de rastreamento para registrar a variantID no ClickFlare.
Para rastrear a variantID no nosso tracker, precisamos fazer algumas alterações no script de direct tracking. O script a seguir contém 2 variáveis que precisam ser substituídas: “REPLACE_ME_CAMPAIGN_ID” e “REPLACE_ME_CUSTOM_DOMAIN”. Depois de pronto, o código completo precisa ser colocado no LanderLab, em 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>Como configurar testes A/B com o Voluum
O Voluum está entre os trackers mais antigos do marketing de afiliados e ainda detém uma grande parte do mercado. Vamos continuar usando o direct tracking para registrar a variantID nesse tracker, com o mesmo método de antes.
A variantID é adicionada no final do template da fonte de tráfego, mas a ordem em que ela é inserida não importa muito. Para manter a mesma terminologia, as mesmas 2 variáveis precisam ser substituídas: “REPLACE_ME_CAMPAIGN_ID” e “REPLACE_ME_CUSTOM_DOMAIN”. Copie e cole o código a seguir na seção de código personalizado do LanderLab para concluir a configuração.
<<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>>Como configurar testes A/B com o Redtrack
Por último, mas não menos importante, vamos implementar a mesma configuração para o Redtrack. Esse tracker tem uma boa fatia do mercado e oferece os mesmos recursos que o ClickFlare e o Voluum.
Mas, em comparação com os outros 2 trackers, a variantID precisa ser alocada em um token específico, já que alguns deles são reservados para tokens do sistema. Neste exemplo, a variantID foi alocada em sub18, e isso também será refletido no script de direct tracking.
“REPLACE_ME_CAMPAIGN_ID” e “REPLACE_ME_CUSTOM_DOMAIN” precisam ser substituídos, e então o código está pronto para ser usado no 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>Conclusão
Com os dados agora registrados no seu tracker, dá para medir de fato quantos eventos cada variação está trazendo. Quando você souber qual é a variação vencedora, basta encerrar o teste A/B e defini-la como variação principal. Comece hoje a fazer split testing com o LanderLab, eliminando o risco de ser banido.
