Introduction
Firebase Analytics, solution gratuite de Google, permet de collecter des données comportementales précises sur vos applications web et mobile sans effort d'infrastructure. En 2026, avec l'essor des PWAs et apps hybrides, elle s'intègre nativement via le SDK Firebase v10+, offrant des rapports en temps réel, segmentation d'audiences et funnel analysis. Contrairement à des outils comme Google Analytics 4 (GA4), Firebase excelle dans les événements customisés et les crash reports, avec une latence minimale (<1s). Ce tutoriel intermediate vous guide pas à pas pour une implémentation vanilla JS : de la configuration console à l'analyse avancée. Vous obtiendrez un tracking robuste, conforme RGPD via consent mode, boostant votre SEO et monétisation. À la fin, analysez 100% de vos sessions en 5 minutes.
Prérequis
- Compte Google gratuit avec accès à la Console Firebase
- Connaissances en HTML/JavaScript (niveau intermediate)
- Éditeur de code (VS Code recommandé)
- Serveur local (extension Live Server pour VS Code ou
npx serve) - Navigateur avec DevTools (Chrome pour Firebase Debugger)
Créer la structure du projet
mkdir firebase-analytics-demo
cd firebase-analytics-demo
npm init -y
npm install --save-dev vite
mkdir src
touch src/index.html src/firebase-config.js src/analytics.js
npm run devCette commande initialise un projet Vite minimal pour servir l'app localement sur http://localhost:5173. Vite assure un hot reload rapide, idéal pour tester les événements Analytics en temps réel. Évitez les serveurs statiques simples qui bloquent les scripts Firebase par CORS.
Configurer le projet Firebase dans la console
- Allez sur console.firebase.google.com et créez un nouveau projet (ex: 'analytics-demo').
- Activez Analytics dans Project Settings > Integrations (gratuit, pas de carte requise).
- Cliquez Web () pour ajouter une app web, nommez-la 'demo-web', activez Firebase Hosting si besoin.
- Copiez l'objet
firebaseConfiggénéré (apiKey, authDomain, etc.). Il ressemble à ceci :{ apiKey: "AIza...", ... }.
Ajouter la configuration Firebase
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.13.0/firebase-app.js';
import { getAnalytics, logEvent } from 'https://www.gstatic.com/firebasejs/10.13.0/firebase-analytics.js';
const firebaseConfig = {
apiKey: "AIzaSyXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "analytics-demo.firebaseapp.com",
projectId: "analytics-demo",
storageBucket: "analytics-demo.firebasestorage.app",
messagingSenderId: "123456789",
appId: "1:123456789:web:abcdef123456",
measurementId: "G-XXXXXXXXXX"
};
const app = initializeApp(firebaseConfig);
export const analytics = getAnalytics(app);
export { logEvent };Ce fichier importe le SDK Firebase v10.13 via CDN (pas d'installation npm pour simplicité vanilla). Remplacez firebaseConfig par vos valeurs de la console. measurementId active Analytics ; sans lui, aucun événement n'est tracké. Piège : Vérifiez le domaine auth pour éviter les erreurs 403.
Initialiser l'app et tracker les vues de page
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Firebase Analytics Demo</title>
<script type="module" src="/src/firebase-config.js"></script>
<script type="module" src="/src/analytics.js"></script>
</head>
<body>
<h1>Demo Firebase Analytics</h1>
<button id="purchase-btn">Acheter (Événement custom)</button>
<button id="login-btn">Se connecter</button>
<p id="status">Analytics prêt</p>
</body>
</html>Page HTML basique avec modules ES pour charger config et analytics. Les boutons déclenchent des événements standards/custom. Ajoutez ?debug_mode=1 à l'URL pour voir les logs en temps réel dans Firebase DebugView. Évitez les scripts inline pour une meilleure maintenabilité.
Implémenter le tracking d'événements
import { analytics, logEvent } from './firebase-config.js';
const statusEl = document.getElementById('status');
const purchaseBtn = document.getElementById('purchase-btn');
const loginBtn = document.getElementById('login-btn');
// Auto-track page view à l'init
logEvent(analytics, 'page_view', {
page_title: document.title,
page_location: window.location.href
});
statusEl.textContent = 'Page view tracké !';
purchaseBtn.addEventListener('click', () => {
logEvent(analytics, 'purchase', {
currency: 'EUR',
value: 29.99,
items: [{ item_id: 'prod_123', item_name: 'Super Gadget' }]
});
statusEl.textContent = 'Achat tracké !';
});
loginBtn.addEventListener('click', () => {
logEvent(analytics, 'login');
statusEl.textContent = 'Connexion trackée !';
});Ce script initialise le tracking automatique des vues de page et attache des événements à des boutons (purchase avec e-commerce params, login standard). Les params respectent le schéma événement standard. Piège : Toujours inclure currency pour monetaryValue ; sinon, les revenus sont ignorés.
Vérifier et analyser les données
Ouvrez votre app sur localhost:5173?debug_mode=1. Dans Firebase Console > Analytics > DebugView, voyez les événements en live (latence 2-5s). Pour prod :
- Realtime : Sessions live.
- Events : Comptez purchase/login.
- Audiences : Créez 'Acheteurs' (purchase >0).
Désactivez debug en prod. Temps de propagation : 24h pour rapports complets.
Définir des propriétés utilisateur
import { getAnalytics, setUserId, setUserProperties } from 'https://www.gstatic.com/firebasejs/10.13.0/firebase-analytics.js';
import { analytics } from './firebase-config.js';
// ID utilisateur anonyme ou authentifié
setUserId(analytics, 'user_12345');
// Propriétés custom (max 25)
setUserProperties(analytics, {
userType: 'premium',
subscription_plan: 'pro_monthly',
country: 'FR'
});
console.log('Propriétés utilisateur définies');Ajoutez ce script après init pour segmenter les users (ex: premium vs free). setUserId persiste cross-sessions ; propriétés custom boostent les audiences. Limite : 25 props/user, strings <100 chars. Intégrez après login Firebase Auth pour réalisme.
Gérer le consent mode RGPD
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('consent', 'default', {
'analytics_storage': 'denied'
});
// Fonction pour accepter (appelée par bouton consent)
function acceptAnalytics() {
gtag('consent', 'update', {
'analytics_storage': 'granted'
});
// Ré-logger événements bloqués si besoin
}
export { acceptAnalytics };Intégrez Google Consent Mode pour RGPD : Analytics bloqué par défaut jusqu'au consent. Appelez acceptAnalytics() sur clic CMP. Compatible Firebase v10+. Piège : Sans cela, 0% opt-in en UE ; testez avec chrome://settings/content/cookies.
Bonnes pratiques
- Événements nommés : Utilisez kebab-case (ex: 'add_to_cart'), max 40 chars, préfixez custom ('app_open').
- Params limités : 25/event, incluez toujours valeur/currency pour e-commerce.
- Sampling : Au-delà 500k users/mois, activez BigQuery export (gratuit 1GB/jour).
- Consent : Implémentez CMP comme above + Google Tag Manager pour multi-tools.
- Performances : Chargez SDK async ; testez avec Lighthouse (Analytics n'impacte pas score).
Erreurs courantes à éviter
- Config incomplète : Oublier
measurementId→ zéro data. Vérifiez dans console Firebase. - Debug oublié : Événements visibles seulement 24h en DebugView ; utilisez pour dev uniquement.
- Événements non-standard : 'click_button' au lieu de 'select_item' perd les rapports prédéfinis.
- Pas de userId : Impossible de tracker cross-device sans.
Pour aller plus loin
- Docs officiels : Firebase Analytics Web
- Intégrez avec Firebase Auth pour userId auto.
- Export BigQuery pour SQL avancé.
- Découvrez nos formations Learni sur Firebase : masterclasses React Native + Analytics.