One-click upsell folyamat landing oldallal
Az értékesítési tölcsérek megvalósításának bevett módszere az ún. one-click, vagyis egykattintásos upsell oldalak használata. Ennek lényege, hogy az ügyfélnek csak az első termék vásárlásakor kell megadnia a vásárlási és kártya adatait, a további ajánlatok elfogadásakor már csak egyetlen kattintást kérünk tőle ahhoz, hogy a vásárlás megtörténjen.
Ahhoz, hogy az upsell ajánlatot kellő mélységben kifejthesd egy ilyen tölcsérben, landing oldalt célszerű használnod, hiszen egy upsell űrlap nem biztosít elég lehetőséget az eladáshoz.
Felmerülő kérdések és megfontolandó szempontok
- Ha külső oldalt adsz meg a rendelési űrlap köszönőoldalának, és ebben helyezed el a következő űrlapot, akkor meg kell oldanod, hogy a vásárlói adatok átadódjanak ennek a következő űrlapnak is.
- Az OTPSimple nagyon lassan küldi vissza a tokent, amivel újra meg fogod tudni terhelni a vásárlód bankkártyáját.
Amennyiben külső weboldal URL-t adsz meg az űrlapodhoz köszönőoldalnak, a SAPI nem fogja megvárni, hogy beérkezzen a token, ezért amikor a vásárló rákattint a megrendelés gombra, a fizetés sikertelen lesz. Erről a várakozásról tehát neked kel gondoskodnod. - Meg kell oldanod, hogy az űrlap egy, az oldalba illeszkedő gombnak nézzen ki.
Megvalósítási lehetőségek
Kezdem a lagutolsó ponttal, mert az minden esetben ugyanaz. Sajnos, ehhez kell neked egy CSS-ben jártas szakember, aki a kívánt megjelenést előállítja neked. Ha jártas vagy a CSS- akkor szeretném figyelmedbe ajánlani egy korábbi videós bejegyzésemet az űrlapok formázásáról, ez segjteni fog a feladat megoldásában.
1.) Használj SalesAutopilot landing oldalt!
A SalesAutopilot új szerkesztője nagyon jól használható, igazán szép landing oldalakat lehet benne létrehozni egyszerűen kezelhető felületen. Ezen felül sok mintát is találsz a sablonok között, hogy ne kelljen a nulláról indulnod.
Ha ezt a lehetőséget választod, a problémáid egy csapásra megoldódnak:
- Az adatok rendelkezésedre állnak mezőkóddal elérhető formában, tehát ha a landing oldalba egy olyan űrlapot teszel, amiben használod a „Mezők előre kitöltése meglévő adatokkal” opciót, akkor az adatok automatikusan átadódnak. Ugyanígy kell átadnod az ismétlődő fizetés token-t is.
- Ha SAPI landing oldalt, vagy űrlapot választasz köszönőoldalnak, akkor a SAPI megvárja, hogy beérkezzen a token, és csak ezután továbbít a köszönőoldalra, tehát ezt a problémát megoldja helyetted. Itt tehát csak ki kell választanod a legördülőből az első lépésben létrehozott landing oldalt, és kész is vagy.
Minden egyéb esetben az első két felvetett problémát neked kell megoldanod, erre mutatok most pár alternatívát.
2.) WordPress (vagy más) külső landing oldalt használsz, és a megrendelő adatait URL paraméterben adod át
- Ebben az esetben a köszönőoldal URL-t fel kell paraméterezned:
?mezőnév=[mezőkód]&mezőnév=[mezőkód]...
Ez nem annyira szép, meg szerintem nem szül bizalmat, hogy ott vannak az adatok az URL paraméterben – de működik az adatátadás.
Ahhoz, hogy az űrlap el is mentse az átadott információt, be kell olvasnia az URL paramétereket a megfelelő mezőbe.
Erről itt találsz egy leírást: https://github.com/salesautopilot/SalesAutopilotPowerUps/tree/master/ReadUrlParamsIntoIFrame - Mivel a SAPI ebben az esetben nem várja meg neked a tokent, ezért meg kell hackelnünk a rendszert: egy általunk begépelt köszönőoldalt kell használnunk, ami javascripttel irányít át a kívánt URLre. Ehhez az alábbi kódot kell a tag elé beilleszteni:
<script>
window.location = "http://www.yoururl.com?mezőnév=[mezőkód]&mezőnév=[mezőkód]...";
</script>3.) WordPress (vagy más) külső landing oldalt használsz, és egy, a megrendelőhöz tartozó szeméyes landing oldalt jelenítesz meg azon belül
- Igen igen, elmondom magyarul is 🙂
1.) Készítesz egy landing oldalt – hasonlót az első megoldásban használthoz – de ebben a landing oldalban csak az űrlap fog szerepelni az előre kitöltött adatokkal, tehát ugyanúgy csak egy gombnak fog tűnni, ha minden mást elrejtesz az űrlapon.
Erről itt találsz egy leírást: https://github.com/salesautopilot/SalesAutopilotPowerUps/tree/master/ReadUrlParamsIntoIFrame
2.) Ennek a landing oldalnak a linkjét – ami mezőkódként hivatkozható – adod majd át url paraméterben az oldalnak. Ez kb így néz ki:?url=///lp/100111_22222_///id/
3.) Az oldaladba elhelyezel egy javascript kódot, ami az adott url-t megjelenítő iframe-mel lecseréli az eredeti gombot.
<script>
function urlParam(name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
return results[1] || 0;
}
const upsellBtn = document.querySelector('#a-lecserélendő-blokk-azonosítója');
var iframe = document.createElement('iframe');
iframe.src = urlParam('url');
iframe.classList.add("sapiframe");
kajabiBtn.parentNode.replaceChild(iframe, upsellBtn);
</script>
<style>
.sapiframe {
border: none !important;
}
</style>- Itt is az előző megoldásban bemutatott átirányítást kell használnod, de csak a landing oldal linkjét kell átadnod paraméterben:
<script>
window.location = "http://www.yoururl.com?url=///lp/100111_22222_///id/"
</script>4.) WordPress (vagy más) külső landing oldalt használsz, és a megrendelő adatait URL paraméterben adod át, de ezt egy SAPI landing oldalban elhelyezett teljes oldalas iFrame-ként teszed meg
Ez is egy kicsit komplexebb megközelítés, de nagy előnye. hogy az ügyfeled csak egy SAPIs személyes landing oldal urlt lát a címsorban, az URL paraméterekkel ő nem fog találkozni.
- Azt hiszem, ezt egyszerűbb mutatni, mint magyarázni 🙂 Az alábbi kódnak kell a SAPI landing forrásának lennie:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="*" http-equiv="Access-Control-Allow-Origin" />
</head>
<body>
<iframe frameborder="0" id="iframe1" src="https://your.landing.link?mezonev=[mezokod]"></iframe>
</body>
<style type="text/css">
body
{
margin: 0;
overflow: hidden;
}
#iframe1
{
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
</style>
</html>- Az első megoldásban leírtak itt is érvényesülnek: tehát csak ki kell választanod a legördülőből az első lépésben létrehozott landing oldalt, és kész is vagy.
Tesztelj és élvezd az eredményt 🙂
Akárhogy is valósítottad meg az egykattintásos folyamatodat, büszke lehetsz magadra! Most mér csak élvezned kell a munkád gyümölcsét.
A SalesAutopilot nem nyújt támogatást az egyedi kódokkal kapcsolatban, de amennyiben elakadsz, vagy eltérő megoldásra van szükséged, fordulj hozzám bizalommal!
