Cele mai bune practici pentru rularea testelor A/B pe aplicații cu o singură pagină (SPA)

Acest articol este partea 2 a seriei Testare A/B pentru aplicații cu o singură pagină .

În partea 1, am introdus conceptul de aplicație cu o singură pagină (SPA), am arătat de ce este în creștere în popularitate și am analizat 10 dintre cele mai bune platforme de testare A/B pe care le puteți utiliza în aplicațiile cu o singură pagină .

Dar executarea testelor A/B pe SPA-uri poate fi puțin dificilă din cauza modului în care funcționează. În acest articol, vă vom oferi sfaturi practice despre cum să desfășurați un experiment pe un SPA și câteva bune practici de urmat.

Evoluția cadrelor SPA

SPA-urile nu sunt un concept nou.

Un brevet din 2002 descrie o tehnologie care este similară cu versiunea contemporană a SPA.

Cu toate acestea, tehnica AJAX, care a fost folosită ca standard de rețea din 2006, a ușurat implementarea acesteia. Este un set de strategii pentru crearea de aplicații web asincrone folosind o varietate de tehnologii la nivelul clientului. Software-ul poate trimite și primi date de pe server în fundal datorită AJAX, fără a modifica starea curentă a paginii sau modul de afișare a conținutului și astfel fără a interfera cu experiența utilizatorului.

Introducerea AJAX, pe de altă parte, nu a reprezentat un moment decisiv în adoptarea SPA.

Creșterea popularității SPA-urilor face parte dintr-o tendință mai mare care a fost alimentată de creșterea rapidă a front-end-ului și de relevanța tot mai mare a UX în ultimii ani.

SPA-urile au fost create mai întâi utilizând applet-uri Java sau programe Flash, precum și bibliotecile „pure” JavaScript sau jQuery.

Cu toate acestea, cadrele front-end precum Angular.js, React.js și Vue.js - toate acestea fiind cadre JavaScript relativ noi - le-au ajutat dezvoltarea.

Care sunt tehnologiile din spatele unei arhitecturi SPA?

Un SPA este în esență un cadru JavaScript cu suport HTML5 și CSS3.

Cu toate acestea, folosind aceste componente, câteva biblioteci și cadre distincte au apărut și au fost adoptate în lumea dezvoltării:

1. unghiulară

Dezvoltat de Google, Angular este cel mai matur și cel mai vechi dintre cele 3 cadre cu documentație detaliată de utilizat, dar cu o curbă de învățare abruptă.

Este încorporat cu o arhitectură originală Model View Controller (MVC), dar folosește în principal un MVVM (Model-View-ViewModel) care permite mai multor dezvoltatori să lucreze separat pe aceeași secțiune de aplicație. Pot exista unele probleme de migrare cu actualizarea la versiuni noi, dar Angular are cea mai mare fiabilitate atunci când crește și este excelent pentru proiecte mari și complexe.

Datorită TypeScript, Angular este o alegere fantastică pentru echipele mari de dezvoltatori, iar unele companii folosesc deja această tehnologie în celelalte produse.

Pe GitHub, este un cadru stabilit, matur, cu un număr mare de colaboratori.

Google și produsele sale, cum ar fi Google Drive și Gmail, precum și Wix, se numără printre utilizatorii Angular for SPA-uri.

2. React.js

React a fost dezvoltat de Facebook și făcut open source. A fost folosit în principal pentru crearea de interfețe cu utilizatorul (Facebook, WhatsApp și Instagram).

Este foarte popular datorită dimensiunii sale ușoare de cod și a capacității sale de a se integra perfect cu alte cadre. De asemenea, are o metodă simplă de migrare între versiuni. (De obicei, o migrare cu un singur clic).

Este frecvent utilizat împreună cu Redux pentru a gestiona starea componentelor aplicației. Uber folosește, de asemenea, tehnologia React.js în produsele sale.

