diff --git a/Admin/AdsensePlacement/Infrastructure/Ui/AdsensePlacementFormBuilder.php b/Admin/AdsensePlacement/Infrastructure/Ui/AdsensePlacementFormBuilder.php
index 6edd72cd..91ba422a 100644
--- a/Admin/AdsensePlacement/Infrastructure/Ui/AdsensePlacementFormBuilder.php
+++ b/Admin/AdsensePlacement/Infrastructure/Ui/AdsensePlacementFormBuilder.php
@@ -639,10 +639,20 @@ final class AdsensePlacementFormBuilder
// Tamano y opacidad
$html .= '
';
$html .= '
';
- $size = $this->renderer->getFieldValue($cid, 'vignette_ads', 'vignette_size', '300x250');
+ $size = $this->renderer->getFieldValue($cid, 'vignette_ads', 'vignette_size', 'auto');
$html .= $this->buildSelect($cid . 'VignetteSize', 'Tamano',
(string)$size,
- ['300x250' => '300x250', '336x280' => '336x280', 'responsive' => 'Responsive']
+ [
+ 'auto' => 'Auto (recomendado)',
+ '300x250' => '300x250 (Rectangle)',
+ '336x280' => '336x280 (Large Rectangle)',
+ '728x90' => '728x90 (Leaderboard)',
+ '970x250' => '970x250 (Billboard)',
+ '970x90' => '970x90 (Large Leaderboard)',
+ '468x60' => '468x60 (Banner)',
+ '320x100' => '320x100 (Large Mobile)',
+ 'responsive' => 'Responsive (fluid)',
+ ]
);
$html .= '
';
$html .= '
';
diff --git a/Public/AdsensePlacement/Infrastructure/Ui/AdsensePlacementRenderer.php b/Public/AdsensePlacement/Infrastructure/Ui/AdsensePlacementRenderer.php
index 55ce284a..d8571fb3 100644
--- a/Public/AdsensePlacement/Infrastructure/Ui/AdsensePlacementRenderer.php
+++ b/Public/AdsensePlacement/Infrastructure/Ui/AdsensePlacementRenderer.php
@@ -593,7 +593,7 @@ final class AdsensePlacementRenderer
// === CSS via CSSGenerator ===
$cssRules = [];
- // Base anchor styles
+ // Base anchor styles - OCULTO POR DEFECTO hasta que AdSense llene el slot
$cssRules[] = $this->cssGenerator->generate('.roi-anchor-ad', [
'position' => 'fixed',
'left' => '0',
@@ -606,6 +606,16 @@ final class AdsensePlacementRenderer
'display' => 'flex',
'align-items' => 'center',
'justify-content' => 'center',
+ 'opacity' => '0',
+ 'visibility' => 'hidden',
+ 'pointer-events' => 'none',
+ ]);
+
+ // Mostrar anchor cuando AdSense llena el slot
+ $cssRules[] = $this->cssGenerator->generate('.roi-anchor-ad.ad-loaded', [
+ 'opacity' => '1',
+ 'visibility' => 'visible',
+ 'pointer-events' => 'auto',
]);
$cssRules[] = $this->cssGenerator->generate('.roi-anchor-ad-top', [
@@ -884,11 +894,13 @@ final class AdsensePlacementRenderer
$html = "\n";
// Determinar estilo de anuncio segun tamano
- $adStyle = $size === 'responsive'
- ? 'display:block;min-width:300px;min-height:250px'
- : sprintf('display:inline-block;width:%dpx;height:%dpx', $adWidth, $adHeight);
-
- $adFormat = $size === 'responsive' ? ' data-ad-format="auto" data-full-width-responsive="true"' : '';
+ if ($size === 'auto' || $size === 'responsive') {
+ $adStyle = 'display:block;min-width:300px;min-height:250px';
+ $adFormat = ' data-ad-format="auto" data-full-width-responsive="true"';
+ } else {
+ $adStyle = sprintf('display:inline-block;width:%dpx;height:%dpx', $adWidth, $adHeight);
+ $adFormat = '';
+ }
$closeDelayClass = $closeDelay > 0 ? ' delayed' : '';
@@ -937,6 +949,12 @@ final class AdsensePlacementRenderer
return match($size) {
'300x250' => [300, 250],
'336x280' => [336, 280],
+ '728x90' => [728, 90],
+ '970x250' => [970, 250],
+ '970x90' => [970, 90],
+ '468x60' => [468, 60],
+ '320x100' => [320, 100],
+ 'auto', 'responsive' => [0, 0], // TamaƱos dinamicos
default => [300, 250],
};
}
diff --git a/Public/AdsensePlacement/Infrastructure/Ui/Assets/anchor-vignette.js b/Public/AdsensePlacement/Infrastructure/Ui/Assets/anchor-vignette.js
index 27f224bb..1bd89f11 100644
--- a/Public/AdsensePlacement/Infrastructure/Ui/Assets/anchor-vignette.js
+++ b/Public/AdsensePlacement/Infrastructure/Ui/Assets/anchor-vignette.js
@@ -87,28 +87,35 @@
// =====================================================
/**
- * Observa los slots de AdSense y oculta el contenedor si no se llena
- * AdSense agrega data-ad-status="unfilled" cuando no hay anuncio
+ * Observa los slots de AdSense y MUESTRA el contenedor solo cuando se llena
+ * Los anchors estan OCULTOS por defecto via CSS
+ * AdSense agrega data-ad-status="filled" cuando hay anuncio
*/
- function watchUnfilledAds(containers) {
+ function watchAdStatus(containers) {
containers.forEach(function(container) {
var ins = container.querySelector('ins.adsbygoogle');
if (!ins) return;
+ // Funcion para mostrar el anchor cuando el ad esta listo
+ function showIfFilled() {
+ var status = ins.getAttribute('data-ad-status');
+ if (status === 'filled') {
+ container.classList.add('ad-loaded');
+ return true;
+ }
+ return false;
+ }
+
// Verificar si ya tiene estado (por si ya cargo)
- var status = ins.getAttribute('data-ad-status');
- if (status === 'unfilled') {
- container.classList.add('hidden');
+ if (showIfFilled()) {
return;
}
- // Usar MutationObserver para detectar cambios
+ // Usar MutationObserver para detectar cuando AdSense llena el slot
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'attributes' && mutation.attributeName === 'data-ad-status') {
- var newStatus = ins.getAttribute('data-ad-status');
- if (newStatus === 'unfilled') {
- container.classList.add('hidden');
+ if (showIfFilled()) {
observer.disconnect();
}
}
@@ -120,15 +127,9 @@
attributeFilter: ['data-ad-status']
});
- // Timeout de seguridad: si despues de 5s no hay contenido, ocultar
+ // Timeout de seguridad: despues de 5s desconectar observer
+ // Si no se lleno, el anchor permanece oculto (comportamiento deseado)
setTimeout(function() {
- var adStatus = ins.getAttribute('data-ad-status');
- // Si no tiene status o esta unfilled, y no tiene contenido real
- if (!adStatus || adStatus === 'unfilled') {
- if (ins.innerHTML.length < 100) {
- container.classList.add('hidden');
- }
- }
observer.disconnect();
}, 5000);
});
@@ -157,8 +158,8 @@
}
});
- // Ocultar anchors cuando AdSense no llena el slot
- watchUnfilledAds(anchors);
+ // Mostrar anchors solo cuando AdSense llene el slot (ocultos por defecto via CSS)
+ watchAdStatus(anchors);
// Event delegation para botones
document.addEventListener('click', function(e) {