Zmieniasz kreator?Zaloguj sięZacznij

Integracje

Jak zintegrować testy A/B z Voluum, Redtrack i ClickFlare

Wprowadzenie W świecie marketingu cyfrowego testy A/B są kluczowe dla skutecznych kampanii. LanderLab oferuje teraz świetne narzędzie do konfigurowania testów A/B po stronie serwera, w których ten sam adres URL rotuje różne warianty.

Bruno Agalliu2 min czytania

Wprowadzenie

W świecie marketingu cyfrowego testy A/B są kluczowe dla skutecznych kampanii. LanderLab oferuje teraz świetne narzędzie do konfigurowania testów A/B po stronie serwera, w których ten sam adres URL rotuje różne warianty. Dzięki tej aktualizacji użytkownicy mogą testować A/B swoją stronę docelową i porównywać wyniki w ulubionym trackerze.

Dlaczego warto korzystać z testów A/B w LanderLab

Większość marketerów korzysta z własnego oprogramowania do śledzenia, takiego jak ClickFlare, Voluum czy Redtrack, do split testów stron docelowych i w większości przypadków w zupełności to wystarcza. Zdarzają się jednak sytuacje, w których split testing z użyciem trackera nie jest możliwy. Premium źródła ruchu nie dopuszczają przekierowań, a końcowy docelowy adres URL musi być taki sam jak adres URL strony docelowej.

Tu z pomocą przychodzi LanderLab ze swoimi testami A/B po stronie serwera, które eliminują przekierowanie z całego przepływu. Więcej szczegółów o tym, jak działają testy A/B w LanderLab, znajdziesz w tym artykule. A najlepsze jest to, że LanderLab można zintegrować z większością nowoczesnych trackerów.

Test A/B

Koncepcja jest prosta: połączyć testy A/B z LanderLab z metodą direct tracking, którą oferuje każdy tracker. Żeby omówić podstawy, ten artykuł pokazuje, jak wdrożyć takie rozwiązanie z ClickFlare, Voluum i Redtrack.

Konfiguracja testów A/B z ClickFlare

Metoda direct tracking w ClickFlare to idealne uzupełnienie tego rozwiązania. Obie platformy są przecież tworzone i rozwijane przez tę samą firmę, więc ma sens, by integrowały się ze sobą jak najlepiej. Oto artykuł, z którego dowiesz się więcej o direct tracking w ClickFlare.

Wdrożenie tego rozwiązania wymaga 2 podstawowych kroków, a te same kroki można zastosować w Voluum i Redtrack. Pierwszy to zdefiniowanie nowego parametru śledzenia do raportowania variantID w ClickFlare.

VariantID w ClickFlare

Żeby śledzić variantID w naszym trackerze, musimy wprowadzić kilka zmian w skrypcie direct tracking. Poniższy skrypt zawiera 2 zmienne do podmiany: „REPLACE_ME_CAMPAIGN_ID” i „REPLACE_ME_CUSTOM_DOMAIN”. Gdy będzie gotowy, cały kod trzeba wkleić w LanderLab w 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>

Konfiguracja testów A/B z Voluum

Voluum to jeden z najstarszych trackerów w marketingu afiliacyjnym i wciąż ma duży udział w rynku. Tutaj również oprzemy się na direct tracking, by raportować variantID w tym trackerze, tą samą metodą co wcześniej.

VariantID w Voluum

VariantID dodaje się na końcu szablonu źródła ruchu, ale kolejność wstawienia nie ma większego znaczenia. Dla spójności terminologii trzeba podmienić te same 2 zmienne: „REPLACE_ME_CAMPAIGN_ID” i „REPLACE_ME_CUSTOM_DOMAIN”. Skopiuj i wklej poniższy kod w sekcji kodu niestandardowego w LanderLab, aby dokończyć konfigurację.

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

Konfiguracja testów A/B z Redtrack

Na koniec wdrożymy to samo rozwiązanie w Redtrack. Ten tracker ma spory udział w rynku i oferuje te same funkcje co ClickFlare i Voluum.

Jednak w odróżnieniu od pozostałych 2 trackerów variantID trzeba przypisać do konkretnego tokena, ponieważ część z nich jest zarezerwowana na tokeny systemowe. W tym przykładzie variantID przypisano do sub18 i zostanie to odzwierciedlone również w skrypcie direct tracking.

VariantID w Redtrack

 

Trzeba podmienić „REPLACE_ME_CAMPAIGN_ID” i „REPLACE_ME_CUSTOM_DOMAIN”, a wtedy kod jest gotowy do użycia w 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>

Podsumowanie

Skoro dane są już raportowane w Twoim trackerze, można realnie zmierzyć, ile zdarzeń przynosi dany wariant. Gdy poznasz zwycięski wariant, wystarczy zakończyć test A/B i ustawić go jako wariant główny. Zacznij już dziś split testing z LanderLab, eliminując ryzyko bana.

Chcesz zoptymalizować testy A/B w swoim trackerze?
Rozpocznij bezpłatny okres próbny i korzystaj z zaawansowanych testów A/B w LanderLab razem z ClickFlare, Voluum lub Redtrack!
Rozpocznij bezpłatny okres próbny

Czytaj dalej

Więcej z bloga.

Wszystkie wpisy

Tematy

Przeglądaj według tematu

Każdy wpis należy do jakiegoś tematu. Zacznij od tego, który jest najbliższy kampanii, jaką prowadzisz.

Wszystkie wpisy

Przeczytaj playbook.Potem zbuduj stronę.

Zacznij za darmo: zbuduj stronę docelową, opublikuj ją we własnej domenie i skieruj każdego leada do swojego odbiorcy, zanim ruszy kolejna kampania.

Zacznij za darmoPorozmawiaj z działem sprzedaży

Od jednego promptu do kwalifikowanych leadów

Zobacz, jak jeden prompt zamienia się w działający quiz funnel z wyceną fotowoltaiki, każdy lead trafia do odbiorcy, a wycieki są wyłapywane, zanim zjedzą budżet.

Zacznij za darmoZobacz cennik
0:00
0:59