diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..b6a17bb --- /dev/null +++ b/.env.example @@ -0,0 +1,11 @@ +# Firebase Configuration +# Copy this file to .env and fill in your Firebase project credentials. +# Get these values from: Firebase Console > Project Settings > General > Your apps > SDK setup + +VITE_FIREBASE_API_KEY=your_api_key_here +VITE_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com +VITE_FIREBASE_PROJECT_ID=your_project_id +VITE_FIREBASE_STORAGE_BUCKET=your_project_id.appspot.com +VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id +VITE_FIREBASE_APP_ID=your_app_id +VITE_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX diff --git a/.gitignore b/.gitignore index a547bf3..7ef0b74 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,11 @@ dist dist-ssr *.local +# Environment variables — never commit credentials +.env +.env.local +.env.*.local + # Editor directories and files .vscode/* !.vscode/extensions.json diff --git a/GOOGLE_ANALYTICS_SETUP.md b/GOOGLE_ANALYTICS_SETUP.md new file mode 100644 index 0000000..c6ccf11 --- /dev/null +++ b/GOOGLE_ANALYTICS_SETUP.md @@ -0,0 +1,183 @@ +# Google Analytics - Guía de Implementación + +## ¿Qué se ha instalado? + +Google Analytics ya está integrado en tu proyecto y funcionando automáticamente. Aquí te explico qué hace: + +--- + +## 📊 Rastreo Automático (Ya está funcionando) + +### 1. **Rastreo de Páginas Vistas** + +- Google Analytics rastrea automáticamente cada vez que un usuario navega a una nueva página +- Se registran las rutas: `/`, `/quizzes`, `/animacion/:animacion`, `/quiz/:quizName`, etc. + +### 2. **Rastreo de Interacciones Automáticas** + +Gracias a la "Medición Mejorada" que configuramos, Google Analytics registra: + +- ✅ **Visitas de página** - Cada página que visita +- ✅ **Desplazamientos (Scroll)** - Si bajan en la página +- ✅ **Clics de salida** - Links que salen de tu sitio +- ✅ **Tiempo en página** - Cuánto tiempo pasan en cada sección +- ✅ **Rebotes** - Si salen sin interactuar + +--- + +## 🎯 Rastreo Personalizado (Eventos Específicos) + +Ahora puedes rastrear eventos específicos que importan para tu negocio. + +### Ejemplo 1: Rastrear cuando inicia un quiz + +**En un componente de botón de quiz:** + +```jsx +import { trackEvent } from '../utils/googleAnalytics'; + +function QuizButton({ quizName }) { + const handleClick = () => { + // Rastrear el evento + trackEvent('quiz_iniciado', { + nombre_quiz: quizName, + timestamp: new Date().toISOString(), + }); + + // Luego navegar al quiz + navigate(`/quiz/${quizName}`); + }; + + return ; +} +``` + +### Ejemplo 2: Rastrear cuando completa un quiz + +```jsx +import { trackEvent } from '../utils/googleAnalytics'; + +function QuizResults({ score, totalQuestions }) { + useEffect(() => { + // Rastrear que completó el quiz + trackEvent('quiz_completado', { + puntuacion: score, + total_preguntas: totalQuestions, + porcentaje: (score / totalQuestions) * 100, + }); + }, [score, totalQuestions]); + + return ( +