React este potrivit pentru cei care abia încep cu framework-uri front-end JavaScript, precum și pentru start-up-uri și dezvoltatori agile. În plus, această bibliotecă JavaScript oferă opțiuni valoroase de integrare cu o varietate de alte cadre și tehnologii, ceea ce este cu adevărat util atunci când lucrați la un proiect cu un mediu mare. Dintre toate cadrele SPA, React are cele mai multe contribuții pe GitHub, care îi ajută pe dezvoltatori să depaneze potențialele probleme.

Are cea mai ușoară curbă de învățare dintre cele 3 cadre și este cel mai bine utilizat pentru proiecte cu un termen limită scurt care necesită multă scalabilitate.

3. Vue.js

Vue.js nu este deținut de o companie importantă precum Facebook sau Google, dar încă ia ritmul cu noii utilizatori, în special în Asia. Este cel mai nou dintre cadrele SPA de mai sus, fiind fondat în 2014 de Evan You, un fost angajat Google. O mulțime de documentație este de obicei în chineză, dar există încă surse de instruire.

Cadrul este foarte ușor și poate fi folosit pentru a crea pur și simplu aplicații de înaltă performanță.

Pentru majoritatea dezvoltatorilor, nu există probleme majore cu crearea în niciunul dintre aceste cadre, decizia se reduce într-adevăr la caracteristicile majore ale fiecăruia.

Vue.js este folosit acum de întreprinderi precum Baidu, GitLab și Alibaba pentru nevoile lor.

Cum funcționează aplicațiile cu o singură pagină

SPA-urile au un design simplu. Sunt utilizate atât tehnologiile de randare pe partea client, cât și pe partea serverului.

Pe un site web non-SPA, atunci când introduceți o adresă URL în browser, browserul trimite solicitarea către un server și primește o pagină HTML ca răspuns.

Pe un site web SPA, serverul livrează doar documentul HTML la cererea inițială și date JSON la solicitările ulterioare. Acest lucru indică faptul că un SPA va rescrie conținutul paginii curente, mai degrabă decât să reîncarce întregul site web.

Pe scurt, un SPA funcționează astfel:

1. Clientul stabilește mai întâi o conexiune cu serverul și obține conținutul paginii, care constă în principal din cod HTML, CSS și un pachet JavaScript care cuprinde toate scripturile necesare pentru a rula logica aplicației.
2. Acțiunea unui utilizator activează execuția JavaScript(e) relevante, care apoi fac cereri AJAX către server. Datele sunt de obicei într-un format JSON și nu necesită o reîmprospătare completă a paginii web.

În loc de tehnica normală a unui browser care lansează o pagină complet nouă, o aplicație cu o singură pagină interacționează cu utilizatorii prin modificarea forțată a paginilor web existente cu date noi de pe serverul web. Browserul preia codul HTML, JavaScript și CSS necesar sau alte resurse adecvate și le adaugă în pagini după cum este necesar.

Deși API-ul istoric HTML5 sau hash-ul locației pot fi folosite pentru a oferi navigabilitatea și percepția diferitelor pagini logice din aplicația web, pagina nu se reîncarcă în niciun moment în timpul procedurii și nu transferă controlul către o altă pagină.

Dacă doriți să vedeți un exemplu de aplicație cu o singură pagină în acțiune, accesați acest link și faceți clic pe pagina principală, pe lista celor mai recente cursuri și pe meniul de sus. Când faceți asta, veți observa că pagina nu se reîncarcă complet, doar date noi sunt trimise prin fir pe măsură ce utilizatorul se deplasează prin aplicație.

Acesta este un exemplu de SPA.

Pentru cine sunt cele mai potrivite SPA-urile?

Datorită beneficiilor SPA-urilor, acestea sunt acum soluția preferată în multe circumstanțe.

Ei excelează în proiecte care implică o varietate de tehnologii web, în ​​care performanța și o experiență plăcută a utilizatorului sunt mai importante decât conținutul.

Există mulți jucători mari care folosesc SPA-uri. Facebook, Gmail, Google Maps, Netflix și Paypal sunt unele dintre cele mai proeminente exemple ale acestui tip de tehnologie (vezi mai jos).

De ce este dificilă testarea A/B pe SPA-uri?

