Come eseguire Test A/B con Next.js

Realizzare una campagna di marketing di successo è un sfida e trovare l'approccio più efficace richiede tempo. Dopo tutto, è improbabile che un progetto di marketing raggiunga tutti gli obiettivi al primo colpo. Per questo motivo sono state sviluppate diverse tecniche per testare contemporaneamente idee e approcci diversi, con l'obiettivo di raccogliere dati per determinare quale sia la soluzione migliore. Questo processo viene detto “A/B testing”.

Seguendo questo tutorial ottenerrai il risultato presentato a questo link.

Un test A/B, noto anche come split-run test o bucket test, è un metodo di confronto tra due o più versioni di una pagina web, di un'applicazione o di un'interfaccia utente, per capire quale permetta di ottenere un risultato migliore.

In altri termini, i test A/B sono esperimenti randomizzati in cui due o più varianti di una pagina vengono mostrate a diversi visitatori nello stesso momento per raccogliere dati. Questi dati vengono poi analizzati con un approccio statistico per determinare quale versione porta a risultati migliori rispetto a un determinato obiettivo di marketing o in termini di specifiche metriche aziendali.

I test A/B possono essere applicati a qualunque pagina di un sito web e svolgono un ruolo chiave per aumentare i tassi di conversione. L'ottimizzazione di una campagna di marketing tramite test A/B consente infatti di portare il tuo sito web al suo massimo potenziale. Gli elementi da fare variare in un test A/B comprendono tutto ciò che può influenzare il comportamento dei visitatori e condurli ai tuoi obiettivi di marketing. Esempi di questi aspetti sono i titoli, il design o layout del sito, i colori, le immagini e i testi.

Non dovresti esagerare nei test A/B. Mantienili semplici e modifica solo un numero limitato di variabili alla volta. Inoltre, non dimenticare che puoi sempre eseguire più test A/B contemporaneamente, soprattutto se il tuo sito web comprende molte pagine.

Cerchiamo ora di capire come funzionano i test A/B nella pratica.

Un test A/B è semplice. Supponiamo che tu voglia applicarlo a una landing page. Tutto ciò che devi fare per eseguire un test A/B è prendere la tua landing page attuale e modificarla per produrne una seconda versione. Il cambiamento introdotto nella nuova landing page potrebbe riguardare il layout, l'ordine dei componenti, i colori, un pulsante, alcuni titoli o altri elementi. L'importante è evitare di cambiare troppe cose in una volta sola, soprattutto se la landing page ha già buone prestazioni. Infatti, più si cambia, più diventa difficile capire i risultati dell'esperimento.

Ora, a una percentuale del traffico al tuo sito verrà mostrata la versione originale della landing page, mentre alla parte restante verrà mostrata la versione modificata. La definizione di queste percentuali può dipendere da diversi fattori, ma si può anche optare per un approccio semplificato del tipo 50%/50%.

Quando gli utenti visitano le due o più varianti della vostra landing page che fanno parte dell'esperimento, diversi dati vengono raccolti dietro alle quinte. Questi dati vengono poi utilizzati per produrre metriche che possono essere misurate e analizzate con approcci statistici per determinare se la modifica introdotta ha avuto un effetto positivo, negativo o neutro rispetto agli obiettivi di marketing.

Ci sono diversi motivi per cui dovresti effettuare test A/B, ma concentriamoci sui tre più importanti.

• Ti aiuta a migliorare i tassi di conversione: portare traffico verso un sito web non è facile ed è per questo che dovresti adottare delle tecniche per ottenere il più alto tasso di conversione possibile, che è proprio lo scopo dei test A/B.
• Ti fornisce risultati scientifici: un test A/B implica la raccolta, l'analisi e lo studio di molti dati e metriche. I test A/B producono quindi risultati supportati da analisi statistiche e non da supposizioni.
• Elimina la paura di effettuare modifiche: spesso si ha paura di modificare un sito web per le conseguenze che potrebbe avere, soprattutto quando è online nello stesso formato da anni. I test A/B consentono di studiare l'effetto dei cambiamenti e aiutano a introdurre modifiche a basso rischio.

In questo precedente articolo, hai visto come costruire una landing page in Next.js. Ora, imparerai a estendere quella applicazione demo per introdurre la logica di A/B testing. 

È possibile implementare un test A/B in Nxxt.js senza alcuna dipendenza extra. Ciò significa che l'elenco dei prerequisiti rimane lo stesso dell'applicazione demo della landing page:

• Node.js 12+ e npm 8.0+
• Next.js >= 12.x
• React >= 18.x

