Guider

Så integrerar du A/B-testning med Voluum, Redtrack och ClickFlare

Inledning I digital marknadsföring är A/B-testning avgörande för framgångsrika kampanjer. LanderLab erbjuder nu ett fantastiskt verktyg för att sätta upp A/B-testning på serversidan, där samma URL används för att rotera olika varianter.

Bruno Agalliu2 min läsning

Inledning

I digital marknadsföring är A/B-testning avgörande för framgångsrika kampanjer. LanderLab erbjuder nu ett fantastiskt verktyg för att sätta upp A/B-testning på serversidan, där samma URL används för att rotera olika varianter. Med den här uppdateringen kan användare A/B-testa sin landningssida och korskontrollera resultaten i sin föredragna tracker.

Varför använda A/B-testning med LanderLab?

De flesta marknadsförare använder sin egen spårningsprogramvara, som ClickFlare, Voluum eller Redtrack, för att split-testa landningssidor, och i de flesta fall räcker det mer än väl. Men det finns fall där split-testning inte går att göra med en tracker. Premiumtrafikkällor tillåter inte omdirigeringar: den slutliga destinations-URL:en måste vara densamma som landningssidans URL.

Här kommer LanderLab väl till pass med sin A/B-testning på serversidan, som tar bort en omdirigering i flödet. Läs mer om hur A/B-testning fungerar i LanderLab i den här artikeln. Och det bästa av allt: LanderLab kan integreras med de flesta moderna trackers.

A/B-test

Konceptet är enkelt: kombinera LanderLabs A/B-testning med den direct tracking-metod som varje tracker erbjuder. För att täcka grunderna visar den här artikeln hur du implementerar upplägget med ClickFlare, Voluum och Redtrack.

Så sätter du upp A/B-testning med ClickFlare

ClickFlares direct tracking-metod är den perfekta kombinationen för det här upplägget. Båda plattformarna är trots allt skapade och utvecklade av samma företag, så det är logiskt att få en bättre integration med båda. Här är en artikel där du kan läsa mer om direct tracking i ClickFlare.

Det finns 2 grundsteg att följa när du implementerar det här upplägget, och samma steg gäller för Voluum och Redtrack. Det första steget är att definiera en ny spårningsparameter för att rapportera variantID i ClickFlare.

VariantID i ClickFlare

För att spåra variantID i vår tracker behöver vi göra några ändringar i direct tracking-skriptet. Skriptet nedan innehåller 2 variabler som måste bytas ut: ”REPLACE_ME_CAMPAIGN_ID” och ”REPLACE_ME_CUSTOM_DOMAIN”. När det är klart ska hela koden placeras i LanderLab under 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>

Så sätter du upp A/B-testning med Voluum

Voluum hör till de äldsta trackerna inom affiliatemarknadsföring och har fortfarande en stor del av marknaden. Vi förlitar oss även här på direct tracking för att rapportera variantID till den här trackern, med samma metod som tidigare.

VariantID i Voluum

VariantID läggs till längst ned i mallen för trafikkällan, men i vilken ordning den infogas spelar egentligen ingen roll. För att hålla oss till samma terminologi måste samma 2 variabler bytas ut: ”REPLACE_ME_CAMPAIGN_ID” och ”REPLACE_ME_CUSTOM_DOMAIN”. Kopiera och klistra in följande kod i LanderLabs sektion för custom code, så att upplägget blir klart.

<<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>>

Så sätter du upp A/B-testning med Redtrack

Sist men inte minst ska vi implementera samma upplägg för Redtrack. Den här trackern har en rejäl andel av marknaden och erbjuder samma funktioner som ClickFlare och Voluum.

Men jämfört med de andra 2 trackerna måste variantID tilldelas en specifik token, eftersom vissa av dem är reserverade för systemtokens. I det här exemplet har variantID tilldelats sub18, och det speglas även i direct tracking-skriptet.

VariantID i Redtrack

 

”REPLACE_ME_CAMPAIGN_ID” och ”REPLACE_ME_CUSTOM_DOMAIN” måste bytas ut, och sedan är koden klar att använda i 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>

Slutsats

Nu när datan rapporteras i din tracker går det faktiskt att mäta hur många events en viss variant ger. När du vet vilken variant som vinner avslutar du bara A/B-testet och ställer in den som huvudvariant. Börja split-testa med LanderLab redan i dag och eliminera samtidigt risken att bli bannad.

Vill du optimera A/B-testningen med din tracker?
Starta din kostnadsfria provperiod nu och använd avancerad A/B-testning med LanderLab tillsammans med ClickFlare, Voluum eller Redtrack!

Fortsätt läsa

Mer i Guider.

Ämnen

Bläddra efter ämne

Varje inlägg hör till ett ämne. Börja med det som ligger närmast kampanjen du kör just nu.

Läs playbooken.Bygg sedan sidan.

Kom igång gratis: bygg landningssidan, publicera den på din egen domän och skicka varje lead vidare till din köpare, innan nästa kampanj går live.

Från en prompt till kvalificerade leads

Se en prompt bli en live-funnel för solenergiofferter, där varje lead skickas till din köpare och läckorna flaggas innan de äter upp din budget.

0:00
0:59