Questa pagina è stata tradotta dall'API Cloud Translation.

Il tuo primo esperimento di 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 .

Una volta terminato, sarai in grado di progettare e implementare esperimenti di messaggistica in-app per aumentare in modo efficace il coinvolgimento degli utenti per qualsiasi app iOS o Android scrivendo una quantità minima di codice.

Cosa imparerai

Come utilizzare la messaggistica in-app Firebase (FIAM) in un'app Flutter
Come personalizzare l'aspetto dei tuoi 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 ti piacerebbe imparare da questo codelab?

Sono nuovo nell'argomento e vorrei una buona panoramica.

So qualcosa su questo argomento, ma voglio un ripasso.

Sto cercando un codice di esempio da utilizzare nel mio progetto.

Sto cercando una spiegazione per qualcosa di specifico.

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

Test A/B di Firebase

Basato su Google Optimize, Firebase A/B Testing (ABT) ti aiuta a ottimizzare l'esperienza della tua app semplificando l'esecuzione, l'analisi e il ridimensionamento degli esperimenti di prodotto e di marketing. Ti dà la possibilità di testare le modifiche all'interfaccia utente, alle funzionalità o alle campagne di coinvolgimento della tua app per vedere se effettivamente spostano l'ago sui tuoi parametri chiave (come entrate e fidelizzazione) prima di distribuirle su larga scala.

Quello che 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 tuo computer e impostato in 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, come Chrome.
Un IDE o un editor di testo a tua scelta, come Android Studio o VS Code configurato con i plugin Dart e Flutter. Si consiglia l'uso di VS Code con Flutter.
L'ultima versione stabile di Flutter (o beta se ti piace vivere al limite).
Un account Google, come un account Gmail, per creare e gestire il tuo progetto Firebase.
Il codice di esempio del codelab. Vedi il passaggio successivo per sapere come ottenere il codice.

2. Preparazione

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 codelab e controlla 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 in questo repository contengono il codice per creare l'app FriendlyEats, come mostrato nel codelab Firestore Flutter 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 nel tuo IDE preferito. Questa directory contiene il codice iniziale per il codelab che consiste in un'app di consigli sui ristoranti. Attraverso questo codelab, strumenterai un esperimento di messaggistica in-app per gli utenti di questa app.

Crea un progetto Firebase

Nella console Firebase , fai clic su Aggiungi progetto , quindi denomina il progetto Firebase FriendlyEats . Ricorda l'ID progetto per il tuo progetto Firebase (o fai clic sull'icona Modifica per impostare l'ID progetto preferito).
Assicurati che Google Analytics sia abilitato per il progetto, quindi fai clic su Continua.
Fare clic su Crea progetto .

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

Successivamente, esaminerai la configurazione e l'abilitazione dei servizi necessari utilizzando la console Firebase.

Abilita autenticazione anonima

Sebbene l'autenticazione non sia 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 silenziosamente senza che gli venga richiesto.

Per abilitare l'accesso anonimo:

Nella console Firebase, individua Autenticazione nella barra di navigazione a sinistra.
Fai clic su Autenticazione , quindi su Inizia e seleziona la scheda Metodo di accesso (o vai direttamente alla console Firebase ).
Abilita il provider di accesso anonimo e fai clic su Salva .

L'abilitazione dell'accesso anonimo consente all'applicazione di accedere silenziosamente ai tuoi utenti quando accedono all'app. Per saperne di più, consulta la documentazione sull'autenticazione anonima per Android e iOS .

Abilita Cloud Firestore

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

Per abilitare Cloud Firestore:

Nella barra di navigazione sinistra della console Firebase, fai clic su Firestore .
Fai clic su Crea database nel riquadro Cloud Firestore.

Selezionare l'opzione Avvia in modalità test e fare clic su Avanti dopo aver letto la dichiarazione di non responsabilità sulle regole di sicurezza, quindi su Abilita .

La modalità test garantisce la possibilità di scrivere liberamente nel database durante lo sviluppo. Renderai il tuo database più sicuro più avanti in questo codelab.

3. Configurazione Firebase specifica per dispositivi mobili

La maggior parte delle modifiche al codice necessarie per abilitare il supporto Firebase sono già archiviate nel progetto su cui stai lavorando. Tuttavia, per aggiungere il supporto per le piattaforme mobili, è necessario:

Registra la piattaforma desiderata sul progetto Firebase
Scarica il file di configurazione specifico della piattaforma e aggiungilo al codice.

Nella directory di livello superiore dell'app Flutter sono presenti sottodirectory chiamate ios e android . Queste directory contengono rispettivamente i file di configurazione specifici della piattaforma per iOS e Android.

Configura iOS

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

Dovresti vedere la seguente finestra di dialogo:

Il valore importante da fornire è l' ID del bundle iOS. Ottieni l'ID del pacchetto eseguendo i tre passaggi successivi.

