Crea test A/B rapidamente con i modelli di blocco di WordPress

Pubblicato: 2021-09-02

Come abbiamo discusso nei post precedenti, con WordPress 5.8 e l'imminente Pattern Directory, i modelli di blocco di WordPress stanno guadagnando slancio. Quello che ci piace di più dei pattern a blocchi è che, dal punto di vista del design, hanno senso come unità singola per aggiungere sezioni diverse su qualsiasi pagina o post.

Ad esempio, per aumentare la tua credibilità e guadagnare la fiducia dei visitatori del tuo sito web, potresti voler includere una sezione in cui evidenzi le caratteristiche principali dei tuoi prodotti, un'altra che includa i loghi dei tuoi clienti, un'altra che includa una o più testimonianze o recensioni del tuo servizio, ecc. E avere un vasto repertorio di modelli tra cui scegliere per il design di ogni sezione è perfetto.

Sezioni della nostra home page — Diverse sezioni della nostra home page.

Anche i pattern, intesi come unità di layout di pagina, sono candidati ideali per i test A/B. Vediamo di seguito come possono aiutarti a creare i tuoi test A/B e quindi a migliorare le conversioni sul tuo sito web.

Migliora la conversione web con i test A/B

La conversione web si riferisce a qualsiasi azione che chiunque visiti il tuo sito web dovrebbe compiere: può visitare una pagina dei dettagli di un prodotto o dei prezzi, iscriversi alla newsletter, contattarci, leggere un articolo, acquistare i miei prodotti, ecc. In questo contesto, il tasso di conversione è il numero di conversioni ottenute in relazione al numero di visite. Cioè, se il tuo sito web ha un totale di 100 visite giornaliere, 2 delle quali finiscono per acquistare un prodotto, il tasso di conversione sul tuo sito web è del 2% .

Lo strumento che ti aiuta a migliorare il tasso di conversione sono i test A/B. Un test A/B consiste, sulla base di un'ipotesi di miglioramento, nel proporre un cambiamento sul web e nel verificare se funziona meglio. Ad esempio, cambia il primo blocco della landing page con un messaggio che genera più curiosità, cambia l'ordine in cui i diversi prodotti vengono visualizzati nella tua pagina dei prezzi, aggiungi una promozione dei tuoi prodotti alla fine dei tuoi post, ecc.

Da un punto di vista tecnico, l'A/B test consiste nel mostrare due o più versioni o varianti della stessa pagina web (può anche essere il menu o il tema, ecc.) a diversi insiemi di visitatori web e confrontare quale variante genera più conversioni.

Un'immagine che illustra come funziona il test A/B: il traffico è suddiviso e ogni segmento vede una variante, quindi controlliamo quale variante ha ottenuto più conversioni — Nella sua forma più semplice, il test A/B propone di dividere casualmente il traffico verso il sito in due gruppi in modo che il 50% dei visitatori veda il design A mentre l'altro 50% vede il design B. Monitorando come reagiscono gli utenti di ciascun gruppo, possiamo calcolare il tasso di conversione di ciascun gruppo e, nel caso ci sia una differenza statisticamente significativa tra i due, dichiarare un design vincente.

Come avrai già osservato negli esempi discussi sopra, in molte occasioni le varianti che crei consistono nell'aggiungere, modificare o eliminare una sezione nella tua pagina testata. Per questo motivo troviamo il concetto di pattern a blocchi particolarmente utile nel processo di creazione Prove A/B.

Creare un Test A/B con modelli

Sebbene tu possa creare un A/B test su un sito WordPress manualmente, il nostro consiglio è di utilizzare uno degli strumenti disponibili sul mercato e, in particolare, se vuoi ottenere il massimo dai pattern di blocco, il miglior strumento per creare A/B test consiste nell'usare Nelio A/B Testing (disponibile gratuitamente e premium (29€/mese)) in quanto è un plugin nativo di WordPress e, quindi, è completamente integrato con l'editor di blocchi di WordPress.

Per creare un Prova A/B con Nelio Test A/B con l'editor di blocchi di WordPress, i passaggi da seguire sono i seguenti:

Seleziona il tipo di test da creare,
Definire le varianti del test,
Definire obiettivi e azioni di conversione,
In alternativa, definisci se desideri applicare la segmentazione,
Esegui il test e analizza i tuoi progressi,
Applicare l'alternativa vincente come finale.

In questa guida spieghiamo tutti i dettagli di ciascuno dei passaggi precedenti per creare Prove A/B con Nelio Test A/B nell'editor di blocchi.

Vediamo con alcuni esempi come i pattern a blocchi possono aiutarci ad essere molto più efficienti nella creazione prove A/B; in particolare, nella definizione delle varianti di prova.

Esempi

Supponiamo tre diversi esempi di test che vogliamo eseguire sul nostro sito web.

Esempio 1 : da un lato, voglio testare un design alternativo sulla nostra pagina Nelio modificando la sezione in cui mostriamo i vantaggi dei nostri servizi.

