diff --git a/client/src/components/adsense.tsx b/client/src/components/adsense.tsx index 249a961..fc80d91 100644 --- a/client/src/components/adsense.tsx +++ b/client/src/components/adsense.tsx @@ -44,11 +44,30 @@ export default function AdSense({ // Google postavi data-ad-status na "filled", "unfilled" ali "unfill-optimized". // Ce statusa ni, se zanesemo na dejansko visino. Odlocimo se enkrat. + // AdSense odzivni enoti vnaprej doloci visino po sirini zaslona. Ce je + // postrezena kreativa nizja, ostane pod njo prazen rezerviran pas znotraj + // okvirja. Visino zato poravnamo na dejansko visino oglasnega okvirja. + // Nic se ne odreze - visina je natanko taksna kot oglas. + let fitTimers: ReturnType[] = []; + const fitToCreative = () => { + const f = ins?.querySelector("iframe") as HTMLIFrameElement | null; + if (!ins || !f) return; + const h = f.getBoundingClientRect().height; + if (h > 10 && Math.abs(ins.getBoundingClientRect().height - h) > 2) { + ins.style.height = `${Math.ceil(h)}px`; + } + }; + const scheduleFit = () => { + fitTimers.forEach(clearTimeout); + fitTimers = [0, 300, 1000, 2500].map((d) => setTimeout(fitToCreative, d)); + }; + const decide = (filled: boolean) => { if (decided) return; decided = true; obs?.disconnect(); if (timer) clearTimeout(timer); + if (filled) scheduleFit(); onAdStatus?.(filled); }; // Visina samega ni dokaz - nekatere enote imajo rezerviran prostor. @@ -76,11 +95,15 @@ export default function AdSense({ pushed.current = true; } catch (e) { } - if (!onAdStatus || !ins) return; - obs = new MutationObserver(check); + if (!ins) return; + // Opazujemo tudi pri enotah brez onAdStatus - potrebujemo jih za poravnavo + // visine na kreativo. + obs = new MutationObserver(() => { check(); fitToCreative(); }); obs.observe(ins, { attributes: true, childList: true, subtree: true, attributeFilter: ["data-ad-status", "style"] }); timer = setTimeout(() => decide(hasFrame()), 3000); + window.addEventListener("resize", scheduleFit); check(); + scheduleFit(); }; if (eager || !ins || typeof IntersectionObserver === "undefined") { @@ -100,6 +123,8 @@ export default function AdSense({ io?.disconnect(); obs?.disconnect(); if (timer) clearTimeout(timer); + fitTimers.forEach(clearTimeout); + window.removeEventListener("resize", scheduleFit); }; }, []); @@ -204,7 +229,6 @@ export function InArticleAd() { return (
{shown && (
Anzeige
@@ -230,7 +254,7 @@ export function MultiplexAd() { slot="4593001335" format="autorelaxed" style={{ display: "block" }} - className={shown ? "w-full min-h-[250px]" : "w-full"} + className="w-full" onAdStatus={setFilled} />