git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(js): implement google official css for unfilled adsense slots

Browse Source 
Remove eager loading, revert to Intersection Observer with 600px
rootMargin. Use google css: ins[data-ad-status=unfilled]{display:none}

🤖 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 17:29:44 -06:00
parent 5971f2c971
commit a2dfd10f9e
3 changed files with 81 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
Public/AdsensePlacement/Infrastructure/Ui/AdsensePlacementRenderer.php
View File

@@ -66,56 +66,59 @@ final class AdsensePlacementRenderer
// 4. Generar CSS (usando CSSGeneratorService)
$lazyEnabled = ($settings['behavior']['lazy_loading_enabled'] ?? true) === true;
// Estrategia para evitar layout shift:
// - Los slots inician colapsados (max-height:0) sin ocupar espacio visual
// - Usamos max-height en vez de height para que IO pueda detectarlos
// - Se pre-cargan con rootMargin grande (1000px) antes de ser visibles
// - Solo se expanden cuando AdSense confirma que hay anuncio (filled)
// - Si no hay anuncio (unfilled), permanecen colapsados
// - Esto evita que el usuario vea espacios que luego desaparecen
if ($lazyEnabled) {
$css = $this->cssGenerator->generate(
".roi-ad-slot",
[
'max_height' => '0',
'overflow' => 'hidden',
'opacity' => '0',
'width' => '100%',
'min_width' => '300px',
'text_align' => 'center',
'margin' => '0',
'padding' => '0',
'transition' => 'max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease',
]
);
// Slots con anuncio confirmado: se expanden y muestran
$css .= $this->cssGenerator->generate('.roi-ad-slot.roi-ad-filled', [
'max_height' => '600px',
'opacity' => '1',
'overflow' => 'visible',
// Estrategia basada en documentación oficial de Google AdSense:
// https://support.google.com/adsense/answer/10762946
//
// IMPORTANTE: NO ocultar slots inicialmente porque AdSense puede no
// ejecutar la solicitud de anuncios para slots ocultos.
//
// La solución correcta es:
// 1. Mostrar slots con min-height para reservar espacio (evita CLS)
// 2. Usar CSS oficial de Google para ocultar slots unfilled:
// ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
// 3. El contenedor colapsa automáticamente cuando el ins se oculta
// CSS base para todos los slots
$css = $this->cssGenerator->generate(
".roi-ad-slot",
[
'width' => '100%',
'min_width' => '300px',
'margin_top' => '1.5rem',
'margin_bottom' => '1.5rem',
]);
// Slots vacios: permanecen colapsados sin ocupar espacio
$css .= $this->cssGenerator->generate('.roi-ad-slot.roi-ad-empty', [
'max_height' => '0',
'opacity' => '0',
'text_align' => 'center',
'min_height' => '100px', // Reservar espacio mínimo para evitar CLS
]
);
// Solución oficial de Google para ocultar slots sin anuncios
// Ref: https://support.google.com/adsense/answer/10762946
$css .= $this->cssGenerator->generate(
"ins.adsbygoogle[data-ad-status='unfilled']",
[
'display' => 'none !important',
]
);
// Cuando el ins está oculto, colapsar el contenedor también
// Usamos :has() para detectar cuando el ins hijo está unfilled
// Nota: :has() tiene buen soporte en navegadores modernos (2023+)
$css .= $this->cssGenerator->generate(
".roi-ad-slot:has(ins.adsbygoogle[data-ad-status='unfilled'])",
[
'min_height' => '0',
'margin' => '0',
'padding' => '0',
]);
} else {
// Modo legacy: slots siempre visibles
$css = $this->cssGenerator->generate(
".roi-ad-slot",
[
'width' => '100%',
'min_width' => '300px',
'margin_top' => '1.5rem',
'margin_bottom' => '1.5rem',
'text_align' => 'center',
]
);
}
]
);
// Fallback para navegadores sin soporte :has() - usar clase JS
$css .= $this->cssGenerator->generate('.roi-ad-slot.roi-ad-empty', [
'min_height' => '0',
'margin' => '0',
'padding' => '0',
'display' => 'none',
]);
// 5. Generar HTML del anuncio
$html = $this->buildAdHTML(