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

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 votre environnement de développement préféré. Nous allons utiliser deux répertoires : android, 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

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 s'affiche sur l'écran suivant.

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 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 examiner le code que vous devez mettre sur le Web.

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

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

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

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, mais dans cet atelier de programmation, nous allons vous expliquer comment utiliser le service d'hébergement Firebase 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 : cette commande permet d'installer la CLI Firebase.
• 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.

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

Pour suivre les événements dans une WebView avec Google Analytics, vous devez insérer le code à la fois sur le Web et dans Android. Dans cette partie, nous allons voir quel code vous devez insérer dans votre application Android.

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é dans la section "Configuration" é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

Si votre code fonctionne correctement, le journal s'affiche 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.

Marquez event1 comme conversion en faisant glisser le bouton bascule 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-Flutter 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. 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 "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