Il tuo primo esperimento con la messaggistica in-app

1. Introduzione

Obiettivi

In questo codelab, strumenterai un esperimento di messaggistica in-app per un'app mobile multipiattaforma di consigli sui ristoranti basata su Flutter e Cloud Firestore.

Al termine, potrai progettare e implementare esperimenti di messaggistica in-app per aumentare in modo efficace il coinvolgimento degli utenti per qualsiasi app per iOS o Android scrivendo una quantità minima di codice.

Cosa imparerai a fare

• Come utilizzare Firebase In-App Messaging (FIAM) in un'app Flutter
• Come personalizzare l'aspetto dei messaggi in-app
• Come progettare un esperimento di messaggistica in-app e implementarlo nella tua app
• Come interpretare i risultati di un esperimento di messaggistica in-app

Messaggistica in-app Firebase

Firebase In-App Messaging (FIAM) ti aiuta a coinvolgere gli utenti che utilizzano attivamente la tua app inviando loro messaggi mirati e contestuali che li spingono a completare azioni chiave in-app, come superare un livello di gioco, acquistare un articolo o abbonarsi a contenuti.

Firebase A/B Testing

Basato su Google Optimize, Firebase A/B Testing (ABT) ti aiuta a ottimizzare l'esperienza della tua app, rendendo più semplice l'esecuzione, l'analisi e la scalabilità degli esperimenti di marketing e sul prodotto. Ti offre la possibilità di testare le modifiche alla UI, alle funzionalità o alle campagne di coinvolgimento della tua app per vedere se sono davvero efficaci per le metriche chiave (come le entrate e la fidelizzazione) prima di renderle disponibili a tutti.

Cosa serve

Se non hai molta familiarità con Flutter o Firestore, completa prima il codelab Firebase per Flutter:

Puoi eseguire questo codelab utilizzando uno dei seguenti dispositivi:

• Un dispositivo fisico (Android o iOS) collegato al computer e impostato sulla modalità sviluppatore.
• Il simulatore iOS. (richiede l'installazione degli strumenti Xcode).
• L'emulatore Android. (Richiede la configurazione in Android Studio).

Oltre a quanto sopra, avrai bisogno anche di:

• Un browser a tua scelta, ad esempio Chrome.
• Un IDE o un editor di testo a tua scelta, ad esempio Android Studio o VS Code configurato con i plug-in Dart e Flutter. VS Code è consigliato per l'utilizzo con Flutter.
• L'ultima versione stabile di Flutter (o beta, se ti piace vivere al limite).
• Un Account Google, ad esempio un account Gmail, per creare e gestire il tuo progetto Firebase.
• Il codice campione del codelab. Consulta il passaggio successivo per scoprire come ottenere il codice.

2. Configurazione

Ottieni il codice

Clona il repository GitHub dalla riga di comando:

git clone https://github.com/FirebaseExtended/codelab-friendlyeats-flutter.git friendlyeats-flutter

Il codice di esempio verrà clonato nella directory friendlyeats-flutter. D'ora in poi, assicurati di eseguire i comandi da questa directory:

cd friendlyeats-flutter

Quindi passa alla directory del codelab ed estrai il ramo fiam-abt:

git checkout fiam-abt

Questo ramo contiene tutto il codice necessario per questo codelab, inclusa una versione completata nella cartella done. Gli altri rami di questo repository contengono il codice per la creazione dell'app FriendlyEats, come mostrato nel codelab Flutter Firestore multipiattaforma. Ai fini di questo codelab, abbiamo rimosso l'integrazione web in questo ramo.

Importa l'app iniziale

Apri o importa la directory codelab-fiam-abt nell'IDE che preferisci. Questa directory contiene il codice iniziale del codelab, che consiste in un'app di consigli di ristoranti. In questo codelab, strumenterai un esperimento di messaggistica in-app per gli utenti di questa app.

Crea un progetto Firebase

1. Accedi alla console Firebase utilizzando il tuo Account Google.
2. Fai clic sul pulsante per creare un nuovo progetto, quindi inserisci un nome per il progetto (ad esempio FriendlyEats).
   
3. Fai clic su Continua.
4. Se richiesto, leggi e accetta i termini di Firebase, quindi fai clic su Continua.
5. (Facoltativo) Attiva l'assistenza AI nella console Firebase (denominata "Gemini in Firebase").
6. Per questo codelab, hai bisogno di Google Analytics per utilizzare in modo ottimale i prodotti Firebase, quindi mantieni l'opzione attiva per Google Analytics. Segui le istruzioni sullo schermo per configurare Google Analytics.
7. Fai clic su Crea progetto, attendi il provisioning del progetto, poi fai clic su Continua.

Complimenti! Hai appena creato il tuo primo progetto Firebase.

Poi, vedrai come configurare e attivare i servizi necessari utilizzando la console Firebase.

Abilita l'autenticazione anonima

Sebbene l'autenticazione non sia l'obiettivo di questo codelab, è importante che la tua app disponga di una qualche forma di autenticazione. Utilizzerai l'accesso anonimo, il che significa che l'utente accede automaticamente senza che gli venga richiesto.

Per attivare l'accesso anonimo:

1. Nella console Firebase, individua Autenticazione nella barra di navigazione a sinistra.
2. Fai clic su Autenticazione, poi su Inizia e seleziona la scheda Metodo di accesso (o vai direttamente alla console Firebase).
3. Attiva il fornitore di accesso Anonimo e fai clic su Salva.

L'attivazione dell'accesso anonimo consente all'applicazione di accedere automaticamente per conto degli utenti quando accedono all'app. Per saperne di più, consulta la documentazione sull'autenticazione anonima per Android e iOS.

Configura Cloud Firestore

L'app utilizza Cloud Firestore per salvare e ricevere informazioni e valutazioni dei ristoranti.

Ecco come configurare Cloud Firestore nel tuo progetto Firebase:

1. Nel riquadro a sinistra della console Firebase, espandi Build e seleziona Database Firestore.
2. Fai clic su Crea database.
3. Lascia l'ID database impostato su (default).
4. Seleziona una posizione per il database, poi fai clic su Avanti.
   Per un'app reale, devi scegliere una posizione vicina ai tuoi utenti.
5. Fai clic su Avvia in modalità di test. Leggi l'esclusione di responsabilità relativa alle regole di sicurezza.
   Più avanti in questo codelab, aggiungerai regole di sicurezza per proteggere i tuoi dati. Non distribuire o esporre pubblicamente un'app senza aggiungere regole di sicurezza per il tuo database.
6. Fai clic su Crea.

3. Configurazione Firebase specifica per il mobile

La maggior parte delle modifiche al codice necessarie per attivare il supporto di Firebase è già stata eseguita nel progetto su cui stai lavorando. Tuttavia, per aggiungere il supporto per le piattaforme mobile, devi:

• Registra la piattaforma che preferisci nel progetto Firebase
• Scarica il file di configurazione specifico della piattaforma e aggiungilo al codice.

Nella directory di primo livello della tua app Flutter, sono presenti sottodirectory denominate ios e android. Queste directory contengono i file di configurazione specifici della piattaforma per iOS e Android, rispettivamente.

Configura iOS

Nella console Firebase, seleziona Impostazioni progetto nella parte superiore della barra di navigazione a sinistra e fai clic sul pulsante iOS nella sezione Le tue app della pagina Generali.

Dovresti visualizzare la seguente finestra di dialogo:

1. Il valore importante da fornire è l'ID bundle iOS. Per ottenere l'ID bundle, esegui i tre passaggi successivi.

2. Nello strumento a riga di comando, vai alla directory di primo livello dell'app Flutter.
3. Esegui il comando open ios/Runner.xcworkspace per aprire Xcode.

4. In Xcode, fai clic su Runner di primo livello nel riquadro a sinistra per visualizzare la scheda Generale nel riquadro a destra, come mostrato. Copia il valore di Bundle Identifier (Identificatore bundle).

5. Torna alla finestra di dialogo Firebase, incolla l'identificatore bundle copiato nel campo ID pacchetto iOS e fai clic su Registra app.

6. Continuando in Firebase, segui le istruzioni per scaricare il file di configurazione GoogleService-Info.plist.
7. Torna a Xcode. Tieni presente che Runner ha una sottocartella chiamata anch'essa Runner (mostrata nell'immagine precedente).
8. Trascina il file GoogleService-Info.plist (che hai appena scaricato) nella sottocartella Runner.
9. Nella finestra di dialogo visualizzata in Xcode, fai clic su Fine.
10. Torna alla Console Firebase. Nel passaggio di configurazione, fai clic su Avanti, salta i passaggi rimanenti e torna alla pagina principale della console Firebase.

Hai completato la configurazione dell'app Flutter per iOS.

Configurare Android

