Graphic designer: “So far we built up our UX to be highly interactive, We focused on put here a fantastic name for a simple stuff making it beautiful, responsive and attractive.”
Me who lost 4 hours implementing it and saw how users use it: “So why nobody understands it?”
Non so se hai mai avuto una conversazione del genere, ma le reazioni immediate successive sono tipo ⚡🎯💣💥 e all'improvviso spunta qualcuno che dice di aver progettato anche una versione alternativa, scartata per qualche motivo. Implementare più versioni di qualcosa costa, ma se qualcosa non funziona come previsto può costare più della seconda implementazione.
Per un progetto IT, il modo migliore per capire come e se qualcosa funziona è definire dei KPI: per chi ne sente parlare per la prima volta, KPI sta per Key Performance Indicator e rappresenta una metrica che vuoi monitorare per verificare le prestazioni di elementi specifici (per esempio, dopo un'affiliazione di marketing potresti voler tracciare l'aumento delle vendite in un certo intervallo di tempo). Per i componenti grafici, i KPI possono essere impostati su sottocomponenti specifici come pulsanti, sottocomponenti cliccabili o su cui è possibile mettere il focus, ma misurano soltanto le interazioni che puoi confrontare con il numero di visite totali; se hai più implementazioni per lo stesso componente e vuoi verificare quale rende meglio, devi usare gli A/B Test.
Gli A/B Test sono un tipo di test in cui dividi letteralmente il tuo pubblico proponendogli una versione diversa dei tuoi contenuti: se hai due implementazioni per una view, con gli A/B Test puoi proporre la versione A al 50% del tuo pubblico e la versione B all'altro 50%, poi misurare i tuoi KPI per ciascuna versione ed ecco la versione vincente! (oppure un pareggio, in situazioni molto rare.)
Setup
Nella maggior parte dei casi non hai bisogno di scrivere il tuo motore di a/b testing: puoi affidarti a uno già esistente, configurarlo e concentrarti sull'implementazione della tua business logic. Per le applicazioni Laravel, il package ben182/laravel-ab ti mette in pista in pochi minuti, lo trovi su Github. L'installazione è un processo immediato tramite composer composer require ben182/laravel-ab e sei pronto a partire.
Installazione del package A/B Test
Nota bene che questo non significa che non puoi scrivere il tuo codice personale di a/b testing: se vuoi creare un funnel personalizzato con molte sfaccettature e questo package non soddisfa le tue ambizioni, puoi sempre implementare la tua soluzione su misura!
Dopo che il package è installato correttamente, dobbiamo solo pubblicare la configurazione ed eseguire la migrazione!
php artisan vendor:publish --provider="Ben182\AbTesting\AbTestingServiceProvider"Questo pubblicherà il file di configurazione config/ab-testing.php da mettere a punto in seguito. Dopodiché ti basta un php artisan migrate e verranno create le due tabelle previste:
Migrating: 2019_02_02_200315_create_experiments_table
Migrated: 2019_02_02_200315_create_experiments_table (0.01 seconds)
Migrating: 2019_02_02_213123_create_goals_table
Migrated: 2019_02_02_213123_create_goals_table (0.01 seconds)Primo test: A o B?
Restiamo semplici: vuoi testare un testo e lo stile di un pulsante nel tuo percorso index. Per essere creativi, possiamo chiamare i nostri test: blue-button e purple-button. Per avviare questi test, apri il file di configurazione e aggiungi i nomi dei tuoi test all'array degli experiments:
return [
'experiments' => [
'blue-button',
'purple-button',
],
// ...
];Ora concentrati solo sui contenuti, ma come? Per la parte della view c'è l'utility @ab che ti permette di alternare tra i test.
@ab('blue-button')
<div class="title m-b-md">
This is the blue button test.
</div>
<a href="{!! url('/specialPage') !!}" class="blue-button">
Blue test
</a>
@elseab('purple-button')
<div class="title m-b-md">
This is the purple button test.
</div>
<a href="{!! url('/specialPage') !!}" class="purple-button">
Purple test
</a>
@endabEd è tutto qui, è davvero semplice e puoi usarla ovunque nel tuo file blade. In questo modo, come puoi vedere qui sotto, vedrai un contenuto diverso a seconda di quando apri la pagina: la distribuzione degli utenti tra gli experiment è equamente ripartita.
A or B?
Eseguendo il comando php artisan ab:report puoi vedere quanti utenti sono atterrati su ciascun experiment.
$ php-fpm php artisan ab:report
+---------------+----------+
| Experiment | Visitors |
+---------------+----------+
| blue-button | 1 |
| purple-button | 1 |
+---------------+----------+Se vuoi guardare da vicino come funziona l'utility @ab, è letteralmente solo un if
@if (AbTesting::isExperiment('your-experiment-name'))Quell'utility è implementata nel service provider e puoi anche approfondire il codice sorgente del plugin sul suo Github.
Iniziare a misurare
Lo scopo dell'a/b test, in generale, è misurare quale tra le diverse view può portare a una conversion migliore.
Per iniziare a misurare le conversion, impostiamo dei goal nel nostro file di configurazione. Un goal semplice può essere la visita degli utenti tramite il nostro pulsante.
'goals' => [
'page-visited'
],Il comando php artisan ab:report ti permetterà di vedere quante conversion hai raggiunto tramite ciascun experiment.
$ php-fpm php artisan ab:report
+---------------+----------+-------------------+
| Experiment | Visitors | Goal page-visited |
+---------------+----------+-------------------+
| blue-button | 1 | 0 (0%) |
| purple-button | 1 | 0 (0%) |
+---------------+----------+-------------------+Per tracciare una conversion, in base alle tue condizioni, ti basta aggiungere
AbTesting::completeGoal('your-goal-name');In questo caso specifico, il goal viene completato quando il pulsante viene cliccato e la pagina viene caricata. Il codice della pagina sarà davvero semplice, si limiterà a innescare il completamento del goal:
AbTesting::completeGoal('page-visited');
return view('completed');
Esempio di goal per A/B Testing
Per controllare le statistiche dei goal raggiunti, puoi eseguire di nuovo php artisan ab:report.
+---------------+----------+-------------------+
| Experiment | Visitors | Goal page-visited |
+---------------+----------+-------------------+
| blue-button | 1 | 0 (0%) |
| purple-button | 1 | 1 (100%) |
+---------------+----------+-------------------+Ed è tutto qui, usa questo strumento per misurare e migliorare i tuoi progetti, una statistica alla volta!
Resta sintonizzato per altre Strategie Data-Driven e, se ti va, prenditi un momento ️️per lasciare un commento su come prendi decisioni data-driven supportate dagli strumenti! ☕️
La struttura del database del package
E se volessi integrare queste statistiche in una pagina personalizzata? Approfondiamo la struttura del database. Il package è composto da due tabelle ab_experiments e ab_goals, con i relativi model Goal ed Experiment.
La struttura della tabella ab_experiments:
+------------+------------------+------+-----+----------------+
| Field | Type | Null | Key | Extra |
+------------+------------------+------+-----+----------------+
| id | int(10) unsigned | NO | PRI | auto_increment |
| name | varchar(255) | NO | UNI | |
| visitors | int(11) | NO | | |
| created_at | timestamp | YES | | |
| updated_at | timestamp | YES | | |
+------------+------------------+------+-----+----------------+La struttura della tabella ab_goals:
+---------------+------------------+------+-----+----------------+
| Field | Type | Null | Key | Extra |
+---------------+------------------+------+-----+----------------+
| id | int(10) unsigned | NO | PRI | auto_increment |
| name | varchar(255) | NO | | |
| hit | int(11) | NO | | |
| experiment_id | int(11) | NO | | |
| created_at | timestamp | YES | | |
| updated_at | timestamp | YES | | |
+---------------+------------------+------+-----+----------------+Puoi importare i relativi model dal loro namespace Ben182\AbTesting\Models.
Usare il model Experiment ti permette di accedere a tutti i dati degli experiment, puoi ottenere i dati dei Goal tramite la proprietà goals (implementata tramite l'hasMany di Laravel).
Usare il model Goal ti permette di accedere a tutti i dati del Goal, puoi accedere direttamente al suo experiment tramite la proprietà experiment (implementata tramite il belongsTo di Laravel).
Quindi, se vuoi ottenere l'experiment del pulsante viola, puoi usare una normale query Eloquent
$purpleExperiment = Experiment::whereName('purple-button')->first();E ottenere i suoi goal semplicemente accedendovi
$purpleExperiments->goalsUsando i model del package, puoi mostrare tutte le statistiche che vuoi nelle tue pagine personalizzate!