L'analyse de données est indispensable si vous souhaitez suivre le nombre de visiteurs de votre site Web. Vous pouvez ajouter des analyses à votre projet de différentes manières, y compris Google Analytics. C'est un service gratuit et relativement simple à mettre en place.
Découvrez comment ajouter Google Analytics à votre site à l'aide de Next.js, un framework React permettant de créer des sites Web optimisés pour le référencement.
Configuration de Google Analytics
Google Analytics fournit des informations dans le comportement des personnes visitant votre site Web. Il vous indique quelles pages obtiennent le nombre de vues et vous donne des données d'audience telles que l'emplacement, l'âge, les intérêts et l'appareil qu'ils utilisent. Ces données peuvent aider à prendre des décisions sur la direction que votre entreprise doit prendre pour réussir.
Pour commencer, rendez-vous sur tableau de bord analytique et créez un nouveau compte en suivant ces étapes :
- Clique le Créer un compte bouton dans l'onglet admin pour créer un nouveau compte.
- Ajoutez un nom de compte dans la section Configuration du compte.
- Créez la propriété d'analyse en fournissant un nom.
- Ajoutez les détails de l'entreprise. Sélectionnez les options qui s'appliquent à votre site Web.
- Clique le Créer bouton pour terminer la configuration de la propriété.
- Cliquez sur le flux Web pour spécifier le flux de données que Google Analytics doit suivre.
- Spécifiez l'URL de votre site Web et donnez un nom au flux de données.
- Cliquez sur les instructions de balisage et obtenez le script que vous utiliserez sur votre site Web.
- Copiez l'ID de mesure (le code de suivi) pour l'utiliser ultérieurement.
Une fois que vous avez obtenu le code de suivi, vous pouvez configurer le projet Next.js.
Configuration du projet Next.js
Si vous n'avez pas encore configuré de projet Next.js, consultez le Guide officiel Next.js pour commencer.
Lorsque vous avez créé la propriété Global site tag, vous avez obtenu un script comme celui-ci :
<!-- Balise Google (gtag.js) -->
<script asynchrone src="https://www.googletagmanager.com/gtag/js? identifiant=G-XXXXXXX"></script>
<scénario>
fenêtre.dataLayer = fenêtre.dataLayer || [] ;
fonctiongtag(){dataLayer.push(arguments);}
gtag('js', nouveauDate());
gtag('configuration', 'G-NHVWK8L97D');
</script>
Vous devez ajouter ce script à la balise head de votre site Web. Dans Next.js, vous utilisez le composant Script de next/script. Ce composant est une extension de la balise de script HTML. Il vous permet d'inclure des scripts tiers sur votre site Web Next.js et de définir leur stratégie de chargement, améliorant ainsi les performances.
Le Script suivant.js Le composant offre différentes stratégies de chargement. La stratégie « afterinteractive » convient à un script d'analyse. Cela signifie qu'il se chargera une fois la page interactive.
importer Scénario depuis "suite/script"
<Script src="" stratégie="aprèsInteractif" />
Ouvrez le pages/_app.js fichier et importez le composant Script en haut.
importer Scénario depuis 'suivant/script'
Ensuite, modifiez l'instruction de retour du composant App pour inclure la balise de script de Google Analytics.
importer '../styles/globals.css'
importer Mise en page depuis '../composants/Mise en page/Mise en page'
importer Scénario depuis 'suivant/script'fonctionMonApp({ Composant, pageProps }) {
retour (
<>
<Stratégie de script ="aprèsInteractif" source="https://www.googletagmanager.com/gtag/js? identifiant=G-XXXXXXX"/>
<Scénario
identifiant='Google Analytics'
stratégie="aprèsInteractif"
dangereusementSetInnerHTML={{
__html: `
fenêtre.dataLayer = fenêtre.dataLayer || [] ;
fonctiongtag(){dataLayer.push(arguments);}
gtag('js', nouveauDate());
gtag('configuration', 'G-XXXXXXX', {
page_path: fenêtre.emplacement.pathname,
});
`,
}}
/>
<Mise en page>
<Composant {...pageProps} />
</Layout>
</>
)
}
exporterdéfaut MonApp
Notez que cette balise est légèrement différente de celle fournie par Google Analytics. Il utilise dangereusement SetInnerHTML et inclut une stratégie de chargement. Cependant, ils fonctionnent de la même manière.
N'oubliez pas de remplacer G-XXXXXXX par votre code de suivi. Il est également conseillé de stocker le code de suivi dans un fichier .env pour le garder secret.
Ajout de Google Analytics à une application monopage
Vous pouvez utiliser la balise de script ci-dessus pour un site Web normal et en rester là. Cependant, pour une application d'une seule page comme un site Web Next.js, vous devez suivre quelques étapes supplémentaires.
UN demande d'une seule page (SPA) est un site Web qui charge tout le contenu à l'avance, en réponse à une demande initiale. Le navigateur charge le contenu de manière dynamique lorsqu'un utilisateur clique sur des liens pour naviguer sur le site. Il ne fait pas de demande de page, seule l'URL change.
Ceci 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 page vue lorsqu'une nouvelle page se charge. Ainsi, pour les SPA, la balise Google n'est exécutée qu'une seule fois, lors du chargement initial de la page. Par conséquent, vous devez enregistrer manuellement les vues lorsque l'utilisateur navigue vers différentes pages.
Voir la mesure d'une seule page Guide Google Analytics pour apprendre plus.
Pour enregistrer manuellement les pages vues dans Next.js à l'aide du script gtag, créez un nouveau dossier appelébibliothèque et ajouter un nouveau fichier, gtag.js.
exporterconstante GA_MESURE_ID = process.env. GA_MESURE_ID ;exporterconstante page vue = () => {
fenêtre.gtag("configuration", GA_MEASUREMENT_ID, {
page_path: URL,
});
};
exporterconstante événement = ({ action, catégorie, étiquette, valeur }) => {
fenêtre.gtag("événement", action, {
event_category: catégorie,
event_label: étiquette,
valeur,
});
};
Ensuite, modifiez /pages/_app.js pour utiliser ces fonctions et suivre les pages vues dans le crochet useEffect.
importer '../styles/globals.css'
importer Mise en page depuis '../composants/Mise en page/Mise en page'
importer Scénario depuis 'suivant/script'
importer { useRouter } depuis 'suivant/routeur' ;
importer { useEffet } depuis "réagir";
importer * comme gtag depuis "../lib/gtag"fonctionMonApp({ Composant, pageProps }: AppProps) {
constante routeur = useRouter();useEffet(() => {
constante handleRouteChange = (url) => {
gtag.pagevue(URL);
};router.events.on("routeChangeComplete", handleRouteChange);
retour () => {
router.events.off("routeChangeComplete", handleRouteChange);
};
}, [routeur.événements]);
retour (
<>
<Stratégie de script ="aprèsInteractif" source="https://www.googletagmanager.com/gtag/js? identifiant=G-XXXXXX"></Script>
<Scénario
identifiant='Google Analytics'
stratégie="aprèsInteractif"
dangereusementSetInnerHTML={{
__html: `
fenêtre.dataLayer = fenêtre.dataLayer || [] ;
fonctiongtag(){dataLayer.push(arguments);}
gtag('js', nouveauDate());
gtag('configuration', 'G-XXXXXX', {
page_path: fenêtre.emplacement.pathname,
});
`,
}}
/>
<Mise en page>
<Composant {...pageProps} />
</Layout>
</>
)
}
exporterdéfaut MonApp
Cet exemple utilise les crochets useRouter et useEffect pour enregistrer une page vue chaque fois que l'utilisateur navigue vers une autre page.
Appelez la méthode useRouter depuis next/router et affectez-la à la variable router. Dans le hook useEffect, écoutez l'événement routeChangeComplete sur le routeur. Lorsque l'événement se déclenche, enregistrez une vue de page en appelant la fonction handleRouteChange.
L'instruction return du hook useEffect désabonne de l'événement routeChangeComplete avec la méthode "off".
Utiliser Google Analytics pour collecter des données utilisateur
Les données sont extrêmement utiles pour prendre de bonnes décisions, et l'ajout de Google Analytics à votre site Web est un moyen de les collecter.
Vous pouvez ajouter Google Analytics à un projet Next.js à l'aide de crochets pour vous assurer d'enregistrer toutes les pages vues même lorsqu'une page utilise le routage côté client. Vous pouvez maintenant voir combien de vues votre site obtient sur votre tableau de bord Google Analytics.
