Google Analytics toevoegen aan Preact

Door Google Analytics (GA) te integreren met een Preact-applicatie kun je gebruikersinteracties bijhouden en inzichtelijke gegevens verzamelen. Preact, een lichtgewicht alternatief voor React, volgt vergelijkbare patronen voor GA-integratie.

Laten we de stappen doorlopen om GA toe te voegen aan een Preact app.

Een Google Analytics-eigenschap instellen

Zorg ervoor dat je een Google Analytics property hebt. Zo niet, maak er dan een aan in je Google Analytics-account. Kies voor een Google Analytics 4 (GA4) eigenschap om up-to-date te blijven. Je krijgt dan een "Measurement ID" (zoals 'G-XXXXXXXXXX').

Installeer een GA-bibliotheek

Voor een Preact-applicatie kun je dezelfde bibliotheken gebruiken als React. Een populaire keuze is react-ga:

npm install react-ga

Initialiseer GA in je applicatie

In je Preact hoofdcomponent (meestal index.js of App.js) initialiseer je GA met je meet-ID:

import ReactGA from 'react-ga'; ReactGA.initialize('YOUR_MEASUREMENT_ID'); const App = () => { ReactGA.pageview(window.location.pathname + window.location.search); // Rest van je app component... }

Vervang YOUR_MEASUREMENT_ID door uw werkelijke GA Measurement ID.

Paginabezoeken en gebeurtenissen bijhouden

Preact applicaties zijn meestal single-page apps (SPA's), dus je moet de page views handmatig bijhouden bij routewijzigingen. Als je een router zoals preact-router gebruikt, kun je dit doen:

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

Gebruik voor het volgen van gebeurtenissen (zoals klikken op een knop) de methode ReactGA.event:

ReactGA.event({categorie: 'Gebruiker', actie: 'Op de knop geklikt', label: 'Klik op mij knop' });

Uw integratie testen

Implementeer uw applicatie en test de integratie. Controleer het Google Analytics-dashboard om er zeker van te zijn dat de gegevens correct worden vastgelegd. U kunt ook de Google Analytics Debugger Chrome-extensie gebruiken om te debuggen.

Overwegingen en best practices

Naleving van privacy: Zorg ervoor dat uw implementatie voldoet aan privacywetten zoals GDPR, vooral met betrekking tot cookiegebruik en toestemming van gebruikers.
Aangepaste gebeurtenissen bijhouden: Gebruik GA om aangepaste gebeurtenissen bij te houden die belangrijk zijn voor uw toepassing.
Debugging en verificatie: Het is essentieel om je trackingopstelling grondig te testen en te debuggen om ervoor te zorgen dat er nauwkeurige gegevens worden verzameld.

Tot slot

Google Analytics toevoegen aan uw Preact applicatie is een geweldige manier om inzicht te krijgen in gebruikersgedrag en de prestaties van uw applicatie te verbeteren. Google Analytics kan voor veel organisaties echter te complex zijn.

Bij Simple Analytics bieden we een eenvoudiger, privacy-gericht alternatief, dat een eenvoudigere interface biedt om de informatie te krijgen die je nodig hebt, terwijl de privacy van de gebruiker wordt gerespecteerd. Bekijk ons live analytics dashboard om het zelf te zien.

Google Analytics Begrippenlijst