Suivre des événements dans une WebView avec Google Analytics pour Firebase

1. Introduction

Dernière mise à jour:25/02/2022

Objectifs de l'atelier

Dans cet atelier de programmation, vous allez apprendre à transférer les événements d'une page Web dans WebView vers un code natif afin que GA4F puisse suivre les événements.

Nous utiliserons l'exemple d'application Android hybride, qui appelle une page Web à l'aide de WebView.

Points abordés

• Initialiser GA4F (Google Analytics pour Firebase) dans une application hybride
• Créer des événements et des paramètres personnalisés dans une page Web
• Transférer les événements d'une page Web dans WebView vers un code natif
• Comment déboguer
• Importer des événements et les utiliser pour des campagnes d'action

Prérequis

• Android Studio version 3.6 ou ultérieure
• Compte Firebase

2. Configuration

Obtenir le code

Le guide officiel de Firebase fournit l'exemple de code dans GitHub. Nous en avons besoin pour ce projet.

Pour commencer, vous devez télécharger le code et l'ouvrir dans l'environnement de développement de votre choix. Nous allons utiliser deux répertoires : "android" et "web". Android est destiné aux applications Android et au répertoire "web" est destiné à une page Web qui sera appelée par l'application via WebView.

3. Créer et configurer un projet Firebase

Pour commencer à utiliser Firebase, vous devez créer et configurer un projet Firebase.

Créer un projet Firebase

1. Connectez-vous à Firebase.

Dans la console Firebase, cliquez sur "Ajouter un projet" (ou "Créer un projet"), puis nommez votre projet Firebase "Webview-test-codelab" ou choisissez le nom de votre choix.

2. Cliquez sur les options souhaitées. Si vous y êtes invité, acceptez les conditions d'utilisation de Firebase. Nous vous conseillons d'activer Google Analytics pour ce projet, car vous aurez besoin d'événements Google Analytics pour suivre les événements d'action et analyser les conversions.

Pour en savoir plus sur les projets Firebase, consultez Comprendre les projets Firebase.

4. Configuration Firebase pour Android

Configurer Android dans la console Firebase

1. Sur la page d'accueil de la console Firebase, vous pouvez cliquer sur l'icône Android, comme ci-dessous.

Vous pouvez également accéder à la page Vue d'ensemble du projet dans la barre de navigation de gauche, puis cliquer sur le bouton Android sous "Lancez-vous en ajoutant Firebase à votre application".

La fenêtre "Ajouter Firebase à votre application Android" s'affiche. comme ci-dessous.

2. Le nom du package Android (par exemple, com.xxxx.myproject) se trouve dans le répertoire android/app/src/main/AndroidManifest.xml du répertoire de votre application.

package="com.xxxx.myproject"

