Procedure consigliate per l'esecuzione di test A/B su applicazioni a pagina singola (SPA)

Questo articolo è la parte 2 della serie A/B Testing su applicazioni a pagina singola .

Nella parte 1, abbiamo introdotto il concetto di applicazione a pagina singola (SPA), abbiamo mostrato perché sta diventando sempre più popolare e abbiamo esaminato 10 delle migliori piattaforme di test A/B che puoi utilizzare su app a pagina singola .

Ma eseguire test A/B su SPA può essere un po' complicato a causa del modo in cui funzionano. In questo articolo, ti forniremo consigli pratici su come eseguire un esperimento su una SPA e alcune best practice da seguire.

L'evoluzione dei framework SPA

Le SPA non sono un concetto nuovo.

Un brevetto del 2002 descrive una tecnologia simile alla versione contemporanea di SPA.

Tuttavia, la tecnica AJAX, utilizzata come standard di rete dal 2006, ne ha facilitato l'implementazione. È un insieme di strategie per la creazione di applicazioni Web asincrone utilizzando una varietà di tecnologie lato client. Il software può inviare e ricevere dati dal server in background grazie ad AJAX, senza alterare lo stato attuale della pagina o la modalità di visualizzazione dei contenuti, e quindi senza interferire con l'esperienza dell'utente.

L'introduzione dell'AJAX, invece, non è stato un momento spartiacque nell'adozione della SPA.

L'aumento della popolarità delle SPA fa parte di una tendenza più ampia che è stata alimentata dalla rapida crescita del front-end e dalla crescente rilevanza dell'UX negli ultimi anni.

Le SPA sono state create per la prima volta utilizzando applet Java o programmi Flash, nonché le librerie JavaScript o jQuery "pure".

Tuttavia, framework front-end come Angular.js, React.js e Vue.js, tutti framework JavaScript relativamente nuovi, hanno aiutato il loro sviluppo.

Quali sono le tecnologie alla base di un'architettura SPA?

Una SPA è essenzialmente un framework JavaScript con supporto HTML5 e CSS3.

Tuttavia, utilizzando questi componenti, sono emerse alcune librerie e framework distinti che sono stati adottati nel mondo dello sviluppo:

1. Angolare

Sviluppato da Google, Angular è il più maturo e il più antico dei 3 framework con una documentazione dettagliata da utilizzare ma una curva di apprendimento ripida.

È integrato con un'architettura Model View Controller (MVC) originale, ma utilizza principalmente un MVVM (Model-View-ViewModel) che consente a più sviluppatori di lavorare separatamente sulla stessa sezione dell'app. Potrebbero esserci alcuni problemi di migrazione con l'aggiornamento a nuove versioni, ma Angular ha la massima affidabilità quando si aumenta la scalabilità ed è ottimo per progetti grandi e complessi.

Grazie a TypeScript, Angular è una scelta fantastica per grandi team di sviluppatori e alcune aziende utilizzano già questa tecnologia nei loro altri prodotti.

Su GitHub, è un framework consolidato e maturo, con un gran numero di contributori.

Google e i suoi prodotti come Google Drive e Gmail, oltre a Wix, sono tra gli utenti di Angular per SPA.

2. React.js

React è stato sviluppato da Facebook e reso open source. È stato utilizzato principalmente per creare interfacce utente (Facebook, WhatsApp e Instagram).

È molto popolare grazie alle sue dimensioni ridotte del codice e alla sua capacità di integrarsi perfettamente con altri framework. Ha anche un metodo semplice per la migrazione tra le versioni. (Di solito una migrazione con un clic).

Viene spesso utilizzato insieme a Redux per gestire lo stato dei componenti dell'applicazione. Uber utilizza anche la tecnologia React.js nei suoi prodotti.