Sezione della pagina che mostra i vantaggi dei nostri prodotti.

Esempio 2 : Allo stesso modo voglio anche testare un design alternativo della sezione delle testimonianze sulla stessa pagina e vedere quale è più attraente.

Sezione testimonianze della home page di Nelio — Sezione Testimonianze della home page di Nelio.

Esempio 3 : Vorrei verificare se l'aggiunta di una sezione di invito all'azione o di un banner alla fine di tutti i post otterrà più iscritti alla nostra Newsletter. Come puoi vedere alla fine di questo post, attualmente sul nostro blog, alla fine trovi solo la sezione per aggiungere commenti.

Come li creiamo Test A/B? Con uno strumento come Nelio è praticamente facile come cambiare il design di quella pagina con qualche passaggio aggiuntivo. Vediamo quali...

Selezione del tipo di test che desideri creare

Non è la stessa cosa creare un Test A/B di una pagina rispetto a un template. La creazione delle varianti sarà diversa ma il grande vantaggio di utilizzare uno strumento come Nelio A/B Testing, totalmente nativo di WordPress, è che selezionando inizialmente il tipo di test che andrai a creare, i seguenti passaggi saranno totalmente intuitivi nel contesto di WordPress.

Con Nelio A/B Testing, la prima cosa che devi fare è selezionare il tipo di Test A/B che vuoi creare:

Selettore di test in Nelio A/B Testing — Selettore di prova in Nelio A/B Testing.

Dopo aver selezionato il tipo di test, vedrai che la creazione delle varianti di test è esattamente la stessa di quando crei qualsiasi elemento di WordPress.

Negli esempi 1 e 2 sopra, poiché ciò che vogliamo è modificare una sezione di una pagina, sceglieremo di creare un test di pagina. Nell'esempio 3, poiché ciò che vogliamo è l'opzione per aggiungere una sezione alla fine dei post, ciò che ha più senso è creare un modello di test.

Definizione di varianti di prova

Esempio 1 : Dopo aver selezionato che vogliamo eseguire un test di pagina, devi dare un nome al tipo di test e selezionare la pagina, chiamata anche pagina di controllo, dove vuoi eseguire il test. Puoi sceglierlo dall'elenco delle pagine che hai pubblicato sul tuo sito web. Nel nostro caso, è la pagina principale del nostro sito web.

Creazione variante di un test di pagina A/B — Creazione di una variante di una pagina Prova A/B con Nelio Test A/B.

Quindi puoi creare una nuova variante. Per impostazione predefinita, sarà una copia esatta della tua pagina di controllo. Clicca sul link Modifica della variante e vedrai che avrai l'editor di blocchi di WordPress che già conosci per apportare tutte le modifiche che desideri insieme ad alcune proprietà aggiuntive della creazione di un test.

Modifica della variante di un test di pagina — Edizione della variante di una pagina di prova con Nelio Test A/B.

Puoi aggiungere, modificare ed eliminare i blocchi che desideri modificare il design della variante come desideri. Ma qual è il grande vantaggio dei modelli a blocchi? Ora, cambiare ad esempio il design della sezione mostrata nell'immagine è molto più semplice che creare e modificare ciascuno dei blocchi uno per uno. Semplicemente, facendo clic sul pulsante Aggiungi motivi, posso selezionare il design che mi piace di più.

In questo modo, una volta impostato il design con un solo clic, non mi resta che sostituire le immagini con quelle che avevo già nella libreria multimediale e copiare e incollare il testo dell'originale per cambiare l'aspetto di questa sezione.

Sezione ridisegnata utilizzando un motivo.

Esempio 2 : In questo caso, il processo di selezione per il tipo di test sarebbe esattamente lo stesso dell'esempio precedente. Dopo aver selezionato che vogliamo creare un test di pagina, vorremmo aggiungere un nome al test, selezionare la pagina principale e creare una nuova variante.

Nuovo test A/B dalla sezione testimonianze della pagina principale — Nuovo Test A/B dalla sezione testimonianze della pagina principale.

Quando lo modifichiamo, come prima, scopriamo di avere una vasta gamma di design di sezioni di testimonianze tra cui possiamo scegliere.

Selezione di un modello di testimonianza — Selezione di un modello di testimonianze.

E proprio come prima, ora sostituendo le immagini e un semplice copia e incolla del testo, abbiamo cambiato rapidamente il layout di questa sezione.

Sezione Testimonianze visualizzata con le carte.

Esempio 3. Nel nostro ultimo esempio, vogliamo che tutti i post includano una sezione alla fine in cui il lettore è invitato a iscriversi alla nostra newsletter. Per fare ciò, il modo più semplice è stato creare un test del modello e utilizzare una nuova variante del modello che include la sezione desiderata. Nel caso del template test, prima di creare il test, devono essere stati creati i diversi template.

