Google Analytics Glossario

Aggiungere Google Analytics a Next JS

Image of Iron Brands

Pubblicato il 23 nov 2023 e modificato il 8 apr 2024 da Iron Brands

L'integrazione di Google Analytics (GA) in un'applicazione Next.js consente di tracciare in modo efficiente le interazioni degli utenti sul proprio sito web. Date le capacità di rendering lato server di Next.js, l'approccio è leggermente diverso da quello dei framework solo lato client.

  1. Impostare una proprietà di Google Analytics
  2. Creare un modulo GA
  3. Aggiungere lo script GA all'applicazione
  4. Tracciare le visualizzazioni di pagina
  5. Implementare il tracciamento degli eventi
  6. Test e distribuzione
  7. Considerazioni e buone pratiche
  8. Riflessioni finali

Approfondiamo il processo.

Impostare una proprietà di Google Analytics

Innanzitutto, assicuratevi di avere una proprietà di Google Analytics. In caso contrario, createne una nel vostro account Google Analytics, optando per una proprietà Google Analytics 4 (GA4). Riceverete un "ID di misurazione" (come 'G-XXXXXXXX').

Creare un modulo GA

Creare un modulo JavaScript per GA. Questo modulo gestirà l'inizializzazione e il tracciamento delle visualizzazioni di pagina e degli eventi. Creare un file come lib/ga/index.js:

export const GA_TRACKING_ID = 'YOUR_MEASUREMENT_ID'; export const pageview = (url) => { window.gtag('config', GA_TRACKING_ID, { page_path: url, }); }; export const event = ({ action, category, label, value }) => { window.gtag('event', action, { event_category: category, event_label: label, value: value, }); };

Sostituire YOUR_MEASUREMENT_ID con l'ID di misurazione effettivo.

Aggiungere lo script GA all'applicazione

Nel file _document.js (se non esiste, createlo nella cartella pages ), includete lo script di Google Analytics:

import Document, { Html, Head, Main, NextScript } from 'next/document' import { GA_TRACKING_ID } from '../lib/ga' export default class MyDocument extends Document { render() { return ( <Html> <Head> {/* Global Site Tag (gtag.js) - Google Analytics */} <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`} /> <script dangerouslySetInnerHTML={{ __html: ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${GA_TRACKING_ID}', { page_path: window.location.pathname, }); `, }} /> </Head> <body> <Main /> <NextScript /> </body> </Html> ) } } }

Tracciare le visualizzazioni di pagina

In _app.js, utilizzare la funzione pageview per tracciare le visualizzazioni delle pagine:

import { useEffect } from 'react' import { useRouter } from 'next/router' import * as ga from '../lib/ga' export default function MyApp({ Component, pageProps }) { const router = useRouter() useEffect(() => { const handleRouteChange = (url) => { ga.pageview(url) } router.events.on('routeChangeComplete', handleRouteChange) return () => { router.events.off('routeChangeComplete', handleRouteChange) } }, [router.events]) return <Component {...pageProps} /> }

Implementare il tracciamento degli eventi

Ovunque sia necessario tracciare eventi personalizzati nella propria applicazione, importare la funzione event dal proprio modulo GA e utilizzarla:

import * as ga from '../lib/ga' ga.event({ action: 'submit_form', category: 'Contact', label: 'Contact Form', value: 'User submitted a contact form' })

Test e distribuzione

Testate a fondo l'integrazione, assicurandovi che le visualizzazioni delle pagine e gli eventi siano tracciati come previsto. Distribuire l'applicazione e monitorare la dashboard di Google Analytics.

Considerazioni e buone pratiche

  • Conformità alla privacy: Assicurarsi che l'implementazione sia conforme alle leggi sulla privacy come il GDPR. Ciò potrebbe includere l'aggiunta di meccanismi di consenso dell'utente per il tracciamento.
  • Debug: Utilizzare strumenti come Google Analytics Debugger per Chrome per convalidare la configurazione.
  • Tracciamento lato server e lato client: Fare attenzione a ciò che viene tracciato sul lato server rispetto al lato client nelle applicazioni Next.js.

Riflessioni finali

L'integrazione di Google Analytics in un'applicazione Next.js consente di ottenere informazioni dettagliate sul comportamento degli utenti e sulle prestazioni del sito. Tuttavia, è importante ricordare che Google Analytics può essere complesso e non adatto a tutte le organizzazioni.

Noi di Simple Analytics offriamo una soluzione più semplice e attenta alla privacy, che semplifica il processo di analisi nel rispetto della privacy degli utenti. Date un'occhiata al nostro cruscotto di analisi in tempo reale per verificare di persona.