Añadir Google Analytics a Preact

La integración de Google Analytics (GA) con una aplicación Preact permite realizar un seguimiento de las interacciones de los usuarios y recopilar datos reveladores. Preact, al ser una alternativa ligera a React, sigue patrones similares para la integración de GA.

1. Configurar una propiedad de Google Analytics
2. Instale una biblioteca GA
3. Inicializa GA en tu aplicación
4. Seguimiento de páginas vistas y eventos
5. Prueba tu integración
6. Consideraciones y buenas prácticas
7. Reflexiones finales

Veamos los pasos para añadir GA a una aplicación Preact.

Configurar una propiedad de Google Analytics

Asegúrate de que tienes una propiedad de Google Analytics. Si no es así, cree una en su cuenta de Google Analytics. Opte por una propiedad de Google Analytics 4 (GA4) para estar al día. Recibirá un "ID de medición" (como 'G-XXXXXXXXXX').

Instale una biblioteca GA

Para una aplicación Preact, puede utilizar las mismas bibliotecas que React. Una opción popular es react-ga:

npm install react-ga

Inicializa GA en tu aplicación

En tu componente principal de Preact (normalmente index.js o App.js), inicializa GA usando tu ID de medida:

import ReactGA from 'react-ga'; ReactGA.initialize('YOUR_MEASUREMENT_ID'); const App = () => { ReactGA.pageview(window.location.pathname + window.location.search); // Resto del componente de tu aplicación... }

Sustituye YOUR_MEASUREMENT_ID por tu ID de medición de GA.

Seguimiento de páginas vistas y eventos

Las aplicaciones Preact suelen ser aplicaciones de una sola página (SPA), por lo que es necesario realizar un seguimiento manual de las páginas vistas en los cambios de ruta. Si utiliza un enrutador como preact-router, puede hacerlo:

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

Para el seguimiento de eventos (como clics en botones), utiliza el método ReactGA.event:

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

Prueba tu integración

Despliega tu aplicación y prueba la integración. Compruebe el panel de control de Google Analytics para asegurarse de que los datos se capturan correctamente. También puede utilizar la extensión de Chrome Google Analytics Debugger para realizar la depuración.

Consideraciones y buenas prácticas

• Cumplimiento de la privacidad: Asegúrese de que su implementación cumpla con las leyes de privacidad como GDPR, especialmente con respecto al uso de cookies y el consentimiento del usuario.
• Seguimiento de eventos personalizados: Aproveche GA para rastrear eventos personalizados que sean significativos para su aplicación.
• Depuración y verificación: Es esencial probar y depurar a fondo tu configuración de seguimiento para garantizar una recopilación de datos precisa.

Reflexiones finales

Añadir Google Analytics a su aplicación Preact es una forma excelente de comprender el comportamiento de los usuarios y mejorar el rendimiento de su aplicación. Sin embargo, Google Analytics puede resultar demasiado complejo para muchas organizaciones.

En Simple Analytics, ofrecemos una alternativa más sencilla y centrada en la privacidad, proporcionando una interfaz más fácil para obtener la información que necesita, respetando al mismo tiempo la privacidad del usuario. Echa un vistazo a nuestro panel de análisis en vivo para comprobarlo por ti mismo.