Je partage ce guide sur l'utilisation de Google Analytics avec la propriété Universal Analytics sur ReactJS . Une petite introduction liée à deux produits dont nous allons parler :

ReactJS est une bibliothèque Javascript SPA (application à page unique) pour la création et la maintenance d'interfaces utilisateur, ce qui signifie que l'application écrira dynamiquement la page actuelle en fonction des nouvelles données du serveur ou de l'état local, au lieu de la méthode par défaut du navigateur chargeant de nouvelles pages entières comme dans demande multi-pages.

Google Analytics (GA) est un outil d'analyse de Google qui vous permet de suivre facilement les informations importantes des utilisateurs lorsqu'ils visitent votre site Web. Au quatrième trimestre 2020, Google a introduit une nouvelle propriété Google Analytics 4 (GA4) avec des capacités de suivi plus avancées et un meilleur tableau de bord. Pour cet article, nous explorons spécifiquement la propriété Universal Analytics (UA), qui est une ancienne version de Google Analytics.

Préparation

Tout d'abord, vous devez obtenir l'ID de suivi de votre site Web en suivant ces étapes simples.

1. Accédez au site Web de Google Analytics et si vous êtes un premier utilisateur, vous serez invité à créer un compte, y compris vos paramètres de partage de données.
2. Créez une nouvelle propriété — n'oubliez pas de sélectionner l'option de propriété Universal Analytics. Vous avez la possibilité de créer des propriétés UA, GA4 ou les deux.
3. Remplissez les informations restantes pour configurer votre compte et vos propriétés ; puis vous obtiendrez l'ID de suivi (par exemple UA-123456789–1).

Lorsque j'utilise la propriété UA sur Google Analytics et ReactJS, je suis plus à l'aise avec la bibliothèque React-GA . Au moment de la rédaction de cet article, il a plus de 450 000 téléchargements hebdomadaires sur NPM. Vous pouvez facilement l'installer en exécutant ce code sur votre application ReactJS.

# npm
npm i -s react-ga
# yarn
yarn add react-ga

Mise en œuvre

Il existe deux implémentations simples de GA que vous pouvez utiliser sur votre site Web.

Suivi des pages vues - vous pouvez suivre votre parcours d'utilisateur lorsqu'il visite votre site Web pour en savoir plus sur certains entonnoirs d'objectifs en utilisant simplement cette ligne de code sur componentDidMount de chaque page que vous souhaitez suivre.

ReactGA.pageview(window.location.pathname);

Suivi des événements - vous pouvez suivre les événements importants sur votre site Web qui correspondent aux objectifs de votre campagne, par exemple une commande réussie, le partage social, le clic sur certains boutons, etc.

Comment savez-vous que vous avez correctement implémenté Google Analytics sur votre application ReactJS ?

Simple ! Il vous suffit d'ouvrir votre application ReactJS ou de l'exécuter localement et d'ouvrir l'onglet Présentation du rapport en temps réel sur le tableau de bord GA. Vous verrez que vous avez actuellement un visiteur actif sur votre site Web, c'est-à-dire VOUS !

…et voilà !

C'est ça ! Vous avez activé avec succès GA pour suivre les pages vues visitées par votre utilisateur et les événements importants que vous souhaitez suivre sur votre application ReactJS.

Si vous souhaitez en savoir plus sur Google Analytics, je vous suggère de l'apprendre à partir de la source suivante :

Académie Google Analytics : Google Analytics pour les débutants

Académie Google Analytics : Google Analytics avancé

Académie Google Analytics : Google Analytics pour les utilisateurs expérimentés

J'espère que ce court article pourra répondre à certaines de vos questions ou susciter votre intérêt pour apprendre à mettre en œuvre des analyses sur votre site Web. Merci d'avoir lu mon article !