Toate cele trei cadre – React.js, Angular.js și Vue.js – sunt foarte populare în rândul dezvoltatorilor JavaScript, deoarece permit dezvoltarea de interfețe de utilizator sofisticate care creează experiențe de utilizator mai bune și rate de conversie mai mari.

Sunt foarte de dorit pentru dezvoltatori pentru că

• Nu este necesară reîmprospătarea paginii
• Vitezele de încărcare a paginii sunt mai rapide
• Interacțiunile sunt bogate și fluide
• Transferurile de date sunt reduse
• Piesele reutilizabile permit o dezvoltare mai rapidă
• Comunitatea de dezvoltatori este bine stabilită

Ele sunt, de asemenea, resursa de bază pentru oricine care începe un nou SPA.

Cu toate acestea, există un dezavantaj major: din cauza modului în care funcționează aceste cadre, instrumentele de testare A/B la nivelul clientului se străduiesc să funcționeze corect .

Când cineva navighează pe o pagină web într-un SPA, pagina, inclusiv adresa URL, nu este reîmprospătată . Starea paginii variază în funcție de interacțiunea fiecărui utilizator (de exemplu, diferitele elemente vizibile pe ecran).

Deoarece instrumentele de testare A/B efectuează în mod normal ajustări o singură dată în timpul încărcării inițiale a paginii, aceste interacțiuni ulterioare nu sunt luate în considerare.

Iată două scenarii comune:

1. Dacă aveți afișări de pagină activate în SPA, veți primi o afișare de pagină când cineva vizitează o adresă URL, dar nu o a doua dacă navighează pe o altă pagină în care sunt activate afișările de pagină. Acest lucru se datorează faptului că materialul este încărcat în pagina curentă și nu într-o pagină nouă.
2. Dacă încercați să limitați un eveniment la o anumită adresă URL , veți întâlni aceeași problemă. Instrumentul de testare A/B va „crede” că rămâne pe aceeași pagină pe care a fost încărcat prima dată, chiar dacă utilizatorul crede că se află pe o altă pagină. Deoarece piesele sunt mutate în și în afara site-ului, pot apărea dificultăți în monitorizarea clicurilor sau a altor evenimente.

Pentru a reda experiențe, software-ul de testare A/B la nivelul clientului și platformele de personalizare se bazează pe încărcări complete ale paginilor.

Deoarece acest concept este absent atunci când se utilizează cadre SPA precum React, Angular sau Vue, determinarea dacă a fost adăugat conținut nou pe pagină sau starea conținutului existent s-a schimbat – și, mai semnificativ, când să injectați conținut personalizat – devine mai dificilă.

Așadar, instrumentele de testare A/B trebuie să poată recunoaște contextul vizitatorului, cum ar fi dacă a ajuns la o listă de produse, un detaliu sau o pagină de coș și în ce moment ar trebui furnizat material proaspăt.

Aceasta înseamnă că echipa tehnologică trebuie să fie în permanență la curent cu schimbarea componentelor React SPA sau Angular SPA modularizate, precum și să actualizeze experiențele care influențează acele componente în timp real.

Fiecare interacțiune a utilizatorului în React.js, de exemplu, provoacă reîmprospătarea unuia sau mai multor elemente ale UI, ștergând orice modificări făcute de soluția de testare A/B.

Testare pe partea client vs. Testare pe partea server pe SPA-uri

Când vine vorba de testarea A/B pe un SPA, există două opțiuni:

1. Izolând diferitele „stări” ale aplicației pe care doriți să o testați, apoi setându-le astfel încât, atunci când fiecare „stare” este afișată, să fie apelat un API pentru a face modificările corespunzătoare. Aceasta se numește activare condiționată și se face pe partea clientului .

Câteva exemple de „state” includ afișarea unui formular de abonare, încărcarea unei liste cu rezultatele căutării și așa mai departe.

2. Codificarea modificărilor, pe partea de server , sau o implementare personalizată pentru fiecare nouă experiență.

Ambele opțiuni sunt influențate de cadrul SPA care este utilizat. Deci, după cum probabil ați ghicit, necesită multă cooperare între echipa tehnică și agenți de marketing pentru a continua să funcționeze bine.

