Monitora gli eventi in una WebView con Google Analytics per Firebase

1. Introduzione

Ultimo aggiornamento: 25/02/2022

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 Android ibrida di esempio che chiama una pagina web utilizzando WebView.

Cosa imparerai a fare

• Come inizializzare GA4F (Google Analytics for Firebase) in un'app ibrida
• Come creare eventi e parametri personalizzati in una 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

Ottieni il codice

La guida ufficiale di Firebase fornisce il codice campione in GitHub. Ci serve per questo progetto.

Per iniziare, dovrai scaricare il codice e aprirlo nel tuo ambiente di sviluppo preferito. Useremo due directory : android e web. L'"android" riguarda l'app per Android e il "web" è per una pagina web che viene richiamata dall'app tramite WebView.

3. Crea e configura un progetto Firebase

Per iniziare a utilizzare Firebase, devi creare e impostare 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 Webview-test-codelab o un nome a tua scelta.

2. Fai clic sulle varie opzioni di creazione del progetto. Accetta i termini di Firebase, se richiesto. Dovresti attivare Google Analytics per questo progetto perché 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 Informazioni sui progetti Firebase.

4. Configurazione Firebase per Android

Configurare Android nella console Firebase

1. Nella home page della Console Firebase puoi fare clic sull'icona di 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"

Vedrai il messaggio "Aggiungi Firebase all'app Android" schermata come mostrato di seguito.

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

package="com.xxxx.myproject"

3. La chiave SHA-1 non è necessaria qui. Questa chiave è necessaria solo se vuoi utilizzare la funzionalità Accedi con Google o Firebase Dynamic Links o importare 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, è necessario il plug-in Gradle dei servizi Google per leggere il file google-services.json generato da Firebase.
8. Nel tuo IDE o editor, apri android/app/build.gradle, quindi aggiungi la seguente riga come ultima riga nel 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 la tua app è ancora in esecuzione, chiudila e ricreala per consentire a Gradle di installare le dipendenze.

Hai completato la configurazione dell'app per Android.

5. Sviluppare un'interfaccia web di Analytics sul 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 per Android.

In questa parte, esaminiamo il codice da inserire nella pagina web.

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

Richiama questa funzione nel punto in cui vuoi monitorare l'evento nel file HTML, come illustrato di seguito.

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

6. Hosting directory web per ottenere l'URL della pagina web

Prima di chiamare una pagina web all'interno di WebView nella tua app, è necessario un URL di una 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 esempio, cd web) ed esegui questi comandi:
• npm install -g firebase-tools

in questo modo installerai l'interfaccia a riga di comando di Firebase.

• firebase login
• firebase init
• Scegli "Hosting" quando ti viene chiesto quale funzionalità desideri impostare.
• Scegli il progetto che hai configurato per la tua app per Android.
• Accetta i valori predefiniti per tutte le richieste rimanenti.
• firebase deploy --only hosting: esegui il deployment su Firebase Hosting.

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

7. Sviluppa il codice dell'interfaccia nell'app per Android

Per monitorare gli eventi in WebView con GA4F, devi inserire il codice sia sul web sia su Android. In questa parte, vediamo quale codice devi inserire nell'app per Android per ricevere gli eventi dalla pagina web in WebView.

Crea "AnalyticsWebInterface.java" per rendere "AnalyticsWebInterface" . In questa classe, devi scrivere il codice @JavascriptInterface per connettere la funzione logEvent nel file js web come riportato di seguito.

Successivamente, devi aggiungere l'interfaccia JavaScript nell'Attività che chiama WebView, come descritto di seguito.

Per vedere il codice completo, fai riferimento al codice campione che hai scaricato da GitHub nella sezione passaggio.

8. Controllo e debug degli eventi

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

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

> 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 "REGISTRA EVENTO 1". nell'app e se il codice funziona correttamente, vedrai il log come di seguito.

Se vuoi accedere alla Console Firebase, puoi anche utilizzare la scheda In tempo reale. Vai alla console Firebase e fai clic sulla scheda In tempo reale come qui sotto.

Quindi, filtra gli eventi della piattaforma Android utilizzando "Aggiungi confronto". personalizzata.

Vedrai gli eventi dell'app per Android nella scheda In tempo reale se il tuo codice è stato implementato correttamente.

Dopo alcune ore potrai vedere gli eventi registrati nella scheda Eventi della console Firebase. Basta fare clic sulla scheda Eventi nella sezione di Analytics all'interno 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, Contrassegna come conversione facendo scorrere l'opzione Contrassegna come conversione verso destra.

Se l'evento è nella scheda Conversione, significa che lo hai contrassegnato come conversione. Google Ads ora può importare questo evento da Firebase.

A scopo di debug, utilizza Firebase DebugView. Per maggiori dettagli, vedi Debug dell'evento.

9. Importare gli eventi di analisi in Google Ads

Una volta completata la configurazione di Firebase, puoi lanciare le campagne per app con eventi di azione. Per iniziare, collega il Firebase a Google Ads. Se colleghi Firebase a Google Ads,le campagne per app possono importare eventi Firebase. Inoltre, questo processo aiuta Google Ads a migliorare le campagne per app consentendogli di acquisire maggiori informazioni sui segmenti di pubblico.

1. Vai a Firebase Settings (Impostazioni di Firebase) facendo clic sul pulsante accanto a Project Overview (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 su Firebase è terminata.

Accedi 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 analisi che sono contrassegnati come conversioni. Trova l'evento event1 che abbiamo implementato in precedenza.

5. Seleziona 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 evento event1.

10. Lancio di campagne per app per azione con eventi importati

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

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

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

11. Completa le impostazioni della campagna.

11. Complimenti

Congratulazioni, hai completato l'integrazione tra Firebase e Google Ads. In questo modo, potrai migliorare il rendimento della tua campagna con gli eventi Firebase importati.

Hai appreso

• Come inizializzare GA4F (Google Analytics for Firebase) in un'app ibrida
• Come creare eventi e parametri personalizzati in una 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

• Usa Analytics in un componente WebView - Firebase - Google

Firebase e Configurazione di Google Ads

• Eventi personalizzati Google Ads con Google Analytics per Firebase - Android
• Lancio di campagne Google Ads con gli eventi personalizzati di Google Analytics e Flutter