Ricorda che, come ti ho detto spiegando le nuove funzionalità di Full Site Editing in WordPress 5.8, ora puoi creare un nuovo modello o modificare quello esistente nell'editor di modelli da un post o da una pagina. Quindi, puoi creare un nuovo modello e direttamente dall'editor del modello, puoi selezionare e aggiungere un modello simile a quello che abbiamo fatto sopra.

Aggiungi un modello nell'editor dei modelli.

Le modifiche al pattern inserito sono di nuovo molto più veloci che se avessimo creato questa nuova sezione da zero.

Ora possiamo creare il nuovo modello di test. Innanzitutto, selezioniamo che vogliamo creare un test modello e quindi selezioniamo per le varianti A e B quali modelli vogliamo visualizzare.

Selezione dei modelli che compongono il test A/B — Selezione dei template che compongono il Prova A/B.

E il gioco è fatto, abbiamo già creato le versioni di controllo e le relative varianti per ciascuno degli esempi. Da qui in poi, i seguenti passaggi sono gli stessi per i diversi tipi di test.

Definisci i tuoi obiettivi e azioni di conversione

Dopo aver definito le varianti del test, il passaggio successivo consiste nel definire l'obiettivo di conversione. A quale scopo stai creando questo test? Per ottenere più vendite, più iscritti o più visite alla pagina dei prezzi? Questi obiettivi vengono raggiunti quando il visitatore esegue determinate azioni.

Con Nelio A/B Testing, nella sezione "Obiettivi e azioni di conversione", puoi aggiungere tutti gli obiettivi che desideri facendo clic sul collegamento + Nuovo e puoi opzionalmente aggiungere loro un nome. Nelio I test A/B ti mostreranno informazioni sull'efficacia di ciascuna variante per ciascuno degli obiettivi che hai definito.

Definizione degli obiettivi di conversione in un test A/B di contenuti personalizzati con Nelio A/B testing. — Definizione degli obiettivi di conversione in un Prova A/B con Nelio Test A/B.

Per ciascuno degli obiettivi che hai definito, hai diversi tipi di azioni di conversione per monitorare i tuoi visitatori. Ad esempio, puoi monitorare quando accedono a una determinata pagina, quando fanno clic su un determinato elemento del tuo sito Web o quando inviano un modulo di contatto. Clicca sul pulsante azione che ti interessa e per ogni tipo di azione puoi definire le proprie impostazioni.

Segmenta il tuo traffico

Una delle caratteristiche interessanti di qualsiasi strumento di test A/B è che ti consente di segmentare il tuo traffico. Cioè, puoi stabilire che solo alcuni visitatori partecipino a un test. Ad esempio, per paese, ora, lingua, browser, dispositivo, ecc. Se desideri maggiori dettagli su come implementare la segmentazione del traffico con Nelio A/B Testing, in questo articolo Antonio lo spiega nel dettaglio.

Esegui il test creato e analizza i suoi progressi

E il gioco è fatto, ora non devi fare altro che premere il pulsante per avviare un test e analizzarne l'andamento. Nelio A/B Testing si occuperà di dividere il tuo traffico in due gruppi in modo che ciascuno di essi veda una variante o l'altra. Quando si utilizza Nelio A/B Testing, non devi preoccuparti del tempo necessario per eseguire un test o per controllare l'affidabilità statistica dei dati. Potrai vedere il numero totale di conversioni e visualizzazioni di pagina per ciascuna variante. Potrai anche vedere la percentuale di miglioramento di ogni variante rispetto alla versione originale.

Grafici con i rapporti di conversione di ciascuna variante in un test A/B — Tassi di conversione di ciascuna variante in un Prova A/B.

Applica l'alternativa vincente

Infine, se ottieni una variante vincente di un test, Nelio A/B Testing ti consente di applicare quella variante come versione finale sul tuo sito web con un solo clic.

Applicare l'alternativa vincente in un test A/B — Applicare un'alternativa vincente in un Prova A/B.

Ovvero, per i primi due esempi di page test, se la variante che avevamo testato risulta vincente, sostituendo il contenuto originale con quello del vincitore. Nel caso di un template test, semplicemente alla fine del test, devi cambiare il template nelle pagine/post che vuoi.

Conclusione

Il test A/B è lo strumento migliore per ottimizzare la conversione su un sito web. WordPress si sta evolvendo molto rapidamente e con le nuove caratteristiche e funzionalità che sono arrivate in WordPress 5.8, creare test A/B è ancora più semplice se si utilizza uno strumento WordPress nativo completamente integrato con l'editor di blocchi, come nel caso di Nelio A/B Test.

Ricorda che i pattern, progettati per creare e progettare sezioni diverse, facilitano non solo la possibilità di aggiungere e modificare sezioni di pagine e post, ma anche modelli, come hai visto in questo post. Non vedo l'ora di vedere le prossime nuove funzionalità di WordPress!

Immagine in primo piano di Raimond Klavins su Unsplash