Nello strumento da riga di comando, vai alla directory di livello superiore della tua app Flutter.
Esegui il comando open ios/Runner.xcworkspace per aprire Xcode.

In Xcode, fai clic sul Runner di livello superiore nel riquadro di sinistra per visualizzare la scheda Generale nel riquadro di destra, come mostrato. Copia il valore dell'identificatore del bundle .

Torna alla finestra di dialogo Firebase, incolla l' identificatore del bundle copiato nel campo ID del bundle iOS e fai clic su Register App .

Proseguendo in Firebase, seguire le istruzioni per scaricare il file di configurazione GoogleService-Info.plist .
Torna a Xcode. Nota che Runner ha una sottocartella chiamata anche Runner (mostrata nell'immagine precedente).
Trascina il file GoogleService-Info.plist (che hai appena scaricato) nella sottocartella Runner .
Nella finestra di dialogo visualizzata in Xcode, fai clic su Fine .
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 finito di configurare la tua app Flutter per iOS!

Configura Android

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

Dovresti vedere la seguente finestra di dialogo:

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

Nella directory dell'app Flutter, apri il file android/app/src/main/AndroidManifest.xml .
Nell'elemento manifest , trova il valore stringa dell'attributo package . Questo valore è il nome del pacchetto Android (qualcosa come com.yourcompany.yourproject ). Copia questo valore.
Nella finestra di dialogo Firebase, incolla il nome del pacchetto copiato nel campo del nome del pacchetto Android .
Non è necessario il certificato di firma di debug SHA-1 per questo codelab. Lascialo vuoto.
Fare clic su Registra app .
Proseguendo in Firebase, seguire le istruzioni per scaricare il file di configurazione google-services.json .
Vai alla directory dell'app Flutter e sposta il file google-services.json (appena scaricato) nella directory android/app .
Torna alla console Firebase, salta i passaggi rimanenti e torna alla pagina principale della console Firebase.
Tutta la configurazione di Gradle è già stata archiviata. Se la tua app è ancora in esecuzione, chiudila e ricostruiscila per consentire a Gradle di installare le dipendenze.

Hai finito di configurare la tua app Flutter per Android!

4. Esegui la tua app localmente

Sei pronto per iniziare effettivamente a lavorare sulla tua app! Innanzitutto, esegui l'app localmente. Ora puoi eseguire l'app su qualsiasi piattaforma configurata (e per la quale disponi di 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 assomiglia a questo:

Ora esegui l'app localmente 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 accede silenziosamente come utente anonimo.

5. Crea e prova il tuo primo messaggio

Integra la messaggistica in-app Firebase nella tua app

L'integrazione di base della messaggistica in-app è totalmente priva di codice, tutto ciò che devi fare è aggiungere la dipendenza e sei pronto per partire! Aggiungi la seguente dipendenza al tuo file pubspec.yaml

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

Componi un messaggio nella console Firebase

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

Per comporre il tuo primo messaggio:

Nella sezione Coinvolgi della console Firebase, fai clic su Messaggistica in-app .
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. Sentiti libero di personalizzare il messaggio nel modo che preferisci: puoi aggiungere immagini, pulsanti o cambiare colori.

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

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

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

Visualizza il messaggio nella tua app

Ora disinstalla e reinstalla la tua app e all'apertura dovresti visualizzare il messaggio che hai creato. Congratulazioni, hai appena inviato il tuo primo messaggio in-app! Nel passaggio successivo imparerai come aggiungere un evento di analisi per attivare un messaggio in-app in base alle azioni eseguite dagli utenti nell'app.

6. Integra 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 per quando un utente fa clic su un ristorante.

Aggiungi la dipendenza Firebase Analytics a Flutter in pubspec.yaml

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

Importa analisi in home_page.dart

import 'package:firebase_analytics/firebase_analytics.dart';

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();
}

Attiva 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 tuo messaggio per attivarlo sull'evento di analisi

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

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

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

Da lì possiamo pubblicare le nostre modifiche facendo clic sul pulsante "revisiona".

Prova il tuo trigger nell'app

A questo punto dovresti essere in grado di eseguire la tua app con

flutter run

E quando fai clic su un ristorante dovresti vedere il tuo messaggio in-app

7. Crea una campagna FIAM+ABT

Inizia con un obiettivo

La nostra app Friendlyeats ha già un bell'aspetto, ma affinché sia utile abbiamo bisogno di alcune recensioni. Questi proverranno dagli utenti di Friendlyeats, quindi troviamo un modo per incoraggiare gli utenti a lasciare recensioni.

Per prima cosa definiamo il nostro evento di conversione

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

Importa Firebase Analytics proprio 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);
}

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);
 }

Configura il test A/B nella console Firebase

