Lancio di campagne Google Ads con gli eventi personalizzati e Flutter di Google Analytics

1. Introduzione

Ultimo aggiornamento: 25/01/2021

Cosa creerai

In questo codelab imparerai a implementare eventi personalizzati con GA4F e a lanciare campagne per azione tramite Google Ads per l'app Flutter.

Utilizzeremo l'app Flutter predefinita con un semplice widget contatore. Pubblicizzeremo la nostra app per raggiungere potenziali utenti, che probabilmente faranno clic sul widget del contatore.

Cosa imparerai a fare

• Come inizializzare GA4F (Google Analytics for Firebase) in Flutter
• Come creare eventi e parametri personalizzati
• Come importare eventi da Firebase a Google Ads
• Come lanciare campagne per azione con eventi personalizzati

Che cosa ti serve

• Android Studio 3.6 o versioni successive
• Xcode (per il supporto di iOS)
• Account Firebase
• Account Google Ads

2. Avvia un nuovo progetto Flutter

Crea una semplice app Flutter basata su un modello. Modificherai questa app iniziale per questo codelab.

Avvia Android Studio.

Nota:se non vedi Nuovo progetto Flutter come opzione nel tuo IDE, assicurati di aver installato i plug-in per Flutter e Dart.

1. Se non hai progetti aperti, seleziona Avvia una nuova app Flutter dalla pagina di benvenuto. In alternativa, seleziona File > Nuovo > Nuovo progetto Flutter.
2. Seleziona Applicazione Flutter come tipo di progetto e fai clic su Avanti.
3. Verifica che il percorso dell'SDK Flutter specifichi la posizione dell'SDK. Seleziona Installa SDK se il campo di testo è vuoto.
4. Inserisci il nome del progetto e fai clic su Avanti.
5. Utilizza il nome del pacchetto predefinito suggerito da Android Studio e fai clic su Avanti.
6. Fai clic su Fine.
7. Attendi che Android Studio installi l'SDK e crei il progetto.

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 Firebase-Flutter-Ads o qualsiasi altro nome preferisci.

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 specifica della piattaforma (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 Flutter, 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 Flutter, 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 Flutter per Android. Per iOS, ti consigliamo di consultare questo codelab ( Scopri Firebase per Flutter).

5. Configurare Firebase Analytics in Flutter

In questo passaggio, inizierai a utilizzare il pacchetto Firebase Analytics denominato firebase_analytics, che contiene le funzionalità di Firebase Analytics.

Il file pubspec gestisce gli asset per un'app Flutter. In pubspec.yaml, aggiungi firebase_analytics: ^6.2.0 (firebase_analytics 6.2.0 o versioni successive) all'elenco delle dipendenze :

dependencies: 
   flutter: 
      sdk: flutter 
   cupertino_icons: ^0.1.2 
   firebase_analytics: ^6.2.0   # add this line

Mentre visualizzi il file pubspec nella visualizzazione dell'editor di Android Studio, fai clic su Packages get. Il pacchetto viene inserito nel progetto. Nella console dovresti visualizzare quanto segue:

flutter packages get 
Running "flutter packages get" in startup_namer... 
Process finished with exit code 0

L'esecuzione di Pub get genera automaticamente anche il file pubspec.lock con un elenco di tutti i pacchetti inseriti nel progetto e i relativi numeri di versione.

Attenzione:per versioni specifiche di Firebase, java.lang.IllegalArgumentException: Service not registered viene visualizzato durante l'inizializzazione della classe FirebaseAnalytics (vedi problema 1662 di GitHub).

In lib/main.dart, importa il nuovo pacchetto:

import 'package:firebase_analytics/firebase_analytics.dart';

Nella classe MyApp, inizializza l'oggetto FirebaseAnalytics chiamando il costruttore.

class MyApp extends StatelessWidget {
 static FirebaseAnalytics analytics = FirebaseAnalytics();
   ...
}

Ora è tutto pronto per attivare alcuni log degli eventi personalizzati.

6. Registrare eventi personalizzati con Firebase Analytics

Se generassi un nuovo modello nell'app Flutter, vedresti una variabile _counter e il metodo _incrementCounter() all'interno della classe State predefinita. Ora vuoi registrare eventi personalizzati quando il pulsante di incremento viene premuto più di cinque volte da utenti troppo entusiasti. In un secondo momento, lanceremo una campagna per app per attirare potenziali utenti entusiasti.

Innanzitutto, vogliamo passare gli oggetti di analisi che abbiamo inizializzato al widget Stateful. Iniziamo aggiungendo un parametro di analisi al costruttore MyHomePage.

MyHomePage({Key key, this.title, this.analytics}) : super(key: key);

Aggiungerai anche un parametro di analisi quando chiami il costruttore.

home: MyHomePage(
   title: 'Flutter Demo Home Page',
   analytics: analytics,
),

Ora puoi registrare facilmente gli eventi con il metodo logEvent(). Aggiungi il metodo e incrementa la variabile _counter.

void _incrementCounter() {
 setState(() {
   _counter++;

   //add this
   if(_counter > 5) { 
     widget.analytics.logEvent(name: "clicked_counter"); 
   }

 });
}

Ora la tua app è pronta per attivare il log degli eventi personalizzati.

Puoi anche utilizzare metodi predefiniti per attivare gli eventi.

Ora è tutto pronto. In Android Studio, esegui "main.dart".

(Facoltativo) Invio di informazioni aggiuntive a Firebase Analytics utilizzando i parametri

Puoi inviare informazioni aggiuntive tramite i parametri. I parametri personalizzati possono essere registrati per la generazione di report nei report di Analytics. Possono essere utilizzati anche come filtri nelle definizioni dei segmenti di pubblico che possono essere applicati a ogni report. Se la tua app è collegata a un progetto BigQuery, i parametri personalizzati si trovano anche in BigQuery (vedi BigQuery Export per Firebase).

Qui impostiamo il valore _counter come parametro.

void _incrementCounter() {
 setState(() {
   _counter++;

   if(_counter > 5) {
     widget.analytics.logEvent(name: "clicked_counter", parameters: {'count' : _counter});
   }
 });
}

Controllare ed eseguire il debug degli eventi

Dopo qualche ora, potrai visualizzare gli eventi registrati nella console Firebase. Basta fare clic sulla scheda Eventi nella sezione Analytics della console Firebase. Puoi anche controllare i valori all'interno dell'evento clicked_counter semplicemente facendo clic sull'evento.

Contrassegna clicked_counter 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.

7. 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 clicked_counter che abbiamo implementato in precedenza.

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

Dopo aver impostato clicked_counter come azione di conversione, puoi lanciare campagne per azioni che possono avere come target gli utenti che probabilmente attiveranno gli eventi clicked_counter più di 5 volte.

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

9. 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 configurare Firebase Analytics per Flutter
• Come registrare eventi personalizzati con Firebase Analytics nell'app Flutter.
• Come importare gli eventi e utilizzarli per le campagne per azioni.