179a83e9cd
- Add per-slot lazy loading with Intersection Observer API - Implement fill detection via MutationObserver and data-ad-status - Add configurable rootMargin and fillTimeout from database - Generate dynamic CSS based on lazy_loading_enabled setting - Add legacy mode fallback for browsers without IO support - Include backup of previous implementation (adsense-loader.legacy.js) - Add OpenSpec documentation with test plan (72 tests verified) Schema changes: - Add lazy_loading_enabled (boolean, default: true) - Add lazy_rootmargin (select: 0-500px, default: 200) - Add lazy_fill_timeout (select: 3000-10000ms, default: 5000) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2.6 KiB
2.6 KiB
Change: Refactorizar AdSense Lazy Loading con Intersection Observer
Why
La implementacion actual carga TODOS los ads simultaneamente despues de interaccion del usuario o timeout de 5 segundos. Esto causa:
- Slots vacios visibles: Cuando hay mas ads que inventario disponible, los slots vacios quedan visibles en la pagina creando espacios en blanco.
- Sobrecarga inicial: Cargar 20+ ads simultaneamente impacta el rendimiento y el fill rate de Google.
- Desperdicio de impresiones: Ads below-the-fold se cargan aunque el usuario nunca llegue a verlos.
What Changes
- BREAKING: El comportamiento de carga cambia de "cargar todo" a "cargar por visibilidad"
- Nuevos campos de configuracion en schema
adsense-placement.json(grupoforms) - Extension del modulo
AdsensePlacementexistente (NO modulo nuevo) - Implementar Intersection Observer para detectar cuando un slot entra al viewport
- Cargar cada ad individualmente cuando el usuario se aproxima (rootMargin configurable)
- NO mostrar el contenedor
.roi-ad-slothasta que el ad tenga contenido real - Estilos generados via CSSGeneratorService (NO CSS estatico)
Impact
- Affected specs: Extension de especificacion existente
adsense-placement - Affected code:
Schemas/adsense-placement.json- Nuevos campos en grupoformsAssets/Js/adsense-loader.js- Refactorizacion con Intersection ObserverPublic/AdsensePlacement/Infrastructure/Ui/AdsensePlacementRenderer.php- Ajustar markup y estilosPublic/AdsensePlacement/Infrastructure/Services/AdsenseAssetEnqueuer.php- Pasar config a JSAdmin/AdsensePlacement/Infrastructure/Ui/AdsensePlacementFormBuilder.php- Nuevos campos UIAdmin/AdsensePlacement/Infrastructure/FieldMapping/AdsensePlacementFieldMapper.php- Mapping
Arquitectura
Esta mejora se integra al modulo existente AdsensePlacement:
Public/AdsensePlacement/
├── Domain/ # Sin cambios (no hay logica de negocio nueva)
├── Application/ # Sin cambios
└── Infrastructure/
├── Ui/
│ └── AdsensePlacementRenderer.php # Genera CSS dinamico via CSSGenerator
└── Services/
└── AdsenseAssetEnqueuer.php # Enqueue JS con config desde BD
Admin/AdsensePlacement/
├── Infrastructure/
│ ├── Ui/
│ │ └── AdsensePlacementFormBuilder.php # Nuevos campos lazy loading
│ └── FieldMapping/
│ └── AdsensePlacementFieldMapper.php # Mapping nuevos campos
NO se crea modulo nuevo - es extension del componente existente.