Il tuo primo esperimento con la messaggistica in-app

1. Introduzione

Obiettivi

In questo codelab, eseguirai l'instrumentazione di 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.

b284c40acc99b994.png

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

Cosa vuoi imparare da questo codelab?

Non ho dimestichezza con l'argomento e vorrei una buona panoramica. So qualcosa su questo argomento, ma vorrei un ripasso. Cerco codice di esempio da utilizzare nel mio progetto. Sto cercando una spiegazione di qualcosa di specifico.

Firebase In-App Messaging

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 incoraggiano a completare azioni in-app chiave, come superare un livello di un gioco, acquistare un articolo o iscriversi a dei contenuti.

Firebase A/B Testing

Basata su Google Optimize, Firebase A/B Testing (ABT) ti aiuta a ottimizzare l'esperienza nella 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 prima di implementarle su larga scala.

Che cosa ti 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. (è necessaria l'installazione degli strumenti Xcode).
  • L'emulatore Android. (richiede la configurazione in Android Studio).

Oltre a quanto sopra, sono necessari anche:

  • 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.
  • La versione stabile più recente 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 di esempio del codelab. Per scoprire come ottenere il codice, consulta il passaggio successivo.

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. Da questo momento in poi, assicurati di eseguire i comandi da questa directory:

cd friendlyeats-flutter

Poi vai alla directory del codelab ed esegui il checkout del ramo fiam-abt:

git checkout fiam-abt

Questo ramo contiene tutto il codice necessario per questo codelab, inclusa una versione completa nella cartella done. Gli altri branch 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 di avvio

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 sui ristoranti. Tramite questo codelab, eseguirai l'implementazione di un esperimento di messaggistica in-app per gli utenti di questa app.

Crea un progetto Firebase

  1. Nella console Firebase, fai clic su Aggiungi progetto e poi assegna al progetto Firebase il nome FriendlyEats. Ricorda l'ID progetto per il tuo progetto Firebase (o fai clic sull'icona Modifica per impostare l'ID progetto che preferisci).
  2. Assicurati che Google Analytics sia abilitato per il progetto, quindi fai clic su Continua.
  3. Fai clic su Crea progetto.

Complimenti! Hai appena creato il tuo primo progetto Firebase. Ora puoi fare clic sul nome del progetto per accedere alla console.

Successivamente, viene descritta la procedura per configurare e attivare i servizi necessari utilizzando la Console Firebase.

Attiva l'autenticazione anonima

Anche se l'autenticazione non è l'obiettivo di questo codelab, è importante avere una qualche forma di autenticazione nella tua app. Utilizzerai l'accesso anonimo, il che significa che l'utente accede in silenzio senza essere 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 provider di accesso Anonimo e fai clic su Salva.

fee6c3ebdf904459.png

L'attivazione dell'accesso anonimo consente all'applicazione di far accedere silenziosamente gli 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, scegli una posizione vicina ai tuoi utenti.
  5. Fai clic su Avvia in modalità di test. Leggi il disclaimer relativo alle regole di sicurezza.
    Più avanti in questo codelab, aggiungerai le 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 di Firebase specifica per il mobile

La maggior parte delle modifiche al codice necessarie per attivare il supporto di Firebase sono già state sottoposte a commit nel progetto su cui stai lavorando. Tuttavia, per aggiungere il supporto per le piattaforme mobile, devi:

  • Registra la piattaforma desiderata 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.

a35458e5c0dd0acf.png Configurare iOS

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

Dovresti visualizzare la seguente finestra di dialogo:

c42139f18fb9a2ee.png

  1. Il valore importante da fornire è l'ID gruppo iOS. Puoi ottenere l'ID bundle eseguendo i tre passaggi successivi.
  1. Nello strumento a riga di comando, vai alla directory di primo livello della tua app Flutter.
  2. Esegui il comando open ios/Runner.xcworkspace per aprire Xcode.
  1. In Xcode, fai clic su Runner di primo livello nel riquadro di sinistra per visualizzare la scheda Generali nel riquadro di destra, come mostrato. Copia il valore Bundle Identifier (Identificatore pacchetto).

9733e26be329f329.png

  1. Torna alla finestra di dialogo Firebase, incolla l'identificatore del pacchetto copiato nel campo ID pacchetto iOS e fai clic su Registra app.
  1. Continuando in Firebase, segui le istruzioni per scaricare il file di configurazione GoogleService-Info.plist.
  2. Torna a Xcode. Tieni presente che Runner ha una sottocartella chiamata anche Runner (mostrata nell'immagine precedente).
  3. Trascina il file GoogleService-Info.plist (che hai appena scaricato) nella sottocartella Runner.
  4. Nella finestra di dialogo visualizzata in Xcode, fai clic su Fine.
  5. 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.

84e0b3199bef6d8a.pngConfigurare 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 vedere la seguente finestra di dialogo : 8254fc299e82f528.png

  1. Il valore importante da fornire è il nome del pacchetto Android. Il nome del pacchetto viene visualizzato quando esegui i seguenti due passaggi:
  1. Nella directory dell'app Flutter, apri il file android/app/src/main/AndroidManifest.xml.
  2. Nell'elemento manifest, trova il valore di stringa dell'attributo package. Questo valore è il nome del pacchetto Android (ad esempio com.yourcompany.yourproject). Copia questo valore.
  3. Nella finestra di dialogo Firebase, incolla il nome del pacchetto copiato nel campo Nome del pacchetto Android.
  4. Per questo codelab non è necessario il certificato SHA-1 per la firma di debug. Lascia vuoto questo campo.
  5. Fai clic su Registra app.
  6. Continuando in Firebase, segui le istruzioni per scaricare il file di configurazione google-services.json.
  7. Vai alla directory dell'app Flutter e sposta il file google-services.json (che hai appena scaricato) nella directory android/app.
  8. Torna nella Console Firebase, salta i passaggi rimanenti e torna alla pagina principale della Console Firebase.
  9. Tutta la configurazione di Gradle è già stata sottoposta a check-in. Se l'app è ancora in esecuzione, chiudila e ricostruiscila 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 in locale. Ora puoi eseguire l'app su qualsiasi piattaforma configurata (e per la quale hai un dispositivo ed emulatore disponibili).

Scopri quali dispositivi sono disponibili con il seguente comando:

flutter devices

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

7d44d7c0837b3e8e.png

Ora esegui l'app in locale con il seguente comando:

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 fa accedere in silenzio come utente anonimo.

5. Crea e testa il tuo primo messaggio

Integrare la Messaggistica in-app di Firebase nella tua app

L'integrazione di base di Messaggistica in-app è completamente senza codice: devi solo aggiungere la dipendenza ed è tutto pronto. Aggiungi la seguente dipendenza al file pubspec.yaml

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

Compilare un messaggio nella console Firebase

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

Per scrivere 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.

4fec02395f89f2a8.png

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

59845004afc26847.png

Assicurati di scegliere come target l'app con cui vuoi eseguire il test. A seconda del percorso di integrazione che stai seguendo, potresti avere iOS, Android o entrambi.

3f1eb7a327a50265.png

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

8dc5cea0a4c79008.png

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

5bbc987bf63d1f48.png

Visualizzare il messaggio nell'app

Ora disinstalla e reinstalla l'app. Al momento dell'apertura dovresti vedere il messaggio che hai creato. Congratulazioni, hai appena inviato il tuo primo messaggio in-app. Nel passaggio successivo scoprirai come aggiungere un evento di analisi 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 in che modo 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
  # ...
  1. Importa dati e analisi in home_page.dart
import 'package:firebase_analytics/firebase_analytics.dart';
  1. Aggiungi un'istanza di Firebase Analytics al home_page.dart
class HomePage extends StatefulWidget {
  static const route = '/';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  HomePage({Key key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}
  1. Avvia un evento di analisi 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));
})

