Cum creează VWO o experiență de vizitare fără frecări atunci când rulează experimente pe o aplicație cu o singură pagină (SPA)

O analiză profundă a modului în care suportul nativ de la VWO pentru site-urile web dinamice face experimentarea mai ușoară pentru dvs., pe măsură ce creați experiențe perfecte pentru vizitatorii dvs.

Multe site-uri web sunt create ca aplicații cu o singură pagină (SPA), deoarece au puține avantaje cheie față de site-urile web statice tradiționale: site-urile web dinamice sunt rapide, compacte și receptive. Astfel de site-uri web vă permit să optimizați conținutul pe care îl vede utilizatorul dvs. pentru a crea experiențe captivante și unice. Dacă auziți de la echipa de dezvoltare că site-ul dvs. este creat folosind React, Vue, AngularJS, Ember sau Backbone, probabil că lucrați cu un SPA, iar acest articol este relevant pentru dvs.

În acest articol, vorbim despre modul în care noi, la VWO, facem experimentarea pe site-uri web dinamice eficace și ușoară, cu suport încorporat pentru testarea SPA, astfel încât să vă concentrați doar pe eforturile de optimizare a experienței site-ului dvs. și nimic altceva.

Dar mai întâi, să vorbim despre problema care te-a adus aici, în primul rând.

Provocările derulării experimentelor pe site-uri web dinamice

Probabil că sunteți aici deoarece, atunci când desfășurați experimente pe un SPA, modificările pe care le faceți paginii dvs. de destinație nu sunt vizibile pentru utilizatorii finali. Ca urmare, nu vă puteți testa și valida ideile cât de repede doriți și acest lucru vă lasă frustrat.

În primul rând, să înțelegem că SPA-urile sunt diferite de site-urile web tradiționale. Întreaga pagină web se încarcă de fiecare dată când cineva vizitează un site web convențional. În SPA, însă, doar unele secțiuni ale paginii sunt actualizate. Acest lucru se datorează faptului că, în SPA, resurse precum HTML, CSS, Scripturi etc., care construiesc aspectul paginii dvs. web, sunt încărcate o singură dată.

Pe baza modului în care utilizatorul interacționează cu diferite părți ale paginii web, ceea ce vedeți într-o anumită secțiune a paginii se schimbă dinamic ca răspuns la acțiunea utilizatorului. Să spunem, dacă un utilizator dă clic pe un buton, se deschide o fereastră pop-up. Această fereastră pop-up este schimbarea dinamică făcută de cadru în funcție de interacțiunea utilizatorului, fără a afecta performanța. Mai multe exemple în care există o schimbare dinamică într-un SPA sunt următoarele:

• Elemente dintr-o listă de rezultate de căutare care pot fi extinse pentru a vedea detaliile acesteia.
• Într-un formular, unele câmpuri apar pe pagină numai atunci când un vizitator selectează o valoare predefinită dintr-un meniu derulant.
• Site-ul web folosește unele componente, cum ar fi un calendar, un selector de culori etc., care sunt reîncărcate de fiecare dată când utilizatorul trebuie să le folosească.

Deși acest lucru este bun pentru experiența utilizatorului, rularea unei campanii de testare cu modificări aduse oricăruia dintre aceste elemente dinamice (cum ar fi liste de rezultate ale căutării, meniuri derulante, widget-uri, ferestre pop-up, bannere etc.) pe paginile dvs. web devine dificilă. Acest lucru se datorează faptului că modificările aduse unei componente trebuie să fie aplicate de fiecare dată când ceva se schimbă dinamic pe site.

Gândiți-vă la asta în acest fel - executați un test pe o pagină web. De fiecare dată când pagina web se încarcă (de către un utilizator care vizitează pagina) sau pagina creează un element dinamic așa cum este descris mai sus, cadrul SPA arată starea originală (diferită de variația pe care doriți să o afișați ca parte a testului).

