📊 AdMob Dashboard for React Native + Expo

Dashboard profesional para analizar métricas de AdMob/AdSense dentro de apps creadas con React Native + Expo. Incluye detección automática de tráfico sospechoso, gráficos de tendencias y recomendaciones para optimizar tus ingresos.

✨ Características

• ✅ Detección de tráfico sospechoso - Identifica patrones de clics anómalos automáticamente
• ✅ Gráficos interactivos - Tendencias de CTR y RPM con react-native-chart-kit
• ✅ Dark/Light Mode - Soporte automático para temas claro/oscuro
• ✅ Tipado completo - TypeScript para mejor desarrollo
• ✅ Métricas calculadas - CTR, RPM, clics por pageview automáticamente
• ✅ Análisis de riesgo - Niveles LOW/MEDIUM/HIGH con recomendaciones
• ✅ Fácil integración - Solo pasa tus métricas y listo

🚀 Instalación

npm install admob-dashboard

Dependencias opcionales (para gráficos)

npm install react-native-chart-kit react-native-svg

🧩 Uso Básico

import React from 'react';
import { AdMobDashboard } from 'admob-dashboard';

export default function App() {
  const handleInspectTraffic = () => {
    console.log('Inspeccionar tráfico clickeado');
    // Tu lógica para inspeccionar tráfico aquí
  };

  return (
    <AdMobDashboard
      metrics={{
        pageViews: 1200,
        impressions: 3500,
        clicks: 42,
        cpc: 0.12,
        rpm: 5.96
      }}
      onInspect={handleInspectTraffic}
    />
  );
}

📊 Propiedades del Componente

AdMobDashboardProps

| Propiedad | Tipo | Requerido | Descripción | |-----------|------|-----------|-------------| | metrics | Partial<Metrics> | Opcional | Métricas de AdMob/AdSense | | onInspect | () => void | Opcional | Callback cuando se presiona "Inspeccionar tráfico" | | history | Array<Partial<Metrics> & { date: string }> | Opcional | Datos históricos para gráficos de tendencias |

Metrics Interface

interface Metrics {
  pageViews: number;     // Vistas de página
  impressions: number;   // Impresiones de anuncios
  clicks: number;        // Clics en anuncios
  cpc: number;           // Costo por clic (USD)
  rpm?: number;          // Ingresos por mil impresiones (USD) - opcional
}

📈 Ejemplo Avanzado con Historial

import React from 'react';
import { AdMobDashboard } from 'admob-dashboard';

export default function AnalyticsScreen() {
  const metrics = {
    pageViews: 15420,
    impressions: 28750,
    clicks: 215,
    cpc: 0.18,
    rpm: 6.42
  };

  const historicalData = [
    { date: '2024-01-01', pageViews: 1200, impressions: 2500, clicks: 18, cpc: 0.15 },
    { date: '2024-01-02', pageViews: 1350, impressions: 2800, clicks: 22, cpc: 0.16 },
    { date: '2024-01-03', pageViews: 1420, impressions: 2950, clicks: 25, cpc: 0.17 },
    { date: '2024-01-04', pageViews: 1380, impressions: 2700, clicks: 20, cpc: 0.16 },
    { date: '2024-01-05', pageViews: 1540, impressions: 3100, clicks: 28, cpc: 0.18 },
  ];

  const handleExportData = () => {
    // Lógica para exportar datos
    console.log('Exportando datos...');
  };

  return (
    <AdMobDashboard
      metrics={metrics}
      history={historicalData}
      onInspect={handleExportData}
    />
  );
}

🎯 Métricas Calculadas Automáticamente

El dashboard calcula automáticamente:

• CTR (Click-Through Rate): (clicks / impressions) * 100
• RPM (Revenue Per Mille): ((clicks * cpc) / impressions) * 1000
• Clics por PageView: clicks / pageViews
• Nivel de Riesgo: Basado en thresholds de la industria

Thresholds de Detección

const THRESHOLDS = {
  CTR_MEDIUM: 6.0,      // CTR > 6% = riesgo MEDIUM
  CTR_HIGH: 10.0,       // CTR > 10% = riesgo HIGH
  CLICKS_PER_PAGEVIEW_HIGH: 0.2  // >0.2 clics/pageview = riesgo HIGH
};

🔧 Configuración para Expo

Asegúrate de tener estas dependencias en tu package.json:

{
  "dependencies": {
    "react": "^18.0.0",
    "react-native": "^0.74.0",
    "expo": "^54.0.0",
    "react-native-chart-kit": "^6.12.0",
    "react-native-svg": "^15.0.0"
  }
}

Compatibilidad

| Versión | Expo SDK | React Native | React | react-native-svg | |---------|----------|--------------|-------|------------------| | 1.1.0+ | >=54 | >=0.74 | >=18 | >=15.0.0 | | 1.0.x | >=50 | >=0.72 | >=18 | >=13.9.0 |

🛠 Troubleshooting

Error: Module not found

Si recibes errores de módulo, asegúrate de instalar las dependencias peer:

npm install react-native-chart-kit react-native-svg

Error: Chart not rendering

Verifica que react-native-svg esté correctamente configurado en tu proyecto Expo.

TypeScript Errors

El paquete incluye definiciones TypeScript completas. Si tienes problemas, verifica tu tsconfig.json.

📁 Estructura del Proyecto

src/
 ├── AdMobDashboard.tsx    # Componente principal
 ├── charts/
 │    └── OverviewChart.tsx # Componentes de gráficos
 ├── types.ts              # Definiciones TypeScript
 ├── theme.ts              # Configuración de temas
 └── index.ts              # Punto de entrada

🤝 Contribuir

Las contribuciones son bienvenidas! Por favor:

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📄 Licencia

Distribuido bajo la Licencia MIT. Ve LICENSE para más información.

👨‍💻 Autor

Dantelin Castro

• GitHub: @dcastros1

🔗 Enlaces

• Repositorio
• Reportar un issue
• NPM Package