Monitora gli eventi in una WebView con Google Analytics per Firebase

1. Introduzione

Ultimo aggiornamento: 25-02-2022

Che cosa creerai

In questo codelab imparerai a inoltrare gli eventi da una pagina web all'interno di WebView a un codice nativo in modo che GA4F possa monitorare gli eventi.

Utilizzeremo l'app ibrida di esempio per Android che chiama una pagina web utilizzando WebView.

Cosa imparerai a fare

• Come inizializzare GA4F (Google Analytics for Firebase) nell'app ibrida
• Come creare eventi e parametri personalizzati nella pagina web
• Come inoltrare gli eventi su una pagina web all'interno di WebView a un codice nativo
• Come eseguire il debug
• Come importare gli eventi e utilizzarli per le campagne per azione.

Che cosa ti serve

• Android Studio 3.6 o versioni successive
• Account Firebase

2. Preparazione

Recupera il codice

La guida ufficiale di Firebase fornisce il codice campione su GitHub. Ne avremo bisogno per questo progetto.

Per iniziare, devi scaricare il codice e aprirlo nel tuo ambiente di sviluppo preferito. Utilizzeremo due directory : android e web. La directory "android" è per l'app per Android e la directory "web" è per una pagina web che verrà chiamata dall'app tramite WebView.

3. Creare e configurare un progetto Firebase

Per iniziare a utilizzare Firebase, devi creare e configurare un progetto Firebase.

Creare un progetto Firebase

1. Accedi a Firebase.

Nella Console Firebase, fai clic su Aggiungi progetto (o Crea un progetto) e assegna al progetto Firebase il nome Webview-test-codelab o qualsiasi altro nome che preferisci.

2. Fai clic sulle opzioni di creazione del progetto. Accetta i Termini di servizio di Firebase se richiesto. Devi attivare Google Analytics per questo progetto, poiché hai bisogno degli eventi di Google Analytics per monitorare gli eventi di azione e analizzare le conversioni.

Per saperne di più sui progetti Firebase, consulta la sezione Informazioni sui progetti Firebase.

4. Configurazione di Firebase per Android

Configurare Android nella Console Firebase

1. Nella home page della Console Firebase, puoi fare clic sull'icona Android come mostrato di seguito.

In alternativa, puoi andare a Panoramica del progetto nella barra di navigazione a sinistra e fare clic sul pulsante Android in "Inizia aggiungendo Firebase alla tua app".

Verrà visualizzata la schermata "Aggiungi Firebase alla tua app per Android" come mostrato di seguito.

2. Puoi trovare il nome del pacchetto Android (ad es. com.xxxx.myproject) in android/app/src/main/AndroidManifest.xml nella directory dell'app.

package="com.xxxx.myproject"

3. La chiave SHA-1 non è necessaria qui. Questa chiave è necessaria solo quando vuoi utilizzare l'accesso con Google o Firebase Dynamic Links o importare i dati in_app_purchase da Google Play, che non rientrano nell'ambito di questo codelab.
4. Fai clic su Registra app.
5. Scarica il file di configurazione google-services.json nella Console Firebase e copia e incolla questo file nella directory android/app del progetto dell'app.
6. Torna alla Console Firebase, salta i passaggi rimanenti e torna alla pagina principale della Console Firebase.
7. Infine, hai bisogno del plug-in Gradle dei servizi Google per leggere il file google-services.json generato da Firebase.
8. Nell'IDE o nell'editor, apri android/app/build.gradle, quindi aggiungi la seguente riga come ultima riga del file:

apply plugin: 'com.google.gms.google-services'

13. Apri android/build.gradle. Quindi, aggiungi una nuova dipendenza all'interno del tag buildscript.

buildscript { 
   repositories {
      // ...
   }
   dependencies {
      // ...
      Classpath 'com.google.gms:google-services:4.3.3'
   }
}

14. Se l'app è ancora in esecuzione, chiudila e ricompila per consentire a Gradle di installare le dipendenze.