3. La clé SHA-1 n'est pas nécessaire ici. Cette clé n'est nécessaire que si vous souhaitez utiliser Google Sign In ou Firebase Dynamic Links ou importer des données in_app_purchase depuis Google Play, ce qui n'est pas le sujet de cet atelier de programmation.
4. Cliquez sur Register App (Enregistrer l'application).
5. Téléchargez le fichier de configuration google-services.json dans la console Firebase, puis copiez et collez ce fichier dans le répertoire android/app de votre projet d'application.
6. Retournez dans la console Firebase, ignorez les étapes restantes, puis revenez à la page principale de la console Firebase.
7. Enfin, vous avez besoin du plug-in Gradle des services Google pour lire le fichier google-services.json généré par Firebase.
8. Dans votre IDE ou éditeur, ouvrez android/app/build.gradle, puis ajoutez ce qui suit en dernière ligne du fichier :

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

13. Ouvrez android/build.gradle. Ajoutez ensuite une dépendance dans la balise buildscript.

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

14. Si votre application est toujours en cours d'exécution, fermez-la et recompilez-la pour que Gradle puisse installer la dépendance.

La configuration de votre application pour Android est terminée.

5. Développez une interface Web Analytics sur le Web et consignez des événements personnalisés

Pour suivre les événements dans une WebView avec Google Analytics, vous devez insérer le code dans l'application Web et dans l'application Android.

Dans cette partie, nous allons voir quel code vous devez insérer dans la page Web.

Commencez par créer un fichier JavaScript à utiliser dans un fichier html. Dans l'exemple de code, le fichier js est nommé index.js. Vous devez créer la fonction "logEvent" pour appeler "AnayticsWebInterface" pour Android et "messageHander" pour iOS, comme dans le code ci-dessous.

Appelez cette fonction là où vous souhaitez suivre l'événement dans le fichier HTML, comme ci-dessous.

Lorsqu'un événement est déclenché dans la WebView de l'application Android, "window.AnalyticsWebInterface" est appelé et transmet l'événement au code WebInterface de l'application.

6. Répertoire Web hôte permettant d'obtenir l'URL de la page Web

Avant d'appeler une page Web dans WebView dans votre application, vous avez besoin d'une URL de page Web. Il existe de nombreuses méthodes pour héberger des pages web. Dans cet atelier de programmation, nous allons utiliser le service d'hébergement Firebase uniquement pour plus de commodité.

• Dans votre terminal, saisissez le répertoire Web (par exemple, cd web) et exécutez les commandes suivantes:
• npm install -g firebase-tools

la CLI Firebase sera installée.

• firebase login
• firebase init
• Choisissez "Hosting" (Hébergement). lorsqu'il vous est demandé quelle fonctionnalité vous souhaitez configurer.
• Choisissez le projet que vous avez configuré pour votre application Android.
• Acceptez les valeurs par défaut pour toutes les autres invites.
• firebase deploy --only hosting : effectuer le déploiement sur Firebase Hosting.

• Après avoir obtenu l'URL de la page Web, accédez à votre projet d'application dans Android Studio et insérez l'URL Web que vous venez de réaliser à cette étape dans WebView, comme ci-dessous.

7. Développer le code de l'interface dans une application Android

Pour suivre les événements dans WebView avec GA4F, vous devez insérer le code à la fois sur le Web et sur Android. Dans cette partie, nous allons examiner le code que vous devez insérer dans l'application Android pour recevoir les événements de la page Web dans WebView.

Créer "AnalyticsWebInterface.java" pour remplacer "AnalyticsWebInterface". . Dans cette classe, vous devez coder @JavascriptInterface pour connecter la fonction logEvent dans le fichier web js, comme ci-dessous.

Ensuite, vous devez ajouter une interface JavaScript dans l'activité qui appelle la WebView, comme ci-dessous.

Pour voir l'intégralité du code, reportez-vous à l'exemple de code que vous avez téléchargé depuis GitHub dans la section "Getting set up" étape.

8. Vérifier et déboguer des événements

Pour déboguer des événements, vous pouvez utiliser le code suivant dans le terminal Android Studio après avoir connecté l'appareil de test ou lancé l'émulateur.

> adb shell setprop debug.firebase.analytics.app [nom du package de l'application]

> adb shell setprop log.tag.FA VERBOSE

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

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

Cliquez sur ENREGISTRER L'ÉVÉNEMENT 1. dans votre application, et si votre code fonctionne bien, vous verrez le journal comme ci-dessous.

Si vous souhaitez vérifier dans la console Firebase, vous pouvez également utiliser l'onglet "Temps réel". Accédez à la console Firebase, puis cliquez sur l'onglet "Temps réel" comme ci-dessous.

Filtrez ensuite les événements de la plate-forme Android à l'aide de l'option "Ajouter une comparaison". .

Les événements de l'application Android s'afficheront dans l'onglet "Temps réel" si votre code est correctement implémenté.

Après quelques heures, vos événements enregistrés s'afficheront dans l'onglet "Événements" de la console Firebase. Il vous suffit de cliquer sur l'onglet Événements dans la section "Analytics" de la console Firebase. Vous pouvez également vérifier les valeurs dans l'événement event1 en cliquant simplement dessus.

Pour importer event1 en tant que conversion dans Google Ads, marquez-le comme conversion en faisant glisser le bouton Marquer comme conversion vers la droite.

Si l'événement se trouve dans l'onglet "Conversions", cela signifie qu'il a bien été marqué comme conversion. Google Ads peut désormais importer cet événement à partir de Firebase.

Pour le débogage, utilisez Firebase DebugView. Pour en savoir plus, consultez la section Événements de débogage.

9. Importer des événements d'analyse dans Google Ads

Une fois la configuration de Firebase terminée, vous pouvez lancer les campagnes pour applications comportant des événements d'action. Commencez par associer Firebase à Google Ads. Si vous associez Firebase à Google Ads,les campagnes pour applications peuvent importer des événements Firebase. Cela permet également à Google Ads d'optimiser les campagnes pour applications en ayant davantage d'informations sur les audiences.

1. Accédez aux paramètres Firebase en cliquant sur le bouton à côté de Vue d'ensemble du projet.
2. Dans l'onglet Intégrations, Google Ads et un bouton Associer s'affichent. Cliquez sur Associer, puis sur Continuer.

3. Sélectionnez un compte Google Ads.

Attention:Si l'événement cible n'est pas marqué comme événement de conversion, Google Ads ne pourra pas l'importer. Assurez-vous que l'événement est correctement marqué en tant que conversion.

La partie dans Firebase est maintenant terminée.

Accédez à Google Ads.

1. Connectez-vous et accédez à Outils et Paramètres > Mesure > "Conversions" pour importer des événements personnalisés en tant que conversions.
2. Cliquez sur le bouton + pour ajouter des actions de conversion.

3. Sélectionnez Propriétés Google Analytics 4 (Firebase), puis cliquez sur Continuer.

4. Vous pouvez consulter tous les événements d'analyse marqués comme conversions. Recherchez l'événement event1 que nous avons implémenté précédemment.

5. Vérifiez l'action, cliquez sur Importer,puis sur Continuer.

Après avoir défini event1 comme action de conversion, vous pouvez lancer des campagnes pour l'action dans une application avec l'événement event1.

10. Lancer des campagnes d'action dans l'application avec des événements importés

Important : Pour réussir le lancement d'une campagne pour applications, vous devez télécharger une application de production dans Google Play. Toutefois, si vous n'êtes pas encore prêt pour la publication, vous pouvez ignorer cette étape pour le moment.

6. Accédez à l'onglet "Campagnes" de votre compte actuel, puis créez une campagne en cliquant sur le bouton +. Cliquez sur [Nouvelle campagne], puis sur Continuer.
7. Lancez une campagne de promotion d'une application avec l'option Installations d'applications.

8. Recherchez votre application en saisissant son nom, le nom du package ou l'éditeur.
9. Dans la section Enchères, sélectionnez Actions dans l'application dans le menu déroulant.
10. Recherchez votre événement personnalisé dans la liste fournie. Définissez le Coût par action cible et configurez les éventuelles options supplémentaires.

11. Terminez la configuration de votre campagne.

11. Félicitations

Félicitations, vous avez intégré Firebase et Google Ads ! Vous allez pouvoir améliorer les performances de votre campagne avec des événements Firebase importés.

Ce que vous avez appris

• Initialiser GA4F (Google Analytics pour Firebase) dans une application hybride
• Créer des événements et des paramètres personnalisés dans une page Web
• Transférer les événements d'une page Web dans WebView vers un code natif
• Comment déboguer
• Importer des événements et les utiliser pour des campagnes d'action

12. Références

Guide officiel

• Utiliser Analytics dans une WebView – Firebase – Google

Firebase et Configuration de Google Ads

• Google Ads avec les événements personnalisés Google Analytics pour Firebase – Android
• Lancer des campagnes Google Ads avec des événements personnalisés Google Analytics et Flutter