diff --git a/client/src/components/adsense.tsx b/client/src/components/adsense.tsx index 85dd64e..3a84fc4 100644 --- a/client/src/components/adsense.tsx +++ b/client/src/components/adsense.tsx @@ -36,29 +36,31 @@ export default function AdSense({ } catch (e) { } - if (onAdStatus) { - const checkAd = () => { - if (adRef.current) { - const ins = adRef.current; - const status = ins.getAttribute("data-ad-status"); - if (status === "filled") { - onAdStatus(true); - return; - } - if (status === "unfilled") { - onAdStatus(false); - return; - } - if (ins.clientHeight > 10) { - onAdStatus(true); - return; - } - } - }; - const t1 = setTimeout(checkAd, 2000); - const t2 = setTimeout(checkAd, 5000); - return () => { clearTimeout(t1); clearTimeout(t2); }; - } + if (!onAdStatus) return; + const ins = adRef.current; + if (!ins) return; + + // Google postavi data-ad-status na "filled", "unfilled" ali "unfill-optimized". + // Ce statusa ni, se zanesemo na dejansko visino. Odlocimo se enkrat. + let decided = false; + const decide = (filled: boolean) => { + if (decided) return; + decided = true; + obs.disconnect(); + clearTimeout(timer); + onAdStatus(filled); + }; + const check = () => { + const st = ins.getAttribute("data-ad-status") || ""; + if (st === "filled") return decide(true); + if (st.startsWith("unfill")) return decide(false); + if (ins.clientHeight > 10) return decide(true); + }; + const obs = new MutationObserver(check); + obs.observe(ins, { attributes: true, attributeFilter: ["data-ad-status", "style"] }); + const timer = setTimeout(() => decide(ins.clientHeight > 10), 6000); + check(); + return () => { obs.disconnect(); clearTimeout(timer); }; }, []); return ( @@ -82,6 +84,8 @@ let adSeedCounter = 1; export function ArticleCardAd() { const seed = useMemo(() => adSeedCounter++, []); + const [filled, setFilled] = useState(null); + if (filled === false) return null; return ( ); } export function TopBannerAd() { + const [filled, setFilled] = useState(null); + if (filled === false) return null; + const shown = filled === true; return ( -
-
Anzeige
+
+ {shown && ( +
Anzeige
+ )}
); @@ -111,29 +127,41 @@ export function TopBannerAd() { export function InArticleAd() { // Prava AdSense In-article enota (fluid + data-ad-layout="in-article"). - // Prilagodi se tipografiji clanka in ima obcutno visji CPM kot display enota, - // ki je tu stala prej. + // Kadar oglasa ni, se okvir in rezerviran prostor ne izriseta. + const [filled, setFilled] = useState(null); + if (filled === false) return null; + const shown = filled === true; return ( -
-
Anzeige
+
+ {shown && ( +
Anzeige
+ )}
); } export function MultiplexAd() { + const [filled, setFilled] = useState(null); + if (filled === false) return null; + const shown = filled === true; return ( -
+
); diff --git a/client/src/components/interstitial-ad.tsx b/client/src/components/interstitial-ad.tsx index cd8c1a1..df3a068 100644 --- a/client/src/components/interstitial-ad.tsx +++ b/client/src/components/interstitial-ad.tsx @@ -7,6 +7,7 @@ const DELAY_MS = 3000; export default function InterstitialAd({ forceShow }: { forceShow?: boolean } = {}) { const [visible, setVisible] = useState(false); + const [filled, setFilled] = useState(null); useEffect(() => { if (forceShow) { @@ -27,19 +28,21 @@ export default function InterstitialAd({ forceShow }: { forceShow?: boolean } = }, [forceShow]); useEffect(() => { - if (visible) { + if (visible && filled !== false) { document.body.style.overflow = "hidden"; + } else { + document.body.style.overflow = ""; } return () => { document.body.style.overflow = ""; }; - }, [visible]); + }, [visible, filled]); - if (!visible) return null; + if (!visible || filled === false) return null; return (
setVisible(false)} data-testid="interstitial-ad-overlay" > @@ -63,6 +66,7 @@ export default function InterstitialAd({ forceShow }: { forceShow?: boolean } = format="rectangle" responsive={false} style={{ display: "inline-block", width: "300px", height: "250px" }} + onAdStatus={setFilled} />
diff --git a/client/src/components/parallax-ad.tsx b/client/src/components/parallax-ad.tsx index df627cd..9cc3449 100644 --- a/client/src/components/parallax-ad.tsx +++ b/client/src/components/parallax-ad.tsx @@ -1,19 +1,26 @@ +import { useState } from "react"; import AdSense from "./adsense"; export default function ParallaxAd() { + const [filled, setFilled] = useState(null); + if (filled === false) return null; + const shown = filled === true; return (
-
+
-
Anzeige
+ {shown && ( +
Anzeige
+ )}
-