Modifica il messaggio in modo che venga attivato in base all'evento di analisi

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

Nella Console Firebase, torna a Messaggio in-app e modifica la campagna esistente

d1fdc539dfcc6375.png

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

8e12d8f1f8f166dd.png

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

4f7d6bd2960b3ef7.png

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 vedere il messaggio in-app.

a11febda5526263.png

7. Creare una campagna FIAM+ABT

Inizia con un obiettivo

La nostra app Friendlyeats è già fantastica, ma per essere utile abbiamo bisogno di alcune recensioni. Queste provengono dagli utenti di Friendlyeats, quindi cerchiamo un modo per incoraggiarli a lasciare recensioni.

Innanzitutto, definiamo l'evento di conversione

Poiché vogliamo sapere se gli utenti recensiscono i ristoranti, aggiungiamo un evento di analisi 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);
}
  1. 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 considerare il tipo di comportamento che vogliamo incoraggiare nella nostra app tramite queste campagne. Per FriendlyEats, vorremmo che più persone lasciassero recensioni, il che renderebbe l'app più utile. Esistono diversi modi per incoraggiare questa azione utilizzando i messaggi in-app. Un modo è tramite un semplice messaggio in-app che dice 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 qualche tipo di incentivo per fornire una 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 dei ristoranti su FriendlyEats e sembra che offrire un coupon possa avere un impatto ancora maggiore in questo caso. Ma quanto aumenta la probabilità che gli utenti scrivano una recensione se offri questo coupon? Vale la pena pagare il costo del coupon? Per determinare questo, eseguiremo un esperimento di messaggistica in-app. Possiamo utilizzare Firebase A/B Testing per mostrare in modo casuale agli utenti uno dei nostri messaggi in-app e misurare l'effetto che ha sul loro comportamento, in modo simile a un esperimento clinico. Il bello è 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 Test A/B.
  2. Fai clic su Crea esperimento e seleziona l'opzione che ti consente di eseguire esperimenti sulla messaggistica in-app. Verrà visualizzato il compositore dell'esperimento mostrato di seguito.