1. Nella console Firebase, seleziona Impostazioni progetto nella parte superiore della barra di navigazione a sinistra e fai clic sul pulsante Android in Le tue app nella pagina Generali.

Dovresti visualizzare la seguente finestra di dialogo :

2. Il valore importante da fornire è il nome del pacchetto Android. Ottieni il nome del pacchetto quando esegui i due passaggi seguenti:

3. Nella directory dell'app Flutter, apri il file android/app/src/main/AndroidManifest.xml.
4. Nell'elemento manifest, trova il valore della stringa dell'attributo package. Questo valore è il nome del pacchetto Android (ad esempio com.yourcompany.yourproject). Copia questo valore.
5. Nella finestra di dialogo Firebase, incolla il nome del pacchetto copiato nel campo Nome pacchetto Android.
6. Per questo codelab non è necessario il certificato SHA-1 per la firma di debug. Lascia vuoto questo campo.
7. Fai clic su Registra app.
8. Continuando in Firebase, segui le istruzioni per scaricare il file di configurazione google-services.json.
9. Vai alla directory dell'app Flutter e sposta il file google-services.json (che hai appena scaricato) nella directory android/app.
10. Nella console Firebase, salta i passaggi rimanenti e torna alla pagina principale della console.
11. Tutta la configurazione di Gradle è già stata archiviata. Se l'app è ancora in esecuzione, chiudila e ricompila per consentire a Gradle di installare le dipendenze.

Hai completato la configurazione dell'app Flutter per Android.

4. Esegui l'app localmente

Ora puoi iniziare a lavorare alla tua app. Innanzitutto, esegui l'app localmente. Ora puoi eseguire l'app in qualsiasi piattaforma che hai configurato (e per la quale hai a disposizione un dispositivo ed emulatore).

Scopri quali dispositivi sono disponibili con il seguente comando:

flutter devices

A seconda dei dispositivi disponibili, l'output del comando precedente è simile al seguente:

Ora esegui l'app localmente con il comando seguente:

flutter run

Ora dovresti vedere la tua copia di FriendlyEats, collegata al tuo progetto Firebase.

L'app si connette automaticamente al tuo progetto Firebase e ti consente di accedere in modalità invisibile come utente anonimo.

5. Crea e testa il tuo primo messaggio

Integrare la messaggistica in-app Firebase nella tua app

L'integrazione di base della messaggistica in-app è completamente priva di codice. Devi solo aggiungere la dipendenza e il gioco è fatto. Aggiungi la seguente dipendenza al file pubspec.yaml

dependencies:
  # ...
  firebase_in_app_messaging: ^0.4.0
  # ...

Scrivere un messaggio nella console Firebase

Ora che hai aggiunto FIAM alla tua app, componiamo un messaggio che verrà attivato alla prima apertura dell'app.

Per comporre il tuo primo messaggio:

1. Nella sezione Coinvolgimento della console Firebase, fai clic su Messaggistica in-app.
2. Fai clic su Crea la tua prima campagna nel riquadro Messaggistica in-app.

Componiamo un messaggio modale di base per assicurarci che l'integrazione funzioni. Puoi personalizzare il messaggio come preferisci: puoi aggiungere immagini, pulsanti o cambiare i colori.

Assicurati di scegliere come target l'app che vuoi testare. A seconda del percorso di integrazione che segui, potresti avere iOS, Android o entrambi.

Vogliamo assicurarci che il messaggio venga attivato all'apertura dell'app, quindi la configurazione di pianificazione predefinita funzionerà.

Una volta completata la pianificazione, possiamo pubblicare il messaggio. Fai clic su "Rivedi" e dovresti visualizzare un messaggio simile al seguente

Visualizzare il messaggio nell'app

Ora disinstalla e reinstalla l'app e dovresti visualizzare il messaggio che hai creato all'apertura. Congratulazioni, hai appena inviato il tuo primo messaggio in-app. Nel passaggio successivo, imparerai ad aggiungere un evento Analytics per attivare un messaggio in-app in base alle azioni intraprese dagli utenti nell'app.

6. Integrare Firebase Analytics per l'attivazione avanzata dei messaggi

Integra Firebase Analytics nella tua app

Per capire come gli utenti interagiscono con la nostra app e attivare un messaggio in-app in base alle loro azioni, ora aggiungeremo un evento Analytics quando un utente fa clic su un ristorante.

1. Aggiungi la dipendenza Firebase Analytics a Flutter in pubspec.yaml

