feat(js): implement intersection observer lazy loading for adsense

- 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>
This commit is contained in:
FrankZamora
2025-12-10 15:48:20 -06:00
parent 555541b2a0
commit 179a83e9cd
14 changed files with 3303 additions and 201 deletions

View File

@@ -1,6 +1,6 @@
{
"component_name": "adsense-placement",
"version": "1.4.0",
"version": "1.5.0",
"description": "Control de AdSense y Google Analytics - Con In-Content Ads Avanzado",
"groups": {
"visibility": {
@@ -423,6 +423,41 @@
"700": "700px (Debajo del fold)"
},
"description": "Distancia vertical desde el top del viewport"
},
"lazy_loading_enabled": {
"type": "boolean",
"label": "Lazy Loading de Anuncios",
"default": true,
"editable": true,
"description": "Cargar anuncios individualmente al entrar al viewport (mejora fill rate)"
},
"lazy_rootmargin": {
"type": "select",
"label": "Pre-carga (px antes del viewport)",
"default": "200",
"editable": true,
"options": {
"0": "0px (sin pre-carga)",
"100": "100px",
"200": "200px (recomendado)",
"300": "300px",
"400": "400px",
"500": "500px"
},
"description": "Pixeles de anticipacion para iniciar carga de anuncio"
},
"lazy_fill_timeout": {
"type": "select",
"label": "Timeout de llenado (ms)",
"default": "5000",
"editable": true,
"options": {
"3000": "3 segundos",
"5000": "5 segundos (recomendado)",
"7000": "7 segundos",
"10000": "10 segundos"
},
"description": "Tiempo maximo para esperar contenido de Google antes de ocultar slot"
}
}
},