Monitora gli eventi in una WebView con Google Analytics

1. Introduzione

Ultimo aggiornamento: 22/12/2021

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 monitorarli.

Utilizzeremo l'app ibrida per Android di esempio 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 in una pagina web
• Come inoltrare gli eventi di 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 azioni.

Che cosa ti serve

• Android Studio 3.6 o versioni successive
• Account Firebase

2. Preparazione

Ottieni il codice

Le guide di Firebase forniscono il codice di esempio necessario per questo progetto in un repository GitHub.

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

3. Crea e configura un progetto Firebase

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

Crea 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.

2. Fai clic sulle opzioni di creazione del progetto. Accetta i Termini di Firebase se richiesto. Devi attivare Google Analytics per questo progetto, poiché hai bisogno degli eventi 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 di Firebase per Android

Configurare Android

1. Nella console Firebase, seleziona Panoramica del progetto nel riquadro di navigazione a sinistra, quindi fai clic sul pulsante Android nella sezione "Inizia aggiungendo Firebase alla tua app".

Viene visualizzata la finestra di dialogo mostrata nella schermata seguente.

2. Il valore importante da fornire è il nome del pacchetto Android, che otterrai utilizzando il passaggio successivo.

Suggerimento: leggi l'articolo Impostare l'ID applicazione per saperne di più sugli ID pacchetto e applicazione.

3. Nella directory dell'app, apri il file android/app/src/main/AndroidManifest.xml.
4. Nell'elemento manifest, trova il valore della stringa dell'attributo package. Questo valore è il nome del pacchetto Android (ad esempio com.yourcompany.yourproject). Copia questo valore.
5. Nella finestra di dialogo Firebase, incolla il nome del pacchetto copiato nel campo Android package name.
6. Non abbiamo bisogno della chiave SHA-1, a meno che tu non preveda di utilizzare Accedi con Google o Firebase Dynamic Links (tieni presente che non fanno parte di questo codelab). Se prevedi di importare i dati in_app_purchase da Google Play, dovrai impostare la chiave in un secondo momento.
7. Fai clic su Registra app.
8. Continuando in Firebase, segui le istruzioni per scaricare il file di configurazione google-services.json.

9. Vai alla directory dell'app, quindi sposta il file google-services.json (che hai appena scaricato) nella directory android/app.
10. Torna alla console Firebase, salta i passaggi rimanenti e torna alla pagina principale della console.
11. Infine, è necessario il plug-in Gradle dei servizi Google per leggere il file google-services.json generato da Firebase.
12. Nell'IDE o nell'editor, apri android/app/build.gradle, poi aggiungi la seguente riga come ultima riga del file:

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

13. Apri android/build.gradle, poi 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 in quella per Android.

In questa parte, vediamo quale codice devi inserire nel web.

Innanzitutto, crea un file JavaScript da utilizzare nel 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 nel codice riportato di seguito.

Chiama questa funzione dove vuoi monitorare l'evento come di seguito.

Quando l'evento viene attivato nel componente WebView in Android, viene chiamato "window.AnalyticsWebInterface" e l'evento viene collegato all'app nativa.

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

Prima di chiamare una pagina web all'interno di WebView nella tua app, devi avere un URL della pagina web. Esistono molti metodi per ospitare pagine web, ma in questo codelab ti guideremo all'utilizzo del servizio di hosting Firebase solo per comodità.

• Nel terminale, inserisci la directory web (ad es. cd web) ed esegui i seguenti comandi:
• npm install -g firebase-tools: 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 la tua app per Android.
• Accetta i valori predefiniti per tutti i prompt rimanenti.
• firebase deploy --only hosting - deploy to Firebase hosting.

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

Per monitorare gli eventi in una webview con Google Analytics, devi inserire il codice sia nel web che in Android. In questa parte, vediamo quale codice devi inserire nell'app per Android.

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

Successivamente, devi aggiungere l'interfaccia JavaScript nell'attività che chiama la webview come di seguito.

Per visualizzare l'intero codice, consulta il codice campione scaricato nel passaggio "Configurazione".

8. Controllare ed eseguire il debug degli eventi

Per il debug degli eventi, puoi utilizzare il seguente codice nel terminale di Android Studio dopo aver connesso 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

Se il codice funziona correttamente, vedrai il log come di seguito.

Se vuoi controllare nella console Firebase, puoi utilizzare anche la scheda In tempo reale. Vai alla console Firebase e fai clic sulla scheda Realtime 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 qualche ora, potrai visualizzare gli eventi registrati nella scheda Eventi della console Firebase. Basta fare clic sulla scheda Eventi nella sezione Analytics della console Firebase. Puoi anche controllare i valori all'interno dell'evento event1 semplicemente facendo clic sull'evento.

Contrassegna event1 come conversione spostando il pulsante di attivazione/disattivazione Contrassegna come conversione verso destra.

Se l'evento si trova nella scheda Conversione, significa che è stato contrassegnato correttamente come conversione. Google Ads ora potrà importare questo evento da Firebase.

Per il debug, utilizza Firebase DebugView. Per maggiori dettagli, vedi Debug dell'evento.

9. Importazione degli eventi di Analytics in Google Ads

Una volta completata la configurazione di Firebase-Flutter, 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 Firebase. Questo processo aiuta anche Google Ads a migliorare le campagne per app, consentendogli di saperne di più sui segmenti di pubblico.

1. Vai a Impostazioni 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 è terminata.

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 analisi 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 azioni che possono avere come target gli utenti che probabilmente attiveranno gli eventi event1 più di 5 volte.

10. Lancio di campagne per azioni nell'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 ora.

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

8. Trova la tua app digitando il nome, il nome del pacchetto o il publisher.
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 altre opzioni.

11. Completa le impostazioni della campagna.

11. Complimenti

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

Cosa hai imparato

• Come inizializzare GA4F (Google Analytics for Firebase) nell'app ibrida
• Come creare eventi e parametri personalizzati in una pagina web
• Come inoltrare gli eventi di 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 azioni.