Aggiungere Google Analytics a Preact

L'integrazione di Google Analytics (GA) con un'applicazione Preact consente di tracciare le interazioni degli utenti e di raccogliere dati significativi. Preact, essendo un'alternativa leggera a React, segue schemi simili per l'integrazione di GA.

Vediamo i passaggi per aggiungere GA a un'applicazione Preact.

Impostare una proprietà di Google Analytics

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

Installare una libreria GA

Per un'applicazione Preact, è possibile utilizzare le stesse librerie di React. Una scelta popolare è react-ga:

npm install react-ga

Inizializzare GA nell'applicazione

Nel componente principale di Preact (di solito index.js o App.js), inizializzate GA usando il vostro ID di misura:

import ReactGA from 'react-ga'; ReactGA.initialize('YOUR_MEASUREMENT_ID'); const App = () => { ReactGA.pageview(window.location.pathname + window.location.search); // Il resto del componente dell'applicazione... }

Sostituire YOUR_MEASUREMENT_ID con il proprio ID di misurazione GA.

Tracciare le visualizzazioni di pagina e gli eventi

Le applicazioni Preact sono in genere applicazioni a pagina singola (SPA), quindi è necessario tracciare manualmente le visualizzazioni di pagina sui cambiamenti di percorso. Se si utilizza un router come preact-router, è possibile farlo:

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

Per tracciare gli eventi (come i clic sui pulsanti), utilizzare il metodo ReactGA.event:

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

Testare l'integrazione

Distribuire l'applicazione e testare l'integrazione. Controllare la dashboard di Google Analytics per verificare che i dati siano acquisiti correttamente. Per il debug è possibile utilizzare l'estensione di Google Analytics Debugger per Chrome.

Considerazioni e buone pratiche

Conformità alla privacy: Assicurarsi che l'implementazione sia conforme alle leggi sulla privacy come il GDPR, in particolare per quanto riguarda l'uso dei cookie e il consenso degli utenti.
Tracciamento degli eventi personalizzati: Sfruttate GA per tracciare gli eventi personalizzati che sono significativi per la vostra applicazione.
Debug e verifica: È essenziale testare a fondo e fare il debug della configurazione di tracciamento per garantire una raccolta accurata dei dati.

Riflessioni finali

L'aggiunta di Google Analytics alla vostra applicazione Preact è un ottimo modo per comprendere il comportamento degli utenti e migliorare le prestazioni dell'applicazione. Tuttavia, Google Analytics può essere eccessivamente complesso per molte organizzazioni.

Noi di Simple Analytics offriamo un'alternativa più semplice e attenta alla privacy, fornendo un'interfaccia più facile per ottenere le informazioni necessarie, nel rispetto della privacy degli utenti. Date un'occhiata al nostro cruscotto di analisi in tempo reale per verificarlo di persona.

Google Analytics Glossario