Voluum・Redtrack・ClickFlareとA/Bテストを連携する方法
はじめに デジタルマーケティングの世界では、A/Bテストはキャンペーンを成功させるうえで欠かせません。LanderLabは、同じURLでさまざまなバリエーションをローテーションできる、サーバーサイドのA/Bテストを設定する便利なツールを提供するようになりました。
Bruno Agalliu3分で読めます
はじめに
デジタルマーケティングの世界では、A/Bテストはキャンペーンを成功させるうえで欠かせません。LanderLabは、同じURLでさまざまなバリエーションをローテーションできる、サーバーサイドのA/Bテストを設定する便利なツールを提供するようになりました。今回のアップデートにより、ユーザーはランディングページをA/Bテストし、その結果をお好みのトラッカー上でクロスチェックできます。
LanderLabでA/Bテストを行う理由
ほとんどのマーケターは、ClickFlare、Voluum、Redtrackといった自前のトラッキングソフトでランディングページをスプリットテストしており、たいていの場合はそれで十分です。しかし、トラッカーではスプリットテストができないケースもあります。プレミアムなトラフィックソースはリダイレクトを許可しておらず、最終的な遷移先URLをランディングページのURLと同じにしなければなりません。
そこで役立つのが、LanderLabのサーバーサイドA/Bテストです。フローからリダイレクトを1つ減らせます。LanderLabでのA/Bテストの仕組みについて詳しくは、こちらの記事をご覧ください。さらに嬉しいことに、LanderLabはほとんどの最新トラッカーと連携できます。
考え方はシンプルで、LanderLabのA/Bテストを、どのトラッカーにも備わっているダイレクトトラッキングの手法と組み合わせます。基本をひととおり押さえるため、この記事ではClickFlare、Voluum、Redtrackでこの構成を実装する方法を紹介します。
ClickFlareでA/Bテストを設定する
ClickFlareのダイレクトトラッキングを使えば、この構成にぴったりの組み合わせが実現できます。そもそも両プラットフォームは同じ会社が作り、開発しているため、両方を使ってより緊密に連携させるのは理にかなっています。ClickFlareのダイレクトトラッキングについて詳しくは、こちらの記事をご覧ください。
この構成を実装するための基本ステップは2つあり、同じ手順をVoluumとRedtrackにも応用できます。最初のステップは、ClickFlareでvariantIDをレポートするための新しいトラッキングパラメータの定義方法です。
トラッカーでvariantIDを計測するには、ダイレクトトラッキングのスクリプトに少し手を加える必要があります。次のスクリプトには、置き換えが必要な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はアフィリエイトマーケティングで最も歴史のあるトラッカーのひとつで、今も市場の大きなシェアを占めています。このトラッカーに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は特定のトークンに割り当てる必要があります。この例ではvariantIDをsub18に割り当てており、ダイレクトトラッキングのスクリプトにも同じように反映されます。
「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テストを終了してメインのバリエーションに設定するだけです。BANされるリスクをなくしながら、今日からLanderLabでスプリットテストを始めましょう。
トラッカーを使ったA/Bテストを最適化しませんか？
今すぐ無料トライアルを始めて、ClickFlare、Voluum、Redtrackと組み合わせたLanderLabの高度なA/Bテストを使いましょう！