React è adatto a coloro che hanno appena iniziato con i framework front-end JavaScript, nonché per le start-up e gli sviluppatori agili. Inoltre, questa libreria JavaScript offre preziose opzioni di integrazione con una varietà di altri framework e tecnologie, il che è davvero utile quando si lavora su un progetto con un ambiente di grandi dimensioni. Di tutti i framework SPA, React ha il maggior numero di contributi su GitHub, che aiuta gli sviluppatori a risolvere potenziali problemi.

Ha la curva di apprendimento più semplice dei 3 framework ed è meglio utilizzato per progetti con una scadenza breve che richiedono molta scalabilità.

3. Vue.js

Vue.js non è di proprietà di una grande azienda come Facebook o Google, ma sta ancora prendendo il passo con i nuovi utenti, soprattutto in Asia. È il più recente dei framework SPA di cui sopra, essendo stato fondato nel 2014 da Evan You, un ex dipendente di Google. Gran parte della documentazione è solitamente in cinese, ma ci sono ancora fonti di formazione disponibili.

Il framework è molto leggero e può essere utilizzato per creare semplicemente applicazioni ad alte prestazioni.

Per la maggior parte degli sviluppatori, non ci sono grossi problemi con la creazione in nessuno di questi framework, la decisione si riduce davvero alle caratteristiche principali di ciascuno.

Vue.js è ora utilizzato da aziende come Baidu, GitLab e Alibaba per le loro esigenze.

Come funzionano le app a pagina singola

Le SPA hanno un design semplice. Vengono utilizzate tecnologie di rendering sia lato client che lato server.

In un sito Web non SPA, quando inserisci un URL nel browser, il browser invia la richiesta a un server e riceve in risposta una pagina HTML.

Su un sito SPA, il server fornisce solo il documento HTML sulla richiesta iniziale e i dati JSON sulle richieste successive. Ciò indica che una SPA riscriverà il contenuto della pagina corrente anziché ricaricare l'intero sito web.

In poche parole, una SPA funziona così:

1. Il client stabilisce prima una connessione con il server e ottiene il contenuto della pagina, che consiste principalmente di codice HTML, CSS e un bundle JavaScript che comprende tutti gli script necessari per eseguire la logica dell'applicazione.
2. L'azione di un utente attiva l'esecuzione di JavaScript rilevanti, che quindi effettuano richieste AJAX al server. I dati sono generalmente in formato JSON e non richiedono un aggiornamento completo della pagina Web.

Invece della normale tecnica di un browser che avvia una pagina completamente nuova, un'applicazione a pagina singola interagisce con gli utenti modificando forzatamente le pagine Web esistenti con nuovi dati dal server Web. Il browser recupera il codice HTML, JavaScript e CSS necessario o altre risorse appropriate e le aggiunge alle pagine secondo necessità.

Sebbene l'API della cronologia HTML5 o l'hash della posizione possano essere utilizzati per fornire la navigabilità e la percezione di diverse pagine logiche nell'applicazione Web, la pagina non si ricarica in nessun momento durante la procedura e non trasferisce il controllo a un'altra pagina.

Se vuoi vedere un esempio di applicazione a pagina singola in azione, vai a questo link e clicca sulla pagina principale, l'elenco dei corsi più recenti e il menu in alto. Quando lo fai, noterai che la pagina non si ricarica completamente, solo i nuovi dati vengono inviati via cavo mentre l'utente si sposta nell'applicazione.

Questo è un esempio di SPA.

A chi sono più adatte le SPA?

Grazie ai vantaggi delle SPA, ora sono la soluzione preferita in molte circostanze.

Eccellono in progetti che coinvolgono una varietà di tecnologie web, in cui le prestazioni e un'esperienza utente piacevole sono più importanti dei contenuti.

Ci sono molti grandi giocatori che usano le SPA. Facebook, Gmail, Google Maps, Netflix e Paypal sono alcuni degli esempi più importanti di questo tipo di tecnologia (vedi sotto).

Perché il test A/B è difficile sulle SPA?