Ceea ce aveți nevoie este o platformă de experimentare care să asigure că varianta dvs. de testare înlocuiește vizualizarea originală, astfel încât utilizatorii să vadă variația pe care doriți să o vadă. Deci, în timp ce setați un test pe un SPA, (să spunem că testați conținutul într-o casetă pop-up), vă veți aștepta ca controlul și variația testului să arate astfel:

Dar, în absența suportului SPA, modificările făcute asupra variației vor reveni la control, făcându-le pe ambele să pară identice. Cam asa:

Aceasta este doar o versiune simplificată a ceea ce se întâmplă. Dacă sunteți interesat să înțelegeți din punct de vedere tehnic ce se întâmplă în spatele ecranului, continuați să citiți înainte, altfel puteți sări la următoarea secțiune a articolului.

Unele cadre de site web, cum ar fi GatsbyJS, Next.js, ReactJS etc., folosesc randarea pe server și stochează un instantaneu al paginii dvs. web originale așa cum ar trebui să se încarce. Deci, atunci când modificați un element de pe pagină în scopuri de testare, cadrul detectează modificarea ca o „problemă” și revine pagina la starea inițială așa cum apare în instantaneul stocat. Acest lucru, la rândul său, vă împiedică testul A/B.

În al doilea rând, cele mai recente cadre precum React, Gatsby, Next.js, Vue.js, Angular etc., utilizează conceptul de randare bazată pe stare. De exemplu, în React, ori de câte ori o modificare este implementată într-una dintre stări din cauza variației testului A/B, interfața site-ului se reîncarcă automat la forma sa originală, astfel încât utilizatorii să nu vadă niciodată variația. Acest lucru creează o experiență suboptimă pentru vizitatorii site-ului.

Cum VWO face experimentarea în aplicațiile cu o singură pagină fără efort

Acum că am discutat problema, să vorbim despre soluție. Suportul SPA nativ avansat de la VWO în Editorul său vizual, care face parte din VWO Testing, asigură aplicarea modificărilor făcute într-un experiment în SPA-uri pentru a asigura fiabilitatea campaniilor și pentru a oferi o experiență fără fricțiuni vizitatorilor dvs.

1. Testarea elementelor dinamice pe site-ul dvs

În timp ce elementele dinamice au fost definite în secțiunea anterioară, să le analizăm îndeaproape cu un exemplu specific. Luați în considerare că aveți un site de comerț electronic. După ce faceți clic pe butonul „X” (Închidere) de pe „Pagina coș”, apare o alertă ca o fereastră pop-up. Acum, ați dori să testați modificările de copiere în caseta de acțiuni pentru a vedea dacă mesajele acționabile și apelul la acțiune ar putea împiedica oamenii să închidă pagina Coș. Caseta de alertă nu este prezentă inițial pe codul site-ului, dar este adăugată de cadrul SPA atunci când vizitatorul face clic pe butonul „X” (Închidere). Aici, butonul care deschide fereastra pop-up pe care rulați testul se numește elementul țintă.

VWO se asigură că modificarea pe care doriți să o testați este aplicată ferestrei pop-up imediat ce se încarcă. Tot ce trebuie să faceți este să activați o setare cu un clic pe un buton. Puteți citi mai multe despre această setare în articolul din baza noastră de cunoștințe.

Cum se asigură VWO că modificările sunt aplicate corect?

Uşor.

VWO urmărește elementele paginii (videoclipuri, imagini, tabele, secțiuni etc.) pentru modificările aduse acestora în orice moment. Prin urmare, atunci când elementul țintă (butonul Închidere „X” din exemplul de mai sus) se încarcă, VWO îl detectează și aplică modificarea pe care ați făcut-o în Variation. Acest lucru se întâmplă chiar dacă pagina web nu este reîncărcată, ci utilizatorul doar interacționează cu o secțiune de pe site.

Să facem puțină tehnică și să o explorăm mai departe. Puteți sări peste acest lucru și să treceți la următorul punct dacă detaliile tehnice nu sunt pentru dvs.

