Comment ajouter Google Analytics à un site web Next.js

L'analyse des données est une nécessité si vous voulez surveiller le nombre de visiteurs de votre site. Il existe différentes méthodes pour ajouter l'analytique à votre tâche, consistant en Google Analytics. C'est un service gratuit ainsi qu'il est raisonnablement simple à établir.

Apprenez exactement comment inclure Google Analytics à votre site Web à l'aide de Next.js, un framework React pour la construction de sites Internet adaptés au référencement.

Mise en place de Google Analytics

Google Analytics fournit des compréhensions jusque dans les actions des individus qui visitent votre site internet. Il vous indique quelles pages web obtiennent la variété de vues et vous donne également des données sur le marché cible comme la zone, l'âge, la passion, ainsi que l'outil qu'ils utilisent. Ces données peuvent vous aider à choisir la direction que votre entreprise doit prendre pour être efficace.

Pour commencer, visitez le tableau de bord analytique et créez également un nouveau compte en vous conformant à ces actions :

  1. Cliquez sur le Créer un compte dans l'onglet admin pour développer un nouveau compte.
  2. Ajoutez un nom de compte sous la zone de configuration du compte.
  3. Créez le foyer analytique en fournissant un nom.
  4. Ajoutez les détails de l'entreprise. Sélectionnez les choix qui s'appliquent à votre site web.
  5. Cliquez sur le bouton Créer pour finir d'établir le foyer.
  6. Cliquez sur flux internet pour spécifier le flux d'informations que Google Analytics doit suivre.
  7. Spécifiez l'URL de votre site web et donnez également un nom au flux d'informations.
  8. Cliquez sur les indications de marquage et obtenez également le script que vous utiliserez sur votre site web.
  9. Copiez l'ID de mesure (le code de suivi) pour l'utiliser plus tard.

Une fois que vous avez obtenu le code de suivi, vous pouvez configurer le projet Next.js.

Voir aussi :  Comment valider les numéros de carte de crédit en utilisant des expressions régulières

Configuration du projet Next.js

Si vous n'avez pas actuellement un projet Next.js configuré, consultez la section Présentation officielle de Next.js pour commencer.

Lorsque vous avez créé la construction de la balise Global website, vous avez obtenu un script comme celui-ci :

Vous devez inclure ce manuscrit à la balise head de votre site web. Dans Next.js, vous utilisez l'élément Script de next/script. Cet élément est une extension de la balise HTML script. Il vous permet de consister des scripts tiers à votre site internet Next.js ainsi que de définir leur méthode de remplissage, améliorant ainsi les performances.

Le site Script Next. js partie propose différentes stratégies de chargement. La stratégie "afterinteractive" convient à un manuscrit analytique. Cela suggère qu'il se chargera certainement après que la page web soit interactive.

Ouvrez le pages/ _ app.js et importez également la partie Script en haut.

Ensuite, personnalisez la déclaration de retour du composant App pour inclure la balise script de Google analytics.

Notez que cette balise est quelque peu différente de celle que Google Analytics fournit. Elle utilise dangereusementSetInnerHTML et comprend également une approche de remplissage. Cependant, ils fonctionnent exactement de la même manière.

N'oubliez pas de remplacer G-XXXXXXX par votre code de surveillance. Il est de même conseillé de conserver le code de suivi dans un fichier .env pour le garder secret.

Ajout de Google Analytics à une application à page unique.

Vous pouvez utiliser la balise script ci-dessus pour un site web ordinaire et en rester là. Néanmoins, pour une application à page unique comme un site internet Next.js, vous devez prendre quelques actions supplémentaires.

Une application monopage (SPA) est un site qui tonne tout le contenu en amont, en réponse à une première demande. Le navigateur internet tonne le contenu de manière dynamique lorsque l'utilisateur clique sur les liens pour naviguer sur le site. Il ne fait pas de demande de page, seulement des modifications d'URL.

Voir aussi :  Comment convertir du HTML en image en JavaScript

C'est différent pour les pages Next.js qui utilisent getServerSideProps, car le navigateur les rend à la demande.

La balise Google fonctionne en enregistrant une vue de page web lorsqu'une toute nouvelle page lots. Ainsi, pour les SPA, la balise Google n'est exécutée qu'une seule fois, lors du chargement initial de la page web. Par conséquent, vous devez enregistrer manuellement la deemande du client de naviguer sur différentes pages.

Voir la dimension de la page unique. Aperçu de Google Analytics pour en savoir plus.

Pour enregistrer à la main les vues des pages Web dans Next.js en utilisant le manuscrit gtag, développez un tout nouveau dossier appelé... lib ainsi que d'inclure un nouveau fichier, gtag. js .

Ensuite, modifiez/ pages/ _ app.js pour utiliser ces fonctions ainsi que pour suivre les vues des pages Web dans le crochet useEffect.

Cet exemple utilise les crochets useRouter ainsi que useEffect pour enregistrer la vue d'une page chaque fois que le client navigue vers une autre page.

Appelez la méthode useRouter de next/router et désignez-la à la variable routeur. Dans le hook useEffect, écoutez l'événement routeChangeComplete sur le routeur. Lorsque l'événement se déclenche, enregistrez une vue de page Web en appelant la fonction handleRouteChange.

L'instruction de retour du hook useEffect se désinscrit de l'événement routeChangeComplete avec la méthode 'off'.

Utiliser Google Analytics pour collecter les données des utilisateurs

Les données sont extrêmement utiles pour prendre de grandes décisions, et l'ajout de Google Analytics à votre site Web est un moyen de les collecter.

Voir aussi :  12 opérations NumPy pour les débutants

Vous pouvez inclure Google Analytics à un travail Next.js en utilisant des crochets pour vous assurer que vous enregistrez toutes les vues de la page Web, même lorsqu'une page fait appel à la direction côté client. Maintenant, vous pouvez voir combien de vues votre site saute sur votre tableau de bord Google Analytics.

Comment intégrer Google Analytics à Nextjs ?

Ajoutez le composant GoogleAnalytics avec le prop trackPageViews défini sur true à votre fichier d'application personnalisé : // pages/_app. js importe {GoogleAnalytics} à partir de "nextjs-google-analytics" ; const App = ({ Composant, pageProps }) => { return ( <>

Comment ajouter une balise Google à Nextjs ?

L'utilisation du gestionnaire de balises Google avec Next js nécessite deux étapes simples.

  • Placez les scripts GTM dans le d'une page partagée.
  • Créer un déclencheur de changement d'historique dans Google Tag Manager (console GTM)

Comment ajouter Google Analytics à mon site Web existant ?

Ajouter un compte

  • Connectez-vous à votre compte Analytics.
  • Cliquez sur Administrateur.
  • Dans la colonne COMPTE, sélectionnez + Créer un compte dans le menu.
  • Cliquez sur Site Web ou Application mobile.
  • Sous Configurer votre compte :
  • Sous Configuration de votre propriété, saisissez le nom du site Web ou de l'application.
  • Sélectionnez une catégorie d'industrie.
  • Sélectionnez le fuseau horaire de rapport.

Comment Google Analytics fonctionne-t-il avec JavaScript ?

Comment fonctionne Google Analytics ? Google Analytics acquiert les données utilisateur de chaque visiteur du site Web grâce à l'utilisation de balises de page. Une balise de page JavaScript est insérée dans le code de chaque page. Cette balise s'exécute dans le navigateur Web de chaque visiteur, collectant des données et les envoyant à l'un des serveurs de collecte de données de Google.

Cliquez pour évaluer cet article !
[Total: Moyenne : ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.