Tutti e tre i framework, React.js, Angular.js e Vue.js, sono molto popolari tra gli sviluppatori JavaScript perché consentono lo sviluppo di interfacce utente sofisticate che creano esperienze utente migliori e tassi di conversione più elevati.

Sono molto desiderabili per gli sviluppatori perché

• Non è necessario aggiornare la pagina
• Le velocità di caricamento della pagina sono più veloci
• Le interazioni sono ricche e fluide
• I trasferimenti di dati sono ridotti
• I pezzi riutilizzabili consentono uno sviluppo più rapido
• La comunità degli sviluppatori è ben consolidata

Sono anche la risorsa di riferimento per chiunque inizi una nuova SPA.

Tuttavia, c'è un grosso inconveniente: a causa del funzionamento di questi framework, gli strumenti di test A/B lato client faticano a funzionare correttamente .

Quando qualcuno esplora una pagina Web in un'area SPA, la pagina, incluso l'URL, non viene aggiornata . Lo stato della pagina varia con ogni interazione dell'utente (ad esempio i diversi elementi visibili sullo schermo).

Poiché gli strumenti di test A/B normalmente apportano modifiche solo una volta durante il caricamento della pagina iniziale, queste interazioni successive non vengono prese in considerazione.

Ecco due scenari comuni:

1. Se hai abilitato le visualizzazioni di pagina nella tua SPA, riceverai una visualizzazione di pagina quando qualcuno visita un URL, ma non una seconda se naviga su una pagina diversa in cui sono abilitate le visualizzazioni di pagina. Questo perché il materiale viene caricato nella pagina corrente anziché in una nuova pagina.
2. Se provi a limitare un evento a un URL specifico , riscontrerai lo stesso problema. Lo strumento di test A/B "crederà" di rimanere sulla stessa pagina su cui è stato caricato per la prima volta, anche se l'utente pensa di trovarsi su una pagina diversa. Poiché i pezzi vengono spostati all'interno e all'esterno del sito, potrebbero verificarsi difficoltà nel monitorare i clic o altri eventi.

Per il rendering delle esperienze, il software di test A/B lato client e le piattaforme di personalizzazione si basano su caricamenti di pagine completi.

Poiché questo concetto è assente quando si utilizzano framework SPA come React, Angular o Vue, determinare se è stato aggiunto nuovo contenuto alla pagina o se lo stato del contenuto esistente è cambiato e, soprattutto, quando inserire contenuto personalizzato, diventa più difficile.

Quindi gli strumenti di test A/B devono essere in grado di riconoscere il contesto del visitatore, ad esempio se è arrivato a un elenco di prodotti, un dettaglio o una pagina del carrello, e a che punto deve essere fornito materiale fresco.

Ciò significa che il team tecnico deve essere costantemente aggiornato sulla modifica dei componenti modulari React SPA o Angular SPA, oltre ad aggiornare le esperienze che influenzano tali componenti in tempo reale.

Ogni interazione dell'utente in React.js, ad esempio, provoca l'aggiornamento di uno o più elementi dell'interfaccia utente, eliminando eventuali modifiche apportate dalla soluzione di test A/B.

Test lato client e test lato server su SPA

Quando si tratta di test A/B su una SPA, ci sono due opzioni:

1. Isolando i vari “stati” dell'applicazione che si vuole testare, quindi impostandoli in modo che quando ogni “stato” viene visualizzato, venga richiamata un'API per apportare le opportune modifiche. Questa è chiamata attivazione condizionale e viene eseguita sul lato client .

Alcuni esempi di "stati" includono la visualizzazione di un modulo di iscrizione, il caricamento di un elenco di risultati di ricerca e così via.

2. Hardcoding delle modifiche, lato server , o una distribuzione personalizzata per ogni nuova esperienza.

Entrambe queste opzioni sono influenzate dal framework SPA utilizzato. Quindi, come avrai intuito, richiedono molta cooperazione tra il team tecnico e gli esperti di marketing per continuare a lavorare bene.