Într-un site web dinamic, pe baza comportamentului utilizatorului, elementele sunt adăugate, eliminate sau modificate. Un arbore DOM este ca un depozit al tuturor componentelor site-ului web (butoane, bannere, ferestre pop-up, widget-uri etc.) și păstrează un instantaneu al stării curente a site-ului web.

Biblioteca VWO folosește Mutation Observer – o interfață de browser care permite VWO să observe modificările din arborele DOM al unui SPA. Acest lucru ajută la detectarea oricărui element nou adăugat, eliminat sau modificat pe pagină. Într-un astfel de caz, VWO aplică modificările asupra elementelor automat. Deci, ori de câte ori elemente se încarcă dinamic, modificările sunt aplicate înainte de a fi afișate vizitatorului. Acest lucru îmbunătățește fiabilitatea campaniilor, asigurându-se că modificările variațiilor sunt aplicate complet.

Cum gestionează VWO modificările împiedicate de redarea cadrului ?

VWO păstrează ascuns butonul CTA până la finalizarea redării cadrului. VWO verifică în mod repetat dacă randarea este făcută. Odată ce randarea cadrului este completă, campania VWO începe să se execute.

Puteți citi mai multe despre aceste setări în articolul din baza noastră de cunoștințe.

2. Testarea oricărui alt element de pagină de pe site-ul dvs. web

Când se încarcă o pagină, cadrele SPA moderne revin elementelor modificate la starea lor originală de fiecare dată când se încarcă site-ul web. Deci, dacă testați pagina, toate modificările dvs. vor fi revenite la originalul. Nu doar elementele dinamice, ci și pentru toate elementele de pe pagină, VWO ține evidența modificărilor pe care le-ați făcut pentru a face față provocării testării cu cadrul SPA. În timp ce aplică aceste modificări paginii dvs. web, VWO detectează toate modificările făcute pe pagină (inserarea, ștergerea și modificarea nodurilor DOM) prin test și le reaplică pentru a asigura regularitatea experienței utilizatorului.

Nu sunt necesare acțiuni explicite pentru a activa această îmbunătățire pe VWO. Aceasta este o funcție încorporată disponibilă pentru toate campaniile VWO create cu Editorul vizual, indiferent de cadrul pe care este construit site-ul dvs.

Să ne uităm la câteva exemple de cazuri de utilizare ale modificărilor pe care le gestionează VWO Visual Editor.

1. Să presupunem că ați eliminat un buton CTA secundar (spuneți „Adăugați la lista de dorințe”) de pe site-ul dvs. de comerț electronic pentru a testa dacă această modificare afectează numărul de clicuri pe CTA principal (spuneți „Adăugați în coș”). Acesta este un caz de utilizare de testare în care ștergeți un element de pe site. Chiar dacă ați șters butonul, acesta persistă în DOM-ul virtual creat de cadre precum React și va genera o eroare atunci când site-ul se încarcă.

2. Acum imaginați-vă că site-ul dvs. de comerț electronic are un flux de înregistrare care arată o casetă de introducere a textului pentru a capta adresele de e-mail ale vizitatorilor, pe lângă butonul „Trimite acum”. Când modificați aspectul casetei de introducere a textului, componentele stilate ale site-ului web asociate acesteia se modifică. Editorul vizual de la VWO asigură că cele mai recente modificări aplicate sunt ceea ce văd utilizatorii. Urmăriți cum puteți face modificări unui câmp de formular într-un SPA și asigurați-vă că vizitatorii eșantionați pentru variație văd acele modificări în loc să vadă controlul.

Cum să utilizați VWO pentru aplicația dvs. de o singură pagină?

Pentru a utiliza VWO pentru SPA, trebuie pur și simplu să adăugați VWO SmartCode în secțiunea de cap a site-ului dvs. și să vă bucurați de suportul implicit pentru site-urile SPA.

Cu integrarea atât de simplă ca aceasta, puteți începe imediat. Înscrieți-vă pentru o încercare gratuită, explorați capabilitățile VWO sau solicitați o demonstrație cu experții noștri în produse. De asemenea, puteți afla mai multe despre cele mai recente și interesante actualizări ale produselor noastre.