Hai completato la configurazione dell'app per Android.

5. Sviluppare un'interfaccia web di Analytics nel web e registrare eventi personalizzati

Per monitorare gli eventi in una WebView con Google Analytics, devi inserire il codice sia nell'app web sia nell'app Android.

In questa sezione, esaminiamo il codice che devi inserire nella pagina web.

Innanzitutto, crea un file JavaScript da utilizzare in un file HTML. Nel codice campione, il file JS è denominato index.js. Devi creare la funzione "logEvent" per chiamare "AnayticsWebInterface" per Android e "messageHander" per iOS come nel codice riportato di seguito.

Chiama questa funzione nel file HTML in cui vuoi monitorare l'evento, come mostrato di seguito.

Quando viene attivato un evento nella WebView nell'app per Android, viene chiamata "window.AnalyticsWebInterface" e l'evento viene inoltrato al codice WebInterface nell'app.

6. Ospitare la directory web per ottenere l'URL della pagina web

Prima di chiamare una pagina web all'interno di WebView nella tua app, hai bisogno di un URL della pagina web. Esistono molti metodi per ospitare le pagine web. In questo codelab, utilizzeremo il servizio di hosting Firebase per comodità.

• Nel terminale, inserisci la directory web (ad es. cd web) ed esegui i seguenti comandi:
• npm install -g firebase-tools

In questo modo verrà installata l'interfaccia a riga di comando di Firebase.

• firebase login
• firebase init
• Scegli "Hosting" quando ti viene chiesto quale funzionalità vuoi configurare.
• Scegli il progetto che hai configurato per l'app per Android.
• Accetta le impostazioni predefinite per tutte le richieste rimanenti.
• firebase deploy --only hosting - esegui il deployment in Firebase Hosting.

• Dopo aver ottenuto l'URL della pagina web, vai al progetto dell'app in Android Studio e inserisci l'URL web appena creato in questo passaggio all'interno di WebView, come mostrato di seguito.

7. Sviluppare il codice dell'interfaccia nell'app Android

Per monitorare gli eventi nella WebView con GA4F, devi inserire il codice sia nel web sia in Android. In questa sezione, esaminiamo il codice che devi inserire nell'app per Android per ricevere gli eventi dalla pagina web in WebView.

Crea il file "AnalyticsWebInterface.java" per creare la classe "AnalyticsWebInterface". In questa classe, devi codificare @JavascriptInterface per collegare la funzione logEvent nel file JS web, come mostrato di seguito.

Poi, devi aggiungere l'interfaccia JavaScript nell'attività che chiama WebView, come mostrato di seguito.

Per visualizzare l'intero codice, consulta il codice campione scaricato da GitHub nel passaggio "Preparazione".

8. Controllare ed eseguire il debug degli eventi

Per eseguire il debug degli eventi, puoi utilizzare il seguente codice nel terminale di Android Studio dopo aver collegato il dispositivo di test o aver avviato l'emulatore.

adb shell setprop debug.firebase.analytics.app [nome del pacchetto applicativo]

> adb shell setprop log.tag.FA VERBOSE

> adb shell setprop log.tag.FA-SVC VERBOSE

> adb logcat -v time -s FA FA-SVC

Fai clic su "LOG EVENT 1" nella tua app e, se il codice funziona correttamente, vedrai il log come mostrato di seguito.

Se vuoi controllare nella Console Firebase, puoi anche utilizzare la scheda In tempo reale. Vai alla Console Firebase e fai clic sulla scheda In tempo reale, come mostrato di seguito.

Poi, filtra l'evento della piattaforma Android utilizzando la funzione "Aggiungi confronto".

Se il codice è implementato correttamente, vedrai gli eventi dell'app per Android nella scheda In tempo reale.