dependencies:
  # ...
  firebase_analytics: ^1.0.1
  # ...

2. Importa Analytics in home_page.dart

import 'package:firebase_analytics/firebase_analytics.dart';

3. Aggiungi un'istanza di Firebase Analytics alla classe HomePage in home_page.dart

class HomePage extends StatefulWidget {
  static const route = '/';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  HomePage({Key key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

4. Attiva un evento Analytics quando l'utente fa clic sulla scheda di un ristorante in home_page.dart

onRestaurantPressed: (id) async {
  await HomePage.analytics.logEvent(name: 'click_restaurant');
  Navigator.pushNamed(context,
                      RestaurantPage.route,
                      arguments: RestaurantPageArguments(id: id));
})

Modificare il messaggio in modo che venga attivato in base all'evento Analytics

Ora che abbiamo un evento "click_restaurant", attiviamo il nostro messaggio in-app in base a questo evento anziché a quando l'utente apre l'app.

Nella console Firebase, torna a Messaggi in-app e modifica la campagna esistente.

Ora modifica la sezione di pianificazione per attivare il messaggio dal nuovo evento.

Da qui possiamo pubblicare le modifiche facendo clic sul pulsante "Rivedi".

Testare l'attivatore nell'app

A questo punto dovresti essere in grado di eseguire l'app con

flutter run

Quando fai clic su un ristorante, dovresti visualizzare il messaggio in-app.

7. Creare una campagna FIAM+ABT

Iniziare con un obiettivo

La nostra app Friendlyeats ha già un ottimo aspetto, ma per essere utile abbiamo bisogno di alcune recensioni. Queste recensioni provengono dagli utenti di Friendlyeats, quindi dobbiamo trovare un modo per incoraggiarli a lasciare recensioni.

Innanzitutto, definiamo l'evento di conversione

Poiché vogliamo vedere se gli utenti recensiscono i ristoranti, aggiungiamo un evento Analytics per misurare questo comportamento.

1. Importa Firebase Analytics come prima e aggiungi un'istanza di Analytics a RestaurantPage in restaurant_page.dart

class RestaurantPage extends StatefulWidget {
  static const route = '/restaurant';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  final String _restaurantId;
  RestaurantPage({Key key, @required String restaurantId})
      : _restaurantId = restaurantId,
        super(key: key);
  @override
  _RestaurantPageState createState() =>
      _RestaurantPageState(restaurantId: _restaurantId);
}

2. Ora attiviamo un evento in _onCreateReviewPressed quando salviamo una recensione in restaurant_page.dart

 if (newReview != null) {
   // Log successful review
   await RestaurantPage.analytics.logEvent(name: 'review_success');
   // Save the review
   return data.addReview(restaurantId: _restaurant.id, review: newReview);
 }

Configurare il test A/B nella console Firebase

Ora che sappiamo come creare campagne di messaggistica in-app, è il momento di valutare il tipo di comportamento che vorremmo incoraggiare nella nostra app tramite queste campagne. Per FriendlyEats, vorremmo che più persone lasciassero recensioni, in modo da rendere l'app più utile. Esistono diversi modi per incoraggiare questa pratica utilizzando i messaggi in-app. Un modo è tramite un semplice messaggio in-app che comunica all'utente di lasciare una recensione del ristorante per contribuire a migliorare l'app FriendlyEats. Un altro modo è utilizzare un messaggio in-app per offrire un incentivo per la recensione, ad esempio un coupon o un codice sconto per un determinato ristorante.

Entrambi gli approcci potrebbero aumentare la frequenza con cui gli utenti forniscono recensioni per i ristoranti su FriendlyEats e sembra che fornire un coupon potrebbe avere un impatto ancora maggiore in questo caso. Ma quanto è più probabile che gli utenti scrivano una recensione se fornisci questo coupon? Vale la pena acquistare il coupon? Per determinarlo, eseguiremo un esperimento di messaggistica in-app. Possiamo utilizzare Firebase A/B Testing per mostrare in modo casuale uno dei nostri messaggi in-app agli utenti e misurare l'effetto sul comportamento degli utenti, un po' come una sperimentazione clinica. La cosa migliore è che puoi farlo completamente tramite la console Firebase, senza bisogno di codice.

Per comporre il tuo primo esperimento di messaggistica in-app:

1. Nella sezione Coinvolgimento della console Firebase, fai clic su A/B Testing.
2. Fai clic su Crea esperimento e seleziona l'opzione per eseguire un esperimento con la messaggistica in-app. Verrà visualizzato il compositore di esperimenti mostrato di seguito.

Assegna un nome e, facoltativamente, una descrizione all'esperimento.

4. Il passaggio successivo consiste nel comporre i diversi messaggi in-app che invierai agli utenti nell'esperimento. Il primo messaggio in-app che comporremo è il "valore di riferimento", ovvero il gruppo di controllo del nostro esperimento. Possiamo creare un semplice messaggio "Lascia una recensione":

5. Ora che abbiamo una base di riferimento, componiamo una variante, ovvero il messaggio in-app che offre agli utenti un codice coupon per incoraggiarli a lasciare una recensione. Questo non è completamente visibile nell'anteprima qui sotto, ma il titolo del messaggio è "Prendi un coupon, lascia una recensione!" e il corpo del messaggio è "La prossima volta che vai al Burrito Cafe, utilizza il codice coupon FRIENDLYEATS-15 al momento del pagamento per ottenere il 15% di sconto sul tuo ordine. E non dimenticare di lasciare una recensione dopo!" Ci auguriamo che questo possa invogliare alcuni utenti a visitare il Burrito Cafe.

Nel passaggio successivo, selezioneremo la nostra app e imposteremo l'esposizione. Si tratta della percentuale di utenti idonei (quelli che soddisfano le condizioni di targeting/attivazione) che vedranno uno dei messaggi dell'esperimento. Per questo esempio, possiamo impostare questo valore su 100%, in quanto vogliamo che tutti gli utenti vedano la variante di base o quella del coupon. Se vuoi avere un gruppo di controllo a cui non viene mostrato alcun messaggio in-app, puoi ridurre questa percentuale di esposizione.

7. Successivamente, definirai alcuni obiettivi per l'esperimento. Questo è il risultato dell'esperimento che vogliamo misurare. Imposteremo questo valore come evento di analisi review_successdefinito nella sezione precedente, in quanto vogliamo vedere l'impatto dei nostri diversi messaggi in-app sugli utenti che lasciano recensioni di ristoranti.
8. Per la pianificazione, faremo in modo che la campagna inizi immediatamente e imposteremo click_restaurant come condizione di attivazione, in modo che gli utenti vedano uno dei due messaggi in-app quando fanno clic su un ristorante.

9. Ora non ti resta che rivedere l'esperimento e fare clic su Avvia esperimento. A questo punto, possiamo sederci e aspettare che arrivino i dati del nostro esperimento.

Controlla la raccolta dei dati in tempo reale

Ora che abbiamo iniziato l'esperimento, gli utenti di FriendlyEats vedranno in modo casuale uno dei due messaggi in-app che abbiamo composto quando fanno clic su un ristorante: il messaggio di base o il messaggio della variante. In questo modo, gli utenti verranno suddivisi in due gruppi, in base al messaggio visualizzato. A questo punto, possiamo esaminare la console Firebase (di nuovo nella sezione A/B Testing) per confrontare i dati di analisi in tempo reale di entrambi i gruppi. Ci vorrà un po' di tempo prima che i dati vengano visualizzati, poiché dobbiamo attendere che gli utenti vedano i messaggi in-app e agiscano di conseguenza. Ecco come potrebbero apparire i risultati dopo aver raccolto un volume sufficiente di dati:

In questo caso, la variante ha migliorato significativamente la baseline, quindi potremmo scegliere di selezionare Distribuisci variante, che distribuirebbe il messaggio in-app con il coupon a tutti gli utenti.

8. Complimenti

Congratulazioni, hai creato ed eseguito correttamente il tuo primo esperimento di messaggistica in-app. Ora puoi eseguire un esperimento nella tua app e utilizzare i risultati per rendere più efficaci le campagne di messaggistica in-app.

Passaggi successivi

Dai un'occhiata ad alcuni di questi codelab…

• Firestore multipiattaforma per Flutter
• Aggiungere un esperimento Firebase Remote Config a un'app per Android

Further reading

Abbiamo appena scalfito la superficie di ciò che si può fare con la messaggistica in-app Firebase e Firebase A/B Testing. Per saperne di più, consulta questi articoli:

• Creare esperimenti di messaggistica con i test A/B
• Creare esperimenti Remote Config con A/B Testing
• Esplora i casi d'uso della messaggistica in-app Firebase
• Personalizzare i messaggi di Firebase In-App Messaging

Documenti di riferimento

• Creare esperimenti di messaggistica in-app con il test A/B