Google Analytics Glossaire

Ajouter Google Analytics à Preact

Image of Iron Brands

Publié le 23 nov. 2023 et modifié le 7 avr. 2024 par Iron Brands

L'intégration de Google Analytics (GA) à une application Preact vous permet de suivre les interactions des utilisateurs et de recueillir des données utiles. Preact, qui est une alternative légère à React, suit des modèles similaires pour l'intégration de GA.

  1. Configurer une propriété Google Analytics
  2. Installer une bibliothèque GA
  3. Initialiser GA dans votre application
  4. Suivi des pages vues et des événements
  5. Testez votre intégration
  6. Considérations et bonnes pratiques
  7. Réflexions finales

Passons en revue les étapes pour ajouter GA à une application Preact.

Configurer une propriété Google Analytics

Assurez-vous d'avoir une propriété Google Analytics. Si ce n'est pas le cas, créez-en une dans votre compte Google Analytics. Optez pour une propriété Google Analytics 4 (GA4) pour rester à jour. Vous recevrez un "ID de mesure" (comme "G-XXXXXXXXXX").

Installer une bibliothèque GA

Pour une application Preact, vous pouvez utiliser les mêmes bibliothèques que React. Un choix populaire est react-ga:

npm install react-ga

Initialiser GA dans votre application

Dans votre composant principal Preact (généralement index.js ou App.js), initialisez GA en utilisant votre ID de mesure :

import ReactGA from 'react-ga' ; ReactGA.initialize('YOUR_MEASUREMENT_ID') ; const App = () => { ReactGA.pageview(window.location.pathname + window.location.search) ; // Reste du composant de votre application... }

Remplacez YOUR_MEASUREMENT_ID par votre véritable ID de mesure GA.

Suivi des pages vues et des événements

Les applications Preact sont généralement des applications à page unique (SPA), vous devez donc suivre manuellement les pages vues lors des changements d'itinéraires. Si vous utilisez un routeur comme preact-router, vous pouvez le faire :

import { Router } from 'preact-router' ; const handleRouteChange = () => { ReactGA.pageview(window.location.pathname + window.location.search) ; } ; <Router onChange={handleRouteChange}> {/* vos itinéraires */} </Router>

Pour suivre les événements (comme les clics sur les boutons), utilisez la méthode ReactGA.event:

ReactGA.event({ category : 'User', action : 'Clicked the Button', label : 'Click Me Button' }) ;

Testez votre intégration

Déployez votre application et testez l'intégration. Vérifiez le tableau de bord de Google Analytics pour vous assurer que les données sont capturées correctement. Vous pouvez également utiliser l'extension Chrome Google Analytics Debugger pour le débogage.

Considérations et bonnes pratiques

  • Respect de la vie privée: Assurez-vous que votre mise en œuvre est conforme aux lois sur la protection de la vie privée telles que le GDPR, en particulier en ce qui concerne l'utilisation des cookies et le consentement de l'utilisateur.
  • Suivi des événements personnalisés: Tirez parti de GA pour suivre les événements personnalisés qui sont importants pour votre application.
  • Débogage et vérification: Il est essentiel de tester et de déboguer minutieusement votre configuration de suivi afin de garantir la précision de la collecte des données.

Réflexions finales

L'ajout de Google Analytics à votre application Preact est un excellent moyen de comprendre le comportement des utilisateurs et d'améliorer les performances de votre application. Cependant, Google Analytics peut s'avérer trop complexe pour de nombreuses organisations.

Chez Simple Analytics, nous proposons une alternative plus simple et plus respectueuse de la vie privée, offrant une interface plus facile pour obtenir les informations dont vous avez besoin, tout en respectant la vie privée des utilisateurs. Consultez notre tableau de bord analytique en direct pour vous en convaincre.