Ora che sappiamo come creare campagne di messaggistica in-app, è tempo di considerare quale tipo di comportamento vorremmo incoraggiare nella nostra app attraverso queste campagne. Per FriendlyEats, vorremmo che più persone lasciassero recensioni, il che renderebbe l'app più utile! Esistono alcuni modi in cui potremmo incoraggiarlo utilizzando i messaggi in-app. Il primo è attraverso un semplice messaggio in-app che dice semplicemente all'utente che dovrebbe dare una recensione al ristorante per contribuire a migliorare l'app FriendlyEats. Un altro modo è utilizzare un messaggio in-app per offrire qualche tipo di incentivo per aver fornito una recensione, come 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 più forte in questo caso. Ma quanto è più probabile che la fornitura di questo coupon induca gli utenti a scrivere una recensione? Vale innanzitutto il costo del coupon? Per determinarlo, eseguiremo un esperimento di messaggistica in-app! Possiamo utilizzare Firebase A/B Testing per visualizzare in modo casuale uno dei nostri messaggi in-app agli utenti e misurare l'effetto che questo ha sul comportamento degli utenti, un po' come in una sperimentazione clinica. Soprattutto, questo può essere fatto completamente tramite la console Firebase, senza bisogno di codice!

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

Nella sezione Coinvolgi della console Firebase, fai clic su A/B Testing .
Fai clic su Crea esperimento e seleziona l'opzione che desideri sperimentare con la messaggistica in-app . Verrai indirizzato al compositore dell'esperimento mostrato di seguito.

Assegna un nome all'esperimento e una descrizione facoltativa.

Nel passaggio successivo comporrai i diversi messaggi in-app che invierai agli utenti nel tuo esperimento. Il primo messaggio in-app che comporremo è la "baseline", ovvero il controllo del nostro esperimento. Possiamo rendere questo il nostro semplice messaggio "per favore fai una recensione":

Ora che abbiamo una linea di base, comporremo una variante, 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 sarai al Burrito Cafe, usa il codice coupon FRIENDLYEATS-15 su acquista per uno sconto del 15% sul tuo ordine. E ricordati di lasciare una recensione dopo!". Si spera che questo ispiri alcuni utenti a dare un'occhiata al Burrito Cafe!

Nel passaggio successivo, indirizzeremo 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. Possiamo semplicemente impostarlo al 100% per questo esempio, poiché vorremmo che tutti gli utenti vedessero la linea di base o la nostra variante coupon. Se desideri avere un gruppo di controllo a cui non venga mostrato alcun messaggio in-app, puoi ridurre questa percentuale di esposizione.

Successivamente, definirai alcuni obiettivi per l'esperimento. Questo è il risultato dell'esperimento che vorremmo misurare. Lo imposteremo come evento di analisi review_success che abbiamo definito nella sezione precedente, poiché vorremmo vedere l'impatto che i nostri diversi messaggi in-app hanno sugli utenti che lasciano recensioni sui ristoranti.
Per la pianificazione, lasceremo che la campagna inizi immediatamente e imposteremo click_restaurant come condizione di attivazione, in modo che gli utenti visualizzino uno dei due messaggi in-app quando fanno clic su un ristorante.

Ora non resta che rivedere il nostro esperimento e premere Avvia esperimento . Quindi possiamo sederci e aspettare che arrivino i dati del nostro esperimento!

Controlla la raccolta dati in tempo reale

Ora che abbiamo iniziato il nostro esperimento, gli utenti di FriendlyEats vedranno casualmente uno dei due messaggi in-app che abbiamo composto quando fanno clic su un ristorante, il messaggio di base o il messaggio variante . Questo dividerà i nostri utenti in due gruppi, in base al messaggio che hanno visto. Possiamo quindi consultare la console Firebase (sempre nella sezione A/B Testing) per confrontare i dati di analisi in tempo reale di entrambi i gruppi. Ci vorrà del tempo prima che i dati arrivino, poiché dobbiamo aspettare che gli utenti vedano effettivamente i messaggi in-app e agiscano di conseguenza. Ecco come potrebbero apparire i risultati dopo aver raccolto dati sufficienti:

In questo caso, la variante è migliorata in modo significativo rispetto alla base di riferimento, quindi abbiamo potuto scegliere di selezionare Variante di distribuzione , che quindi distribuirebbe il messaggio in-app con il coupon a tutti gli utenti.

8. Congratulazioni

Congratulazioni, hai creato ed eseguito con successo 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.

Qual è il prossimo?

Dai un'occhiata ad alcuni di questi codelab...

Ulteriori letture

Abbiamo appena scalfito la superficie di ciò che è possibile fare con la messaggistica in-app Firebase e il test A/B Firebase. Dai un'occhiata a questi se vuoi saperne di più...

Documenti di riferimento

Crea esperimenti di messaggistica in-app con test A/B