Ora esaminiamo entrambe queste opzioni e vediamo cosa devono fare i team per avere successo.

Attivazione condizionale lato client

Se è ancora necessario eseguire test lato client su un'applicazione SPA, esiste una soluzione alternativa.

Per garantire che gli script di test vengano eseguiti solo quando l'applicazione raggiunge lo stato desiderato, gli sviluppatori Web possono utilizzare una funzionalità denominata modalità di attivazione condizionale .

Se non hai familiarità con l'attivazione condizionale, è un concetto semplice da comprendere.

L'attivazione condizionale, in sostanza, ti dà la possibilità di definire quando un esperimento deve essere attivato in modo diverso dal metodo standard per farlo all'aggiornamento di una pagina.

Questo può essere ottenuto scrivendo un po' di JavaScript. Ci sono due modi per farlo.

1. La funzione di polling

La funzione di polling è il modo più semplice per utilizzare l'attivazione condizionale. La funzione esegue la scansione della pagina ogni 50 ms finché non viene visualizzato un elemento specificato: potrebbe essere un modale, un div o persino l'intera pagina.

L'esperimento inizia quando appare l'elemento.

La piattaforma di test A/B genera alcune righe di JavaScript che puoi modificare a seconda dell'elemento che desideri che la funzione di polling cerchi.

L'esperimento viene attivato quando la funzione restituisce TRUE .

2. La funzione di richiamata

L'esecuzione della funzione di callback è simile a quella della funzione di polling, ma aggiunge una certa flessibilità.

Questa funzione ti consente di inserire qualsiasi condizione JavaScript che desideri e, se restituisce TRUE , di avviare l'esperimento.

Mentre la funzione di polling esegue costantemente il ping della pagina per vedere se è presente un elemento specificato, la funzione di callback è più passiva e si basa su un gestore di eventi.

Test lato server

Quando si esegue il test lato server, non vengono apportate modifiche a livello di browser. Piuttosto, i parametri di variazione dell'esperimento ("L'utente 1 vede la variazione A") sono determinati a livello di server e collegati direttamente all'applicazione JavaScript tramite un provider di servizi, rendendo più semplice testare contenuti più complessi e dinamici che si estendono oltre i limiti di un interfaccia utente del sito web.

Prendi, ad esempio, le app dei social media che sono per lo più SPA. Sebbene il test lato client frontend possa essere utilizzato per sperimentare questi, è molto più complicato a causa del contenuto dinamico coinvolto, quindi il passaggio al test lato server rende il processo molto più semplice.

Esempi di A/B Test su SPA

Quali sono alcune istanze reali di test A/B su applicazioni a pagina singola in cui potresti imbatterti?

Modifica di un'immagine su una pagina di destinazione

Diciamo che devi impostare un esperimento su una SPA per mostrare un'immagine dinamica al 50% del pubblico che è arrivato a una pagina specifica. Il framework SPA utilizzato in questo esempio è React.js, il che significa che la pagina sta cambiando e le immagini vengono sostituite regolarmente.

Se si visualizza l'immagine variante, potrebbero verificarsi problemi di sfarfallio, il che significa che verrà osservata una sequenza di immagine originale-immagine variante-immagine originale.

Questo problema può essere evitato del tutto attivando il polling quando viene caricata la pagina di destinazione specifica.

Testare una copia aggiuntiva sotto la CTA

Un altro esperimento su un sito SPA creato con Angular.js potrebbe comportare la visualizzazione di una riga aggiuntiva di testo al di sotto del CTA principale al 30% del pubblico di destinazione.

In questo esempio, la versione A mostrerà la riga di copia aggiuntiva sotto l'invito all'azione principale, mentre la versione B no. Invieremo il 30% del nostro traffico alla versione A e il 70% alla versione B, quindi confronteremo i risultati per vedere se c'è una differenza significativa nei tassi di conversione.

Poiché il sito Web è stato creato con Angular.js, gli elementi vengono modificati regolarmente. L'evento di callback qui può aiutarci a visualizzare le modifiche alla variante.

