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
284
openspec/changes/refactor-adsense-lazy-loading/sanity-tests.md
Normal file
284
openspec/changes/refactor-adsense-lazy-loading/sanity-tests.md
Normal file
@@ -0,0 +1,284 @@
|
||||
# Pruebas Sanitarias - AdSense Lazy Loading
|
||||
|
||||
> **Objetivo:** Verificar funcionamiento basico en navegador despues de deploy
|
||||
> **Tiempo estimado:** 15-20 minutos
|
||||
> **Entorno:** analisisdepreciosunitarios.com (PRODUCCION)
|
||||
> **Flujo:** Local (desarrollo) → Deploy → Produccion (pruebas)
|
||||
|
||||
---
|
||||
|
||||
## PRE-REQUISITOS
|
||||
|
||||
### 0. Deploy Completado
|
||||
|
||||
- [ ] Cambios commiteados en local
|
||||
- [ ] Deploy a produccion ejecutado
|
||||
- [ ] `wp roi-theme sync-component adsense-placement` ejecutado en produccion
|
||||
- [ ] Cache vaciado (Redis, W3TC, Cloudflare si aplica)
|
||||
|
||||
### 1. Verificar Entorno Produccion
|
||||
|
||||
- [ ] Sitio accesible en https://analisisdepreciosunitarios.com/
|
||||
- [ ] DevTools abierto (F12)
|
||||
- [ ] Consola visible (para ver logs de debug)
|
||||
- [ ] Network tab visible (para ver requests de AdSense)
|
||||
|
||||
### 2. Verificar Configuracion en BD (Produccion)
|
||||
|
||||
```bash
|
||||
# Via SSH al VPS
|
||||
ssh VPSContabo
|
||||
cd /var/www/preciosunitarios/public_html
|
||||
wp db query "SELECT setting_key, setting_value FROM wp_roi_theme_component_settings WHERE component_name = 'adsense-placement' AND setting_key LIKE '%lazy%';" --allow-root
|
||||
```
|
||||
|
||||
**Valores esperados:**
|
||||
- `lazy_loading_enabled` = `1` (o `true`)
|
||||
- `lazy_rootmargin` = `200`
|
||||
- `lazy_fill_timeout` = `5000`
|
||||
|
||||
---
|
||||
|
||||
## SANITY TEST 1: Carga Inicial (Lazy Enabled)
|
||||
|
||||
**Tiempo:** 3 min
|
||||
|
||||
### Pasos:
|
||||
1. Abrir DevTools > Console
|
||||
2. Navegar a un articulo con ads: https://analisisdepreciosunitarios.com/analisis-de-precios-unitarios/
|
||||
3. Observar consola
|
||||
|
||||
### Verificar:
|
||||
|
||||
- [ ] **ST1.1** Aparece `[AdSense Lazy] Inicializando AdSense Lazy Loader v2.0`
|
||||
- [ ] **ST1.2** Aparece `[AdSense Lazy] Config: lazyEnabled=true, rootMargin=200px 0px, fillTimeout=5000`
|
||||
- [ ] **ST1.3** Aparece `[AdSense Lazy] Intersection Observer inicializado`
|
||||
- [ ] **ST1.4** Los slots `.roi-ad-slot` tienen `display: none` inicialmente (inspeccionar CSS)
|
||||
- [ ] **ST1.5** Solo slots en viewport muestran `[AdSense Lazy] Slot entro al viewport`
|
||||
|
||||
### Screenshot Console:
|
||||
```
|
||||
Pegar screenshot de consola aqui
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## SANITY TEST 2: Activacion por Scroll
|
||||
|
||||
**Tiempo:** 3 min
|
||||
|
||||
### Pasos:
|
||||
1. Continuar en el mismo articulo
|
||||
2. Hacer scroll lento hacia abajo
|
||||
3. Observar consola mientras aparecen nuevos slots
|
||||
|
||||
### Verificar:
|
||||
|
||||
- [ ] **ST2.1** Al scrollear, nuevos mensajes `[AdSense Lazy] Slot entro al viewport`
|
||||
- [ ] **ST2.2** Mensaje `[AdSense Lazy] Activando slot...` por cada slot visible
|
||||
- [ ] **ST2.3** En Network tab: requests a `pagead2.googlesyndication.com` aparecen progresivamente
|
||||
- [ ] **ST2.4** Slots activados reciben clase `roi-ad-filled` o `roi-ad-empty`
|
||||
|
||||
### Nota Fill Rate:
|
||||
```
|
||||
Slots activados: ___
|
||||
Slots filled: ___
|
||||
Slots empty: ___
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## SANITY TEST 3: Deteccion de Fill
|
||||
|
||||
**Tiempo:** 3 min
|
||||
|
||||
### Pasos:
|
||||
1. Inspeccionar un slot que recibio ad (clase `roi-ad-filled`)
|
||||
2. Inspeccionar un slot vacio (clase `roi-ad-empty`)
|
||||
|
||||
### Verificar:
|
||||
|
||||
- [ ] **ST3.1** Slot filled tiene `display: block` (visible)
|
||||
- [ ] **ST3.2** Slot empty tiene `display: none` (oculto)
|
||||
- [ ] **ST3.3** Slot filled contiene `<ins>` con `data-ad-status="filled"`
|
||||
- [ ] **ST3.4** Consola muestra `[AdSense Lazy] Slot marcado como filled` o `empty`
|
||||
|
||||
### Screenshot Slot Filled:
|
||||
```
|
||||
Pegar screenshot del inspector aqui
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## SANITY TEST 4: Timeout de Fill
|
||||
|
||||
**Tiempo:** 5 min (esperar timeout)
|
||||
|
||||
### Pasos:
|
||||
1. Bloquear requests de AdSense temporalmente:
|
||||
- DevTools > Network > Click derecho en request de googlesyndication
|
||||
- "Block request URL" o usar extension de bloqueo
|
||||
2. Recargar pagina
|
||||
3. Esperar 5 segundos (fillTimeout)
|
||||
|
||||
### Verificar:
|
||||
|
||||
- [ ] **ST4.1** Slots muestran `[AdSense Lazy] Timeout alcanzado para slot`
|
||||
- [ ] **ST4.2** Slots reciben clase `roi-ad-empty`
|
||||
- [ ] **ST4.3** Slots permanecen ocultos (display: none)
|
||||
- [ ] **ST4.4** No hay errores JS en consola
|
||||
|
||||
### Desbloquear AdSense:
|
||||
- [ ] Remover bloqueo de AdSense despues del test
|
||||
|
||||
---
|
||||
|
||||
## SANITY TEST 5: Modo Legacy (Lazy Disabled)
|
||||
|
||||
**Tiempo:** 4 min
|
||||
|
||||
### Pasos:
|
||||
1. Cambiar configuracion en BD (via SSH):
|
||||
```bash
|
||||
ssh VPSContabo
|
||||
cd /var/www/preciosunitarios/public_html
|
||||
wp db query "UPDATE wp_roi_theme_component_settings SET setting_value = '0' WHERE component_name = 'adsense-placement' AND setting_key = 'lazy_loading_enabled';" --allow-root
|
||||
```
|
||||
2. Vaciar cache:
|
||||
```bash
|
||||
wp cache flush --allow-root
|
||||
# Si usa W3TC: wp w3-total-cache flush all --allow-root
|
||||
```
|
||||
3. Recargar pagina (Ctrl+Shift+R)
|
||||
4. Observar consola
|
||||
|
||||
### Verificar:
|
||||
|
||||
- [ ] **ST5.1** Consola muestra `[AdSense Lazy] Config: lazyEnabled=false`
|
||||
- [ ] **ST5.2** Consola muestra `[AdSense Lazy] Iniciando modo legacy`
|
||||
- [ ] **ST5.3** Los slots tienen `display: block` desde inicio
|
||||
- [ ] **ST5.4** Al hacer scroll o click, todos los ads cargan simultaneamente
|
||||
|
||||
### Restaurar (IMPORTANTE):
|
||||
```bash
|
||||
ssh VPSContabo
|
||||
cd /var/www/preciosunitarios/public_html
|
||||
wp db query "UPDATE wp_roi_theme_component_settings SET setting_value = '1' WHERE component_name = 'adsense-placement' AND setting_key = 'lazy_loading_enabled';" --allow-root
|
||||
wp cache flush --allow-root
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## SANITY TEST 6: Ads Dinamicos (AJAX)
|
||||
|
||||
**Tiempo:** 3 min
|
||||
|
||||
### Pasos:
|
||||
1. Buscar pagina con carga dinamica de contenido (si existe)
|
||||
2. O simular en consola:
|
||||
```javascript
|
||||
// Simular nuevo slot dinamico
|
||||
var slot = document.createElement('div');
|
||||
slot.className = 'roi-ad-slot';
|
||||
slot.innerHTML = '<ins class="adsbygoogle" data-ad-client="ca-pub-xxx" data-ad-slot="123"></ins><script data-adsense-push type="text/plain">(adsbygoogle = window.adsbygoogle || []).push({});</script>';
|
||||
document.body.appendChild(slot);
|
||||
|
||||
// Disparar evento
|
||||
window.dispatchEvent(new Event('roi-adsense-activate'));
|
||||
```
|
||||
|
||||
### Verificar:
|
||||
|
||||
- [ ] **ST6.1** Consola muestra `[AdSense Lazy] Evento roi-adsense-activate recibido`
|
||||
- [ ] **ST6.2** Nuevo slot es observado por Intersection Observer
|
||||
- [ ] **ST6.3** No hay errores JS
|
||||
|
||||
---
|
||||
|
||||
## SANITY TEST 7: Performance (Core Web Vitals)
|
||||
|
||||
**Tiempo:** 3 min
|
||||
|
||||
### Pasos:
|
||||
1. Abrir Lighthouse en DevTools
|
||||
2. Seleccionar "Performance" solamente
|
||||
3. Ejecutar audit en modo "Mobile"
|
||||
|
||||
### Verificar:
|
||||
|
||||
- [ ] **ST7.1** LCP (Largest Contentful Paint) < 2.5s
|
||||
- [ ] **ST7.2** FID (First Input Delay) < 100ms
|
||||
- [ ] **ST7.3** CLS (Cumulative Layout Shift) < 0.1
|
||||
- [ ] **ST7.4** No hay "Avoid enormous network payloads" warning por ads
|
||||
|
||||
### Scores:
|
||||
```
|
||||
Performance: ___
|
||||
LCP: ___
|
||||
FID: ___
|
||||
CLS: ___
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## RESUMEN DE EJECUCION
|
||||
|
||||
| Test | Resultado | Notas |
|
||||
|------|-----------|-------|
|
||||
| ST1: Carga Inicial | [ ] PASS / [ ] FAIL | |
|
||||
| ST2: Scroll Activation | [ ] PASS / [ ] FAIL | |
|
||||
| ST3: Fill Detection | [ ] PASS / [ ] FAIL | |
|
||||
| ST4: Timeout | [ ] PASS / [ ] FAIL | |
|
||||
| ST5: Modo Legacy | [ ] PASS / [ ] FAIL | |
|
||||
| ST6: Ads Dinamicos | [ ] PASS / [ ] FAIL | |
|
||||
| ST7: Performance | [ ] PASS / [ ] FAIL | |
|
||||
|
||||
**Tests Passed:** ___/7
|
||||
**Tests Failed:** ___/7
|
||||
|
||||
---
|
||||
|
||||
## DECISION
|
||||
|
||||
- [ ] **APROBADO PARA DEPLOY** - Todos los tests pasan
|
||||
- [ ] **BLOQUEADO** - Tests criticos fallan (ST1-ST4)
|
||||
- [ ] **APROBADO CON OBSERVACIONES** - Tests no criticos fallan (ST5-ST7)
|
||||
|
||||
**Fecha:** ____________
|
||||
**Ejecutor:** ____________
|
||||
**Notas adicionales:**
|
||||
|
||||
```
|
||||
Escribir observaciones aqui
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## COMANDOS UTILES
|
||||
|
||||
### Ver logs de consola filtrados:
|
||||
```javascript
|
||||
// En consola del navegador
|
||||
console.filter = '[AdSense';
|
||||
```
|
||||
|
||||
### Verificar config actual:
|
||||
```javascript
|
||||
console.log(window.roiAdsenseConfig);
|
||||
```
|
||||
|
||||
### Forzar recarga sin cache:
|
||||
```
|
||||
Ctrl + Shift + R (o Cmd + Shift + R en Mac)
|
||||
```
|
||||
|
||||
### Ver slots y su estado:
|
||||
```javascript
|
||||
document.querySelectorAll('.roi-ad-slot').forEach((slot, i) => {
|
||||
console.log(`Slot ${i}:`, {
|
||||
filled: slot.classList.contains('roi-ad-filled'),
|
||||
empty: slot.classList.contains('roi-ad-empty'),
|
||||
display: getComputedStyle(slot).display
|
||||
});
|
||||
});
|
||||
```
|
||||
Reference in New Issue
Block a user