Acum, să trecem peste ambele opțiuni și să vedem ce trebuie să facă echipele pentru a avea succes.

Activare condiționată din partea clientului

Dacă tot trebuie să efectuați testarea clientului pe o aplicație SPA, există o soluție.

Pentru a se asigura că scripturile de testare sunt executate numai atunci când aplicația atinge starea dorită, dezvoltatorii web pot folosi o caracteristică numită modul de activare condiționată .

Dacă nu sunteți familiarizat cu activarea condiționată, este un concept simplu de înțeles.

Activarea condiționată, în esență, vă oferă posibilitatea de a defini când un experiment ar trebui activat altfel decât prin metoda sa standard de a face acest lucru la reîmprospătarea paginii.

Acest lucru poate fi realizat scriind un pic de JavaScript. Există două moduri de a face acest lucru.

1. Funcția de sondare

Funcția de sondare este cea mai simplă modalitate de a utiliza activarea condiționată. Funcția scanează pagina la fiecare 50 ms până când apare un element specificat - acesta poate fi un modal, div sau chiar întreaga pagină.

Experimentul începe când apare elementul.

Platforma de testare A/B generează câteva rânduri de JavaScript pe care să le modificați în funcție de elementul pe care doriți să îl caute funcția de sondare.

Experimentul este activat odată ce funcția este evaluată la TRUE .

2. Funcția de apel invers

Execuția funcției de apel invers este similară cu cea a funcției de polling, dar adaugă o oarecare flexibilitate.

Această funcție vă permite să introduceți orice condiție JavaScript dorită și, dacă se evaluează la TRUE , să începeți experimentul.

În timp ce funcția de interogare trimite constant ping la pagină pentru a vedea dacă este prezent un element specificat, funcția de apel invers este mai pasivă și se bazează pe un handler de evenimente.

Testare pe server

Când efectuați testarea pe server, nu se fac modificări la nivel de browser. Mai degrabă, parametrii de variație a experimentului („Utilizatorul 1 vede Varianta A”) sunt determinați la nivel de server și conectați direct în aplicația JavaScript prin intermediul unui furnizor de servicii, ceea ce face mai ușor testarea conținutului mai complicat, dinamic, care se extinde dincolo de limitele unui static. interfața de utilizator a site-ului web.

Luați, de exemplu, aplicațiile de social media care sunt în mare parte SPA-uri. În timp ce testarea frontală pe partea clientului poate fi folosită pentru a experimenta cu acestea, este mult mai complicată datorită conținutului dinamic implicat, prin urmare trecerea la testarea pe partea serverului face procesul mult mai ușor.

Exemple de teste A/B pe SPA-uri

Care sunt câteva exemple din lumea reală de testare A/B pe aplicații cu o singură pagină pe care le-ați putea întâlni?

Schimbarea unei imagini pe o pagină de destinație

Să presupunem că trebuie să setați un experiment pe un SPA pentru a afișa o imagine dinamică pentru 50% din publicul care a ajuns pe o anumită pagină. Cadrul SPA folosit în acest exemplu este React.js, ceea ce înseamnă că pagina se schimbă și imaginile sunt înlocuite în mod regulat.

Dacă afișați imaginea variantă, pot apărea probleme de pâlpâire, ceea ce înseamnă că va fi observată o secvență de imagine originală-varianta imagine-imagine originală.

Această problemă poate fi evitată în întregime prin declanșarea sondajului atunci când se încarcă pagina de destinație specifică.

Testarea copiei suplimentare sub CTA

Un alt experiment pe un site SPA construit cu Angular.js poate implica afișarea unei linii suplimentare de copie sub CTA principală pentru 30% din publicul țintă.

În acest exemplu, versiunea A va afișa linia suplimentară de copiere sub CTA principală, în timp ce versiunea B nu. Vom trimite 30% din traficul nostru către Versiunea A și 70% către Versiunea B, apoi vom compara rezultatele pentru a vedea dacă există o diferență semnificativă în ratele de conversie.