Dopo alcune ore, potrai visualizzare gli eventi registrati nella scheda Eventi della Console Firebase. Fai clic sulla scheda Eventi nella sezione Analytics della Console Firebase. Puoi anche controllare i valori all'interno dell'evento event1 facendo clic sull'evento.

Per importare event1 come conversione in Google Ads, contrassegnalo come conversione spostando l'opzione Contrassegna come conversione verso destra.

Se l'evento è nella scheda Conversioni, significa che l'hai contrassegnato correttamente come conversione. Ora Google Ads potrà importare questo evento da Firebase.

Per il debug, utilizza Firebase DebugView. Per maggiori dettagli, vedi Eseguire il debug degli eventi.

9. Importare gli eventi di Analytics in Google Ads

Una volta completata la configurazione di Firebase, puoi lanciare le campagne per app con eventi di azione. Inizia collegando Firebase a Google Ads. Se colleghi Firebase a Google Ads,le campagne per app possono importare gli eventi di Firebase. Questa procedura aiuta anche Google Ads a migliorare le campagne per app, consentendogli di saperne di più sui relativi segmenti di pubblico.

1. Vai a Impostazioni di Firebase facendo clic sul pulsante accanto a Panoramica del progetto.
2. Nella scheda Integrazioni, vedrai Google Ads e un pulsante Collega. Fai clic su Collega e poi su Continua.

3. Scegli l'account Google Ads.

Attenzione:se l'evento target non è contrassegnato come evento di conversione, Google Ads non potrà importarlo. Assicurati che l'evento sia contrassegnato correttamente come conversione.

Ora la parte di Firebase è completata.

Vai a Google Ads.

1. Accedi e vai a Strumenti e impostazioni > Misurazione > Conversioni per importare gli eventi personalizzati come conversioni.
2. Fai clic sul pulsante + per aggiungere nuove azioni di conversione.

3. Scegli Proprietà Google Analytics 4 (Firebase) e fai clic su Continua.

4. Puoi visualizzare tutti gli eventi di Analytics contrassegnati come conversioni. Trova l'evento event1 che abbiamo implementato in precedenza.

5. Controlla l'azione, fai clic su Importa e poi su Continua.

Dopo aver impostato event1 come azione di conversione, puoi lanciare campagne per azione per app con l'evento event1.

10. Lanciare campagne per azione per app con eventi importati

Importante: per lanciare correttamente una campagna per app, devi ottenere un'app a livello di produzione su Google Play. Tuttavia, se non sei ancora pronto per la pubblicazione, puoi saltare questo passaggio per il momento.

6. Vai alla scheda Campagna del tuo account attuale e avvia una nuova campagna facendo clic sul pulsante +. Fai clic su [Nuova campagna] e poi su Continua.
7. Lancia una campagna di promozione di app con l'opzione Installazioni dell'app.

8. Trova la tua app digitando il nome dell'app, il nome del pacchetto o il nome dell'editore.
9. Nella sezione Offerte, seleziona Azioni in-app nel menu a discesa.
10. Trova l'evento personalizzato nell'elenco fornito. Imposta il Costo per azione target e completa le opzioni aggiuntive.

11. Completa le impostazioni della campagna.

11. Complimenti

Complimenti, hai integrato correttamente Firebase e Google Ads. In questo modo, potrai migliorare il rendimento della campagna con gli eventi importati di Firebase.

Che cosa hai imparato

• Come inizializzare GA4F (Google Analytics for Firebase) nell'app ibrida
• Come creare eventi e parametri personalizzati nella pagina web
• Come inoltrare gli eventi su una pagina web all'interno di WebView a un codice nativo
• Come eseguire il debug
• Come importare gli eventi e utilizzarli per le campagne per azione.

12. Riferimenti

Guida ufficiale

• Utilizzare Analytics in una WebView - Firebase - Google

Configurazione di Firebase e Google Ads

• Google Ads con eventi personalizzati di Google Analytics for Firebase - Android
• Lancio di campagne Google Ads con eventi personalizzati di Google Analytics e Flutter