Mobile

Mettre en place un plan de marquage GA4 + Firebase pour votre application mobile

Un plan de marquage GA4 + Firebase pour les applications React Native : noms d'événements, paramètres, événements clés, consentement, débogage et rapports qui répondent à de vraies questions.

Hamza El Haissouf

4 min de lectureMis à jour le FR

La plupart des applications mobiles mesurent trop ou trop peu : chaque appui sur l'écran, ce qui noie le signal utile, ou seulement les installations et les plantages, ce qui ne dit rien de la valeur que les utilisateurs en tirent. Un plan de marquage règle ce problème en partant des questions auxquelles l'entreprise a besoin de réponses, puis en listant les quelques événements qui y répondent.

Voici la méthode que j'utilise pour les applications React Native avec Firebase Analytics, qui alimente Google Analytics 4.

Partir des questions, pas des événements

Notez cinq à dix questions avant de nommer le moindre événement. Par exemple :

  • D'où viennent les utilisateurs qui restent ?
  • Quelle part des nouveaux utilisateurs termine l'onboarding ?
  • Quelle fonctionnalité les utilisateurs fidèles utilisent-ils pendant leur première semaine ?
  • À quelle étape les gens abandonnent-ils le parcours de réservation ou d'achat ?

Chaque événement du plan doit aider à répondre à l'une de ces questions. Sinon, laissez-le de côté.

Utiliser ce que Firebase fournit déjà

Firebase enregistre automatiquement certains événements, comme first_open, session_start, user_engagement et app_update. En React Native, les changements d'écran doivent généralement être enregistrés à la main depuis votre bibliothèque de navigation (voir plus bas).

Ensuite, privilégiez les événements recommandés par Google (sign_up, login, search, select_content, share, begin_checkout, purchase…) plutôt que des noms personnalisés : GA4 comprend leurs paramètres et les utilise dans ses rapports standard.

Le plan d'événements

Niveau 1 : événements de base, dès le premier jour

ÉvénementParamètresQuand
screen_viewscreen_name, screen_classÀ chaque navigation
sign_upmethodCompte créé
loginmethodConnexion réussie
onboarding_completesteps_completedDernière étape de l'onboarding

Niveau 2 : engagement

ÉvénementParamètresQuand
searchsearch_term, results_countL'utilisateur lance une recherche
select_contentcontent_type, item_idOuvre un élément
sharecontent_type, item_id, methodPartage un contenu
favorite_add / favorite_removeitem_idEnregistre ou retire un élément

Niveau 3 : événements métier

ÉvénementParamètresQuand
contact_requestitem_id, methodContacte l'entreprise
begin_checkoutvalue, currency, itemsCommence un paiement
purchasetransaction_id, value, currency, itemsPaiement confirmé
subscription_startplan, value, currencyAbonnement confirmé

Dans GA4, marquez les deux ou trois événements qui représentent un succès comme événements clés, le nom que Google utilise désormais pour les conversions.

Règles de nommage et limites

  • snake_case : lettres, chiffres et tirets bas, en commençant par une lettre.
  • Noms d'événements et de paramètres jusqu'à 40 caractères ; valeurs de paramètres jusqu'à 100 caractères.
  • Jusqu'à 500 noms d'événements distincts par application, 25 paramètres par événement et 25 propriétés utilisateur.
  • Les noms commençant par firebase_, google_ ou ga_ sont réservés.
  • Pour voir un paramètre personnalisé dans les rapports GA4, enregistrez-le comme dimension personnalisée ou métrique. Sinon, il est collecté mais pas affiché.

N'envoyez jamais de données personnelles (adresse e-mail, numéro de téléphone, nom complet) dans les événements ou les propriétés utilisateur : les règles de Google l'interdisent, et vous n'en avez pas besoin pour répondre aux questions ci-dessus.

Mise en œuvre en React Native

npm install @react-native-firebase/app @react-native-firebase/analytics
import { getAnalytics, logEvent, setUserProperty } from '@react-native-firebase/analytics';

const analytics = getAnalytics();

// Un événement recommandé avec ses paramètres
await logEvent(analytics, 'select_content', {
  content_type: 'service',
  item_id: 'haircut_45min',
});

// Les propriétés utilisateur décrivent l'utilisateur, pas une action
await setUserProperty(analytics, 'plan', 'free');

Enregistrez les vues d'écran une seule fois, depuis le conteneur de navigation, plutôt que dans chaque écran :

<NavigationContainer
  ref={navigationRef}
  onStateChange={async () => {
    const route = navigationRef.getCurrentRoute();
    if (route && route.name !== lastRouteName.current) {
      lastRouteName.current = route.name;
      await logEvent(analytics, 'screen_view', { screen_name: route.name, screen_class: route.name });
    }
  }}
>

Vérifier chaque événement avant la publication

  • Android : lancez adb shell setprop debug.firebase.analytics.app <your.package.name>, puis ouvrez DebugView dans GA4 (dans Admin).
  • iOS : ajoutez -FIRDebugEnabled aux arguments de lancement de votre schéma Xcode.
  • Comparez ce qui arrive avec le plan : noms, paramètres, valeurs. Corrigez les erreurs avant la publication : renommer un événement plus tard coupe votre historique en deux.

Consentement

Si une partie de vos utilisateurs se trouve dans l'UE, demandez leur consentement avant que la mesure d'audience ne démarre. Firebase prend en charge le mode Consentement sur mobile : définissez un état par défaut, puis mettez-le à jour depuis votre écran de consentement (setConsent dans @react-native-firebase/analytics).

Des rapports qui répondent aux questions

  1. Acquisition : d'où viennent les utilisateurs fidèles, avec des paramètres UTM sur les liens de vos campagnes.
  2. Activation : une exploration en entonnoir de first_open à onboarding_complete jusqu'au premier événement clé.
  3. Engagement : quels événements les utilisateurs fidèles déclenchent pendant leur première semaine.
  4. Rétention : l'exploration de cohortes, par semaine de première ouverture.
  5. Revenus : purchase et subscription_start par source et par formule.

Pour une analyse plus poussée, reliez Firebase à BigQuery : vous obtenez chaque événement brut et pouvez le croiser avec vos propres données.

Garder le plan dans un seul tableur

Une ligne par événement : nom, déclencheur, paramètres avec des exemples de valeurs, la question à laquelle il répond, plateforme et statut (prévu, implémenté, vérifié). C'est le document à partir duquel les développeurs travaillent, et celui auquel les analystes font confiance.


Vous voulez un plan de marquage pour votre application ? Réservez un appel de 30 minutes ou découvrez mon service de développement React Native.

Portrait de Hamza El Haissouf

Hamza El Haissouf

Développeur full-stack depuis 6 ans · Maroc

Je conçois des assistants WhatsApp et des sites web pour les cliniques privées et les entreprises de logistique. À distance, en français et en anglais.

Voir les projetsÀ proposLinkedIn

À lire aussi