Visualizzazione di un buono regalo

In questo esempio, supponiamo che quando un utente aggiunge un prodotto di un marchio premium al proprio carrello, desideriamo che venga visualizzato un buono regalo esclusivo. A condizione che quando l'utente rimuove il prodotto premium dal carrello, il voucher venga cancellato dalla pagina.

1. Quello che deve succedere qui è che quando un utente esegue l'azione richiesta, dovrebbe essere inviato un evento di attivazione manuale. L'esperimento sarà attivato a seguito di questo evento.
2. Un evento di attivazione dovrebbe essere attivato quando l'utente rimuove il prodotto premium dal carrello, disattivando l'esperimento.
3. L'esperimento deve essere riattivato per mostrare il prodotto premium se il consumatore lo aggiunge di nuovo.

Mostra lo slogan sotto l'invito all'azione "Acquista ora".

Se desideri visualizzare uno slogan univoco sotto un pulsante CTA "Compra ora", puoi attivare l'esperimento se spingi un evento di attivazione sulla modifica della cronologia.

Questo perché la pagina contenente il pulsante CTA "Acquista ora" non verrà caricata all'inizio.

Come Convert ha aggirato il problema dei test sulle SPA

Gli esperimenti sulle SPA devono essere gestiti in modo diverso rispetto ad altri esperimenti. Poiché lo script Convert non è in grado di leggere l'URL in cui sta navigando un visitatore del sito Web, non può avviare esperimenti con metodi standard.

Quindi ecco come si fa invece.

Inizia installando il codice di monitoraggio Converti come descritto in questo articolo.

Quindi, applica uno dei 3 metodi seguenti:

1. Attivazione del polling

Come accennato, il polling è il processo mediante il quale le condizioni dell'esperienza vengono testate per determinare se tale esperienza deve essere attivata.

Ciò include il monitoraggio dell'URL del visitatore, delle condizioni del pubblico o delle condizioni JavaScript per eseguire il test.

Il polling viene solitamente attivato da Converti quando viene caricata una nuova pagina. Nelle SPA, in genere, non vengono caricate nuove pagine nell'app Web.

In tal caso, per avviare il polling è necessario il seguente codice:

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

Dovresti determinare quale sarebbe l'evento migliore sulla tua SPA per attivare il codice sopra. Codice di esempio da aggiungere in Impostazioni progetto > sezione JavaScript del progetto globale.

 console.log('SPA/Converti codice nel progetto globale Javascript eseguito');
se (!window.globalExecutedTs) {
window.globalExecutedTs = vero;
var oldPushState = window.history.pushState;
window.history.pushState = funzione(dati) {
Tentativo {
setTimeout(funzione() {
restituisce oldPushState.apply(questo, argomenti);
console.log('conversione attivata da pushstate');
finestra._conv_q = _conv_q || [];
window._conv_q.push(["esegui", "true"]);
}, 0);
} cattura (e) {
console.log(e);
}
};
window.onpopstate = funzione(evento) {
setTimeout(funzione() {
console.log('converti attivato da popstate');
finestra._conv_q = _conv_q || [];
window._conv_q.push(["esegui", "true"]);
}, 0);
};
}

2. Usa le condizioni JavaScript nell'area del sito

Poiché lo script Converti non è in grado di leggere le modifiche agli URL in una SPA, è necessario utilizzare una condizione JavaScript anziché una condizione di corrispondenza URL per attivare un esperimento.

Trova una spiegazione approfondita di come farlo nel seguente articolo.

3. Attiva manualmente un esperimento

Puoi attivare gli esperimenti manualmente dopo aver determinato che si è verificato un determinato flusso. Utilizzando questo metodo, l'area del sito e le condizioni del pubblico verranno comunque verificate dopo l'attivazione del polling con il codice. Consulta questo articolo per informazioni più dettagliate sull'attivazione manuale di un esperimento.

