Google Analytics zu Preact hinzufügen

Die Integration von Google Analytics (GA) in eine Preact-Anwendung ermöglicht es Ihnen, Benutzerinteraktionen zu verfolgen und aufschlussreiche Daten zu sammeln. Preact ist eine leichtgewichtige Alternative zu React und folgt ähnlichen Mustern für die GA-Integration.

Lassen Sie uns die Schritte durchgehen, um GA zu einer Preact-Anwendung hinzuzufügen.

Einrichten einer Google Analytics-Eigenschaft

Stellen Sie sicher, dass Sie eine Google Analytics-Eigenschaft haben. Wenn nicht, erstellen Sie eine in Ihrem Google Analytics-Konto. Entscheiden Sie sich für eine Google Analytics 4 (GA4) Property, um auf dem neuesten Stand zu bleiben. Sie erhalten eine "Measurement ID" (z. B. "G-XXXXXXXXXX").

Installieren Sie eine GA-Bibliothek

Für eine Preact-Anwendung können Sie die gleichen Bibliotheken wie für React verwenden. Eine beliebte Wahl ist react-ga:

npm install react-ga

Initialisieren Sie GA in Ihrer Anwendung

In Ihrer Preact-Hauptkomponente (normalerweise index.js oder App.js) initialisieren Sie GA mit Ihrer Measurement ID:

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

Ersetzen Sie YOUR_MEASUREMENT_ID durch Ihre tatsächliche GA Measurement ID.

Seitenaufrufe und Ereignisse verfolgen

Preact-Anwendungen sind in der Regel Single-Page-Apps (SPAs), so dass Sie die Seitenaufrufe bei Routenänderungen manuell verfolgen müssen. Wenn Sie einen Router wie preact-router verwenden, können Sie dies tun:

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

Für die Verfolgung von Ereignissen (z.B. Button-Klicks) verwenden Sie die Methode ReactGA.event:

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

Testen Sie Ihre Integration

Setzen Sie Ihre Anwendung ein und testen Sie die Integration. Überprüfen Sie das Google Analytics Dashboard, um sicherzustellen, dass die Daten korrekt erfasst werden. Sie können auch die Google Analytics Debugger Chrome-Erweiterung zum Debuggen verwenden.

Überlegungen und bewährte Praktiken

Einhaltung des Datenschutzes: Stellen Sie sicher, dass Ihre Implementierung mit Datenschutzgesetzen wie GDPR konform ist, insbesondere in Bezug auf die Verwendung von Cookies und die Zustimmung der Nutzer.
Benutzerdefiniertes Ereignis-Tracking: Nutzen Sie GA, um benutzerdefinierte Ereignisse zu verfolgen, die für Ihre Anwendung wichtig sind.
Fehlersuche und Verifizierung: Es ist wichtig, Ihr Tracking-Setup gründlich zu testen und zu debuggen, um eine genaue Datenerfassung sicherzustellen.

Abschließende Überlegungen

Das Hinzufügen von Google Analytics zu Ihrer Preact-Anwendung ist eine großartige Möglichkeit, um das Nutzerverhalten zu verstehen und die Leistung Ihrer Anwendung zu verbessern. Allerdings kann Google Analytics für viele Unternehmen zu komplex sein.

Bei Simple Analytics bieten wir eine einfachere, datenschutzfreundliche Alternative, die eine einfachere Schnittstelle bietet, um die benötigten Informationen zu erhalten und gleichzeitig die Privatsphäre der Nutzer zu respektieren. Überzeugen Sie sich selbst von unserem Live-Analytics-Dashboard.

Google Analytics Glossar