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 des événements d'une page Web dans WebView vers un code natif afin que GA4F puisse les suivre.

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

Points abordés

• Initialiser Google Analytics pour Firebase dans une application hybride
• Créer des événements et des paramètres personnalisés sur 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 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. Le répertoire "android" est destiné à l'application Android, tandis que le 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 donnez-lui 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 de 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 à 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".

L'écran "Ajouter Firebase à votre application Android" s'affiche alors, comme ci-dessous.

2. Vous trouverez le nom de package Android (par exemple, com.xxxx.myproject) dans 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 ne fait pas partie 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-le et collez-le 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, pour lire le fichier google-services.json généré par Firebase, vous avez besoin du plug-in Gradle des services Google.
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 nouvelle 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 à présent terminée.

5. Développer une interface Web Analytics sur le Web et consigner 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 l'application Android.

Dans cette partie, nous allons examiner le code à 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'endroit où vous souhaitez suivre l'événement dans le fichier HTML, comme ci-dessous.

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

6. Héberger un répertoire Web pour obtenir l'URL d'une 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 utiliserons le service d'hébergement Firebase pour plus de commodité.

• Dans votre terminal, accédez au répertoire Web (par exemple, cd web), puis exécutez les commandes suivantes :
• npm install -g firebase-tools

Cette commande installe la CLI Firebase.

• firebase login
• firebase init
• Lorsque vous êtes invité à choisir la fonctionnalité que vous souhaitez configurer, sélectionnez "Hébergement".
• Sélectionnez 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 : déployer sur Firebase Hosting.

• Après avoir obtenu l'URL de la page Web, accédez au projet de votre application dans Android Studio et insérez l'URL Web que vous venez de créer dans WebView, comme indiqué ci-dessous.

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

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

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

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

Pour voir le code complet, veuillez vous référer à l'exemple de code que vous avez téléchargé depuis GitHub lors de l'étape "Configuration".

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 "LOG EVENT 1" dans votre application. Si votre code fonctionne correctement, le journal devrait ressembler à ce qui suit.

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

Ensuite, filtrez l'événement de plate-forme Android à l'aide de la fonction "Ajouter une comparaison".

Si votre code est correctement implémenté, les événements de l'application Android s'affichent dans l'onglet "Temps réel".

Dans quelques heures, vous pourrez voir vos événements consignés dans l'onglet "Événements" de la console Firebase. Il suffit de cliquer sur l'onglet Événements dans la section "Analytics" de la console Firebase. Vous pouvez également vérifier les valeurs de l'événement event1 en cliquant simplement sur celui-ci.

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 figure dans l'onglet "Conversion", c'est qu'il a bien été marqué en tant que conversion. Google Ads peut désormais importer cet événement depuis 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 des campagnes pour applications avec des événements d'action. Commencez par associer Firebase à Google Ads. Une fois cette association effectuée,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, vous verrez Google Ads et un bouton Associer. 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. Vérifiez s'il est bien marqué comme 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. Cochez l'action, cliquez sur Importer,puis sur Continuer.

Après avoir défini event1 comme action de conversion, vous pouvez lancer des campagnes pour applications axées sur l'action 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 "Campagne" de votre compte actuel et créez une campagne en cliquant sur le bouton +. Cliquez sur [Nouvelle campagne], puis sur Continuer.
7. Lancez une campagne de promotion d'applications et sélectionnez 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. Votre événement personnalisé figure dans la liste affichée. Définissez un coût par action cible et complétez les autres options.

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 Google Analytics pour Firebase dans une application hybride
• Créer des événements et des paramètres personnalisés sur 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

Configuration de Firebase et Google Ads

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