Con i 3 metodi sopra, dovresti essere in grado di attivare gli esperimenti al momento giusto in un'app SPA.

Convert aumenta il rischio di sfarfallio sulle SPA?

Risposta breve, no.

Tutti i framework SPA sono compatibili con la tecnologia anti-sfarfallio di Convert. Convert sfrutta la tecnologia SmartInsert ^TM dietro le quinte per garantire che le modifiche dell'esperimento vengano applicate o riapplicate al momento opportuno sulla tua SPA, anche durante il ricaricamento dinamico delle pagine.

Ti consigliamo di leggere il nostro whitepaper sull'effetto sfarfallio per saperne di più e perché dovresti evitarlo a tutti i costi.

Problemi comuni durante il test A/B su siti di applicazioni a pagina singola

Come puoi vedere, ci sono alcune cose da tenere a mente quando si eseguono test sui siti SPA. Dopo aver trattato il framework utilizzato, il metodo di test dello strumento e l'evento trigger, il problema principale è in genere con l'elemento di test che non si ricarica quando una nuova pagina o vista viene visualizzata sul browser.

Ciò può essere causato da alcune cose:

1. Le modifiche al test che appaiono nella visualizzazione della prima pagina ma non in quelle successive

A volte la modifica che intendi visualizzare viene visualizzata solo nella prima pagina che carichi sul browser, ma non nelle visualizzazioni successive. Questo perché la parte dello script Convert che valuta gli esperimenti e li attiva non viene eseguita quando si accede a una nuova vista o “pagina” del sito.

2. Le modifiche che appaiono nell'editor visivo non vengono visualizzate durante l'anteprima al di fuori di esso

A volte può accadere che le modifiche apportate con l'editor visivo non vengano visualizzate all'esterno dell'anteprima dell'editor.

La maggior parte dei framework SPA non utilizza l'API DOM e utilizza invece i propri metodi per distribuire le modifiche nella pagina. Ciò fa sì che il DOM non sia sincronizzato quando viene aggiornato dalla SPA. Questo è comune in React e Angular, causando il mancato funzionamento dei selettori CSS presenti nel codice Jquery.

3. Le modifiche continuano ad apparire nelle "visualizzazioni" successive

In questo scenario, una modifica all'esperimento viene visualizzata nella visualizzazione (pagina) corretta. Tuttavia, quando si visitano nuove (pagine) visualizzazioni, il cambiamento non scompare. Ciò accade perché in un sito SPA le modifiche non vengono rimosse quando si ricarica una nuova pagina.

Lo script Convert rimuove il codice aggiunto quando le condizioni dell'esperimento non corrispondono alla vista successiva in cui sono state distribuite le modifiche quando viene chiamato il polling. Tuttavia, questo non è sufficiente in quanto le modifiche a jquery non scompariranno nemmeno rimuovendo il codice dell'esperimento dalla pagina.

Sarà necessario eseguire il codice che ripristina le modifiche apportate dall'esperimento.

Il tuo turno: evita questi errori quando ottimizzi la tua SPA

A causa dei progressi nel modo in cui le informazioni vengono elaborate e fornite, le SPA possono diventare più comunemente accettate, ma è fondamentale notare che questa nuova tecnologia presenta problemi quando si integra con piattaforme di ottimizzazione e sperimentazione, che normalmente funzionano con configurazioni più classiche.

Ci auguriamo che questo articolo abbia trattato i vari componenti delle SPA e alcune soluzioni per superare questi ostacoli nella tua ricerca per offrire ai visitatori esperienze digitali più rapide, intuitive e personalizzate.

Tuttavia, sarà meglio lavorare con un provider di soluzioni in grado di fornire un supporto senza interruzioni per le SPA, ad esempio la possibilità di rilevare le modifiche nei componenti dell'interfaccia utente e nei tipi di pagina per la personalizzazione dinamica senza modificare il codice sorgente. Come quello nel riquadro sottostante.