Deoarece site-ul web este construit cu Angular.js, elementele sunt modificate în mod regulat. Evenimentul de apel invers de aici ne poate ajuta să afișăm modificări ale variantei.

Afișarea unui voucher cadou

În acest exemplu, să presupunem că atunci când un utilizator adaugă un produs al unei mărci premium în coșul său, dorim să fie afișat un voucher cadou exclusiv. Cu condiția ca atunci când utilizatorul scoate produsul premium din coș, voucherul să fie eliminat de pe pagină.

1. Ceea ce trebuie să se întâmple aici este că atunci când un utilizator efectuează acțiunea necesară, trebuie trimis un eveniment de activare manuală. Experimentul va fi activat ca urmare a acestui eveniment.
2. Un eveniment de activare ar trebui să fie declanșat atunci când utilizatorul scoate produsul premium din coș, dezactivând experimentul.
3. Experimentul trebuie reactivat pentru a afișa produsul premium dacă consumatorul îl adaugă din nou.

Se afișează sloganul de sub CTA „Cumpără acum”.

Dacă doriți să afișați un slogan unic sub butonul CTA „Cumpărați acum”, puteți activa experimentul dacă apăsați un eveniment de activare pentru modificarea istoricului.

Acest lucru se datorează faptului că pagina care conține butonul CTA „Cumpără acum” nu se va încărca la început.

Cum Convert a ocolit problema testării pe SPA-uri

Experimentele pe SPA-uri trebuie să fie tratate diferit față de alte experimente. Deoarece scriptul Convert nu poate citi adresa URL pe care o navighează un vizitator al site-ului web, nu poate declanșa experimente cu metode standard.

Deci, iată cum se face.

Începeți prin a instala codul de urmărire Convert, așa cum este descris în acest articol.

Apoi, aplicați una dintre cele 3 metode de mai jos:

1. Declanșarea sondajului

După cum sa menționat, sondajul este procesul prin care condițiile de experiență sunt testate pentru a determina dacă experiența respectivă ar trebui declanșată.

Aceasta include monitorizarea adresei URL a vizitatorului, a condițiilor de public sau a condițiilor JavaScript pentru a rula testul.

Sondajul este de obicei declanșat de Conversie atunci când este încărcată o pagină nouă. În SPA-uri, de obicei, nu sunt încărcate pagini noi în aplicația web.

În acest caz, veți avea nevoie de următorul cod pentru a începe sondajul:

 fereastră._conv_q = _conv_q || [];
window._conv_q.push(["run","true"]);

Ar trebui să determinați care ar fi cel mai bun eveniment din SPA-ul dvs. pentru a declanșa codul de mai sus. Exemplu de cod care ar trebui adăugat în secțiunea Setări proiect > JavaScript global pentru proiect.

 console.log('SPA/Convert Code in Global Project Javascript executat');
dacă (!window.globalExecutedTs) {
window.globalExecutedTs = adevărat;
var oldPushState = window.history.pushState;
window.history.pushState = function(data) {
încerca {
setTimeout(funcție() {
return oldPushState.apply(this, arguments);
console.log('conversia activată din pushstate');
fereastră._conv_q = _conv_q || [];
window._conv_q.push(["run", "true"]);
}, 0);
} prinde (e) {
console.log(e);
}
};
window.onpopstate = function(eveniment) {
setTimeout(funcție() {
console.log('conversia activată din popstate');
fereastră._conv_q = _conv_q || [];
window._conv_q.push(["run", "true"]);
}, 0);
};
}

2. Utilizați Condițiile JavaScript în Zona Site-ului

Deoarece scriptul Convert nu poate citi modificările URL într-un SPA, ar trebui să utilizați o condiție JavaScript în loc de o condiție de potrivire URL pentru a declanșa un experiment.

Găsiți o explicație detaliată despre cum să faceți acest lucru în articolul următor.

3. Activați manual un experiment

Puteți declanșa experimente manual după ce determinați că a avut loc un anumit flux. Folosind această metodă, zona site-ului și condițiile de public vor fi în continuare testate după declanșarea sondajului cu cod. Consultați acest articol pentru informații mai detaliate despre activarea manuală a unui experiment.

