Personalizza i messaggi di Messaggistica in-app Firebase


Firebase In-App Messaging fornisce un insieme utile di comportamenti e tipi di messaggi preconfigurati con un aspetto predefinito, ma in alcuni casi potresti voler estendere i comportamenti e i contenuti dei messaggi. La messaggistica in-app ti consente di aggiungere azioni ai messaggi e personalizzarne l'aspetto.

Aggiungere un'azione al messaggio

Con le azioni puoi utilizzare i messaggi in-app per indirizzare gli utenti a un sito web o a una schermata specifica della tua app.

Firebase In-App Messaging utilizza i gestori di link per elaborare le azioni. L'SDK è in grado di utilizzare una serie di gestori, quindi se la tua app ne ha già uno, Firebase In-App Messaging può utilizzarlo senza ulteriori configurazioni. Se non hai ancora un gestore, puoi utilizzare Firebase Dynamic Links. Per saperne di più, leggi Creare link dinamici su iOS.

Aggiungere l'azione al messaggio utilizzando la console Firebase

Una volta che la tua app ha un gestore di link, puoi comporre una campagna con un'azione.

  1. Nella console Firebase, vai a DevOps e coinvolgimento > Messaggistica.

  2. Avvia il flusso di lavoro per configurare una nuova campagna:

    • Se è la tua prima campagna:

      1. Fai clic su Crea la tua prima campagna.
      2. Seleziona Messaggi in-app di Firebase e fai clic su Crea.

    • Se hai già creato campagne:

      1. Nella scheda Campagne, fai clic su Nuova campagna.
      2. Seleziona Messaggistica in-app.

  3. Segui le istruzioni sullo schermo per configurare la campagna.

  4. Fornisci una scheda, un testo del pulsante e un'azione del pulsante, un'azione dell'immagine o un'azione del banner, dove l'azione è un deep link pertinente.

Il formato dell'azione dipende dal layout del messaggio scelto. Le modali hanno pulsanti di azione con contenuti di testo, colore del testo e colore di sfondo personalizzabili. Le immagini e i banner in alto, invece, diventano interattivi e richiamano l'azione specificata quando vengono toccati.

Modificare l'aspetto del messaggio

Firebase In-App Messaging ti consente di personalizzare le visualizzazioni dei messaggi per modificare il modo in cui la tua app esegue il rendering del layout, degli stili dei caratteri, delle forme dei pulsanti e di altri dettagli dei messaggi. Esistono due modi per modificare le visualizzazioni dei messaggi: modificare le visualizzazioni predefinite Firebase In-App Messaging o creare da zero la tua libreria di visualizzazione dei messaggi.

Nota: questo prodotto non è disponibile per i target macOS, Mac Catalyst, App Clip o watchOS.

Modificare le visualizzazioni predefinite

Il modo più semplice per personalizzare i messaggi è basarsi sul codice di visualizzazione dei messaggi predefinito di Firebase In-App Messaging'.

Clonare il repository firebase-ios-sdk

Per iniziare, clona la latest release del repository firebase-ios-sdk e apri la directory InAppMessaging.

Selezionare i tipi di messaggi da modificare

Dopo aver clonato il repository, puoi modificare tutti o alcuni dei tipi di messaggi Firebase In-App Messaging: Card, Modal, Banner, e ImageOnly. Ogni tipo corrisponde a un layout del messaggio nel flusso di creazione della campagna Firebase In-App Messaging.

Di conseguenza, ogni tipo ha accesso a un insieme diverso di dati, determinato dalle opzioni di personalizzazione della campagna nella Firebase console:

Tipo titleText bodyText textColor backgroundColor imageData actionButton secondaryActionButton
Scheda
Modale
Banner
Solo immagine

Modificare il codice di rendering della visualizzazione dei messaggi

Tenendo presente le limitazioni dei tipi di messaggi, puoi modificarli come preferisci. Puoi creare un banner che viene visualizzato nella parte inferiore dell'app, spostare il pulsante di azione su una modale, incorporare il messaggio in-app nel feed di un utente o apportare qualsiasi altra modifica che renda l'aspetto dei messaggi adatto alla tua app.

Ci sono due aspetti principali a cui prestare attenzione quando modifichi le visualizzazioni dei messaggi:

Modifica i file nelle directory dei tipi di messaggi che preferisci e le sezioni corrispondenti del file .storyboard per creare le visualizzazioni dei messaggi personalizzate.

Aggiornare il podfile per utilizzare il codice InAppMessaging modificato

Per fare in modo che Firebase In-App Messaging utilizzi le visualizzazioni dei messaggi modificate anziché quelle predefinite displays, aggiorna il podfile in modo che utilizzi la libreria InAppMessaging personalizzata: 

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'YourProject' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!

# Pods for YourProject
pod 'Firebase'

# Remove the default InAppMessaging pod:
# pod 'Firebase/InAppMessaging'

# Overwrite it with a version that points to your local copy:
pod `FirebaseInAppMessaging', :path => '~/Path/To/The/Cloned/Repo/'

end
Al termine, puoi aggiornare i pod, ricompilare l'app e visualizzare le nuove visualizzazioni dei messaggi personalizzate.

Creare una libreria di visualizzazione dei messaggi personalizzata

Non devi necessariamente utilizzare la libreria InAppMessaging per creare un'UI per la visualizzazione dei messaggi. Puoi anche scrivere il tuo codice da zero.

Creare una classe che implementa il protocollo InAppMessagingDisplay

Firebase In-App Messaging utilizza la classe InAppMessaging per gestire le comunicazioni tra i server Firebase e la tua app. Questa classe, a sua volta, utilizza il InAppMessagingDisplay protocollo per visualizzare i messaggi che riceve. Per creare la tua libreria di visualizzazione, scrivi una classe che implementa il protocollo.

La definizione del protocollo e la documentazione su come rispettarlo sono disponibili nel FIRInAppMessagingDisplay.h file della InAppMessaging libreria.

Impostare messageDisplayComponent in modo che utilizzi la libreria di visualizzazione dei messaggi

InAppMessaging utilizza la proprietà messageDisplayComponent per determinare quale oggetto utilizzare per la visualizzazione dei messaggi. Imposta questa proprietà su un oggetto della classe di visualizzazione dei messaggi personalizzata, in modo che Firebase In-App Messaging sappia di dover utilizzare la tua libreria per il rendering dei messaggi:

InAppMessaging.inAppMessaging().messageDisplayComponent = yourInAppMessagingRenderingInstance