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

1. Introduction

Dernière mise à jour : 22/12/2021

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

Les documents du guide Firebase fournissent l'exemple de code dont nous avons besoin pour ce projet dans un GitHub.

Pour commencer, vous devez récupérer 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 Firebase pour Android

Configurer Android

1. Dans la console Firebase, sélectionnez Vue d'ensemble du projet dans le menu de navigation de gauche, puis cliquez sur le bouton Android sous "Lancez-vous en ajoutant Firebase à votre application".

La boîte de dialogue ci-dessous s'affiche.

2. Il est important d'indiquer le nom du package Android (voir l'étape suivante pour l'obtenir).

Conseil : Pour en savoir plus sur les ID de package et d'application, consultez l'article Set the application ID (Définir l'ID d'application).

3. Dans le répertoire de votre application, ouvrez le fichier android/app/src/main/AndroidManifest.xml.
4. Dans l'élément manifest, recherchez la valeur de chaîne de l'attribut package (elle correspond au nom du package Android tel que com.yourcompany.yourproject), puis copiez-la.
5. Dans la boîte de dialogue Firebase, collez ce nom de package dans le champ Android package name.
6. La clé SHA-1 n'est pas nécessaire ici, sauf si vous comptez utiliser Google Sign In ou Firebase Dynamic Links (notez que ces fonctionnalités ne sont pas utilisées dans cet atelier de programmation). En revanche, vous devrez la définir plus tard si vous prévoyez d'importer des données in_app_purchase depuis Google Play.
7. Cliquez sur Enregistrer l'application.
8. Dans Firebase, suivez les instructions pour télécharger le fichier de configuration google-services.json.

9. Accédez au répertoire de votre application, puis déplacez le fichier google-services.json (que vous venez de télécharger) dans le répertoire android/app.
10. Retournez dans la console Firebase, ignorez les étapes restantes, puis revenez à la page principale de la console Firebase.
11. Enfin, pour lire le fichier google-services.json généré par Firebase, vous avez besoin du plug-in Gradle des services Google.
12. 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, puis dans la balise buildscript, ajoutez une nouvelle dépendance :

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

Dans cette partie, nous allons examiner le code que vous devez placer sur le Web.

Commencez par créer un fichier JavaScript à utiliser dans le 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, comme ci-dessous.

Lorsque l'événement est déclenché dans la WebView sous Android, "window.AnalyticsWebInterface" est appelé et connecte l'événement à l'application native.

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, mais dans cet atelier de programmation, nous vous guiderons pour utiliser le service Firebase Hosting, simplement pour des raisons pratiques.

• Dans votre terminal, accédez au répertoire Web (par exemple, cd web), puis exécutez les commandes suivantes :
• npm install -g firebase-tools : cela installera 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.

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

Pour suivre les événements dans une WebView avec Google Analytics, vous devez insérer le code à la fois dans le Web et dans Android. Dans cette partie, examinons le code à insérer dans l'application Android.

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 l'intégralité du code, veuillez vous reporter à l'exemple de code que vous avez téléchargé 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

Si votre code fonctionne correctement, le journal s'affiche comme ci-dessous.

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'afficheront 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 marquer l'événement event1 en tant que conversion, faites 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-Flutter 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 d'action qui peuvent cibler les utilisateurs susceptibles de déclencher des événements event1 plus de cinq fois.

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