a792dfd4f82fee9c.png

Assegna un nome e una descrizione facoltativa all'esperimento.

  1. Nel passaggio successivo dovrai comporre i diversi messaggi in-app da inviare agli utenti nell'esperimento. Il primo messaggio in-app che comporremo è il "valore di riferimento", ovvero il gruppo di controllo del nostro esperimento. Possiamo utilizzare questo messaggio semplice per chiedere di scrivere una recensione:

50e3eb946c56501a.png

  1. Ora che abbiamo un punto di riferimento, comporremo una variante, il messaggio in-app che offre agli utenti un codice coupon per incoraggiarli a lasciare una recensione. Non è completamente visibile nell'anteprima di seguito, ma il titolo del messaggio è "Ricevi un coupon, lascia una recensione!" e il corpo del messaggio è "La prossima volta che vieni al Burrito Cafe, utilizza il codice coupon FRIENDLYEATS-15 al momento del pagamento per ottenere il 15% di sconto sul tuo ordine. E ricordati di lasciare una recensione dopo". Speriamo che questo incentivi alcuni utenti a visitare il Burrito Café.

bed9182080bebb41.png

Nel passaggio successivo, sceglieremo come target 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 nell'esperimento. Per questo esempio, possiamo impostarlo su 100%, poiché vogliamo che tutti gli utenti vedano il gruppo di base o la variante del coupon. Se vuoi avere un gruppo di controllo a cui non viene mostrato alcun messaggio in-app, puoi ridurre questa percentuale di esposizione.

bd96bf5798d227f1.png

  1. A questo punto, dovrai definire alcuni obiettivi per l'esperimento. Questo è l'esito dell'esperimento che vogliamo misurare. Lo imposteremo come review_successevento di analisi che abbiamo definito nella sezione precedente, poiché vogliamo valutare l'impatto dei nostri diversi messaggi in-app sugli utenti che lasciano recensioni dei ristoranti. eb89d3b9f89ab43b.png
  2. Per la pianificazione, lasceremo 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.

c57be430d41bfcad.png

  1. Ora non resta che esaminare l'esperimento e fare clic su Avvia esperimento. Dopodiché possiamo rilassarci e attendere l'arrivo dei dati del nostro esperimento.

566af8bace30c67.png

Dai un'occhiata alla raccolta dei dati in tempo reale

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

8fa8a0edcd8a8ad4.png

In questo caso, la variante ha migliorato notevolmente il valore di riferimento, quindi abbiamo potuto scegliere di selezionare Implementa variante, che avrebbe implementato il messaggio in-app con il coupon per 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 tue campagne di messaggistica in-app.

Passaggi successivi

Dai un'occhiata ad alcuni di questi codelab…

Letture aggiuntive

Abbiamo appena scalfito la superficie di ciò che è possibile fare con Firebase In-App Messaging e Firebase A/B Testing. Dai un'occhiata a queste risorse per saperne di più…

Documentazione di riferimento