Clona la repo GitHub a supporto di questo articolo e testa il test A/B in locale lanciando i seguenti comandi:

Visita poi la pagina "http://localhost:3000" nel browser per vedere la logica di A/B testing in azione sulla landing page.

Altrimenti, segui questo tutorial e impara a implementare deii test A/B in Next.js.

Il modello di landing page che trovate qui è composto da un'intestazione, una sezione “hero”, una CTA, una sezione”su di noi” e un footer. Per eseguire un test A/B, occorre almeno una nuova versione della landing page. Quindi, la prima cosa da fare è definire i seguenti due nuovi componenti:

• "LandingPage1"

• "LandingPage2"

Questi due componenti corrispondono rispettivamente alle due versioni della landing page. Come puoi vedere, la differenza principale è che "LandingPage2" ha un attributo "className" personalizzato. Questo è usato per dare uno stile diverso alla landing page rispetto a "LandingPage1", ovvero landing page originale. Inoltre, le due landing page utilizzano due componenti diversi per la sezione “hero”. In dettaglio, ecco come sono definiti questi due componenti:

• "Hero1"

• "Hero2"

La differenza principale tra questi due componenti è l'immagine utilizzata e il testo dell'headline. Ora avete due landing page da alternare in un A/B test. Scopriamo come.

Il nuovo file "index.js", che rappresenta la home del sito web di demo, sarà ora definito come segue:

Nella funzione "getStaticProps()", "Math.random()" viene utilizzato per generare casualmente il numero 1 o 2. Questo numero viene poi utilizzato per identificare quale pagina di destinazione verrà mostrata all'utente finale. Allo stesso modo, i dati relativi ai servizi da mostrare nella landing page sono recuperati in modo diverso a seconda del numero estratto. Nota che puoi rendere la logica di selezione molto più complessa, coinvolgendo per esempio dei pesi per ottenere delle percentuali di selezione diverse.

Avvia l'applicazione demo costruita per eseguire un test A/B con il seguente comando:

Apri "http://localhost:3000" nel browser e fare clic sul pulsante "Ricarica pagina" nella parte superiore della pagina. Dovresti ottenere casualmente una delle due landing page definite in base al fatto che venga estratto 1 o 2 in "getStaticProps()".

A questo punto, puoi utilizzare Google Analytics, aggiungendo dei parametri UTM (Urchin Tracking Module) ai link CTA o seguendo approcci simili, per iniziare a raccogliere dati dalle landing page e determinare quale sia quella che performa meglio. Scopri di più sulla legalità di Google Analytics in Italia qui.

Et voilà! Hai appena implementato un test A/B in Next.js!

In Cantiere Creativo, ci affidiamo a DatoCMS per ottimizzare e definire campagne di marketing. Se non conosci lo strumento, DatoCMS è headless CMS, ovvero un'applicazione per la gestione dei contenuti priva di frontend. In dettaglio, DatoCMS consente di archiviare, gestire e distribuire contenuti in un unico luogo attraverso delle API. Questo lo rende il CMS headless perfetto per gestire i contenuti in una strategia omnicanale.

Per quanto riguarda i test A/B, un headless CMS come DatoCMS può supportare la tua strategia di marketing in diversi modi. Innanzitutto, DatoCMS consente di creare pagine web modulari in modo facile e veloce. Definire quindi le diverse varianti sulle quali eseguire il test A/B richiede solo qualche minuto e può essere effettuato da chiunque. In secondo luogo, i contenuti offerti da DatoCMS sono recuperati tramite API.

Pertanto, se desideri cambiare il contenuto mostrato in una pagina in modo casuale, è sufficiente cambiare la chiamata all’API in modo casuale. In terzo luogo, tutti i contenuti sono gestiti in un unico luogo. Di conseguenza, l'analisi dei risultati dei test A/B diventa più semplice, soprattutto quando vengono eseguiti su più pagine o siti web.

In questo articolo, hai appreso cos'è un test A/B, come eseguire dei test A/B e perché si dovrebbe prendere in considerazione l'A/B testing per ottimizzare un sito web, un'applicazione o una campagna di marketing. Inoltre, hai imparato come implementare un test A/B in Next.js che coinvolge delle landing page. Come spiegato qui, non è difficile e richiede solo qualche riga di codice. Tuttavia, se volete portare i vostri test A/B al livello successivo, potreste aver bisogno del supporto di un digital partner che utilizza strumenti avanzati come DatoCMS.Grazie per aver seguito il tutorial! Speriamo che questo articolo ti sia stato utile. Sentiti libero di contattarci qui per qualsiasi domanda, commento o suggerimento.