# 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 `` 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 = ''; 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 }); }); ```