Cu cele 3 metode de mai sus, ar trebui să puteți declanșa experimente la momentul potrivit într-o aplicație SPA.

Conversia crește riscul de pâlpâire pe SPA-uri?

Răspuns scurt, nu.

Toate cadrele SPA sunt compatibile cu tehnologia anti-pâlpâire de la Convert. Convert folosește tehnologia SmartInsert ^TM din culise pentru a se asigura că modificările experimentului sunt aplicate sau reaplicate la momentul potrivit în SPA, chiar și în timpul reîncărcărilor dinamice ale paginilor.

Vă recomandăm să citiți documentul nostru alb despre efectul de pâlpâire pentru a afla mai multe despre acesta și de ce ar trebui să îl evitați cu orice preț.

Probleme frecvente la testarea A/B pe site-uri de aplicații cu o singură pagină

După cum puteți vedea, există câteva lucruri de care trebuie să aveți în vedere atunci când rulați teste pe site-urile SPA. Odată ce ați acoperit cadrul utilizat, metoda de testare a instrumentului și evenimentul de declanșare, atunci problema principală este de obicei cu elementul de testare care nu se reîncarcă atunci când o nouă pagină sau vizualizare este afișată în browser.

Acest lucru poate fi cauzat de câteva lucruri:

1. Testați modificările care apar pe prima pagină, dar nu și pe cele ulterioare

Uneori, modificarea pe care intenționați să o afișați apare numai pe prima pagină pe care o încărcați în browser, dar nu și în vizualizările ulterioare. Acest lucru se datorează faptului că partea din scriptul Convert care evaluează experimentele și le activează nu rulează atunci când accesați o nouă vizualizare sau „pagină” a site-ului.

2. Modificările care apar în Visual Editor nu apar la previzualizarea lor în afara acestuia

Uneori se poate întâmpla ca modificările făcute cu Editorul vizual să nu apară în afara previzualizării editorului.

Majoritatea cadrelor SPA nu folosesc API-ul DOM și, în schimb, folosesc propriile metode pentru a implementa modificările pe pagină. Acest lucru face ca DOM-ul să nu se sincronizeze atunci când este actualizat de SPA. Acest lucru este obișnuit în React și Angular, ceea ce face ca selectoarele CSS găsite în codul Jquery să nu funcționeze.

3. Modificările continuă să apară în „Vizualizările” ulterioare

În acest scenariu, o modificare a experimentului este afișată în vizualizarea corectă (pagină). Dar, atunci când vizitați vizualizări noi (pagini), schimbarea nu dispare. Acest lucru se întâmplă deoarece pe un site SPA, modificările nu sunt eliminate la reîncărcarea unei pagini noi.

Scriptul Convert elimină codul adăugat atunci când condițiile experimentului nu se potrivesc cu vizualizarea ulterioară în care au fost implementate modificările la apelarea sondajului. Cu toate acestea, acest lucru nu este suficient, deoarece modificările jquery nu vor dispărea chiar și atunci când eliminați codul de experiment al paginii.

Va trebui să executați cod care anulează modificările aduse de experiment.

Rândul tău: evitați aceste greșeli atunci când vă optimizați SPA

Datorită progreselor în modul în care informațiile sunt procesate și furnizate, SPA-urile pot deveni mai frecvent acceptate, dar este esențial să rețineți că această nouă tehnologie are probleme atunci când se integrează cu platformele de optimizare și experimentare, care funcționează în mod normal cu setări mai clasice.

Sperăm că acest articol a acoperit diferitele componente ale SPA-urilor, precum și câteva soluții pentru depășirea acelor obstacole în încercarea dvs. de a oferi vizitatorilor experiențe digitale mai rapide, mai intuitive și personalizate.

Cu toate acestea, va fi mai bine să lucrați cu un furnizor de soluții care poate oferi suport perfect pentru SPA-uri, cum ar fi capacitatea de a detecta modificări ale componentelor UI și ale tipurilor de pagini pentru personalizare dinamică fără a modifica codul sursă. Ca cel din caseta de mai jos.