From 5784a52e3cc76edbb46c76f1bea91831fdeb2991 Mon Sep 17 00:00:00 2001
From: Timo Knuth <knuthtimo@gmail.com>
Date: Mon, 12 Jan 2026 17:22:20 +0100
Subject: [PATCH] Adsense

---
 src/app/(marketing)/tools/layout.tsx |  8 +++++
 src/app/layout.tsx                   |  7 ++--
 src/components/ads/AdBanner.tsx      | 53 +++++++++++++++++++++-------
 3 files changed, 50 insertions(+), 18 deletions(-)
diff --git a/src/app/(marketing)/tools/layout.tsx b/src/app/(marketing)/tools/layout.tsx
index ebd6b42..4246278 100644
--- a/src/app/(marketing)/tools/layout.tsx
+++ b/src/app/(marketing)/tools/layout.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import React from 'react';
+import Script from 'next/script';
 import AdBanner from '@/components/ads/AdBanner';
 
 export default function ToolsLayout({
@@ -10,6 +11,13 @@ export default function ToolsLayout({
 }) {
     return (
         <div className="flex flex-col min-h-screen">
+            {/* AdSense script - only loads on tool pages */}
+            <Script
+                async
+                src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2782770414424875"
+                crossOrigin="anonymous"
+                strategy="lazyOnload"
+            />
             <div className="flex-grow relative">
                 {children}
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 176d6d6..674f24b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -114,11 +114,8 @@ export default function RootLayout({
           type="application/ld+json"
           dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteSchema) }}
         />
-        <script
-          async
-          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2782770414424875"
-          crossOrigin="anonymous"
-        />
+        {/* AdSense script removed from global layout to prevent auto-ads on landing pages.
+            Ads are loaded locally via the AdBanner component only on tool pages. */}
       </head>
       <body className="font-sans">
         <Suspense fallback={null}>
diff --git a/src/components/ads/AdBanner.tsx b/src/components/ads/AdBanner.tsx
index 3605040..9443b25 100644
--- a/src/components/ads/AdBanner.tsx
+++ b/src/components/ads/AdBanner.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { useSession } from 'next-auth/react';
 
 interface AdBannerProps {
@@ -17,38 +17,65 @@ export default function AdBanner({
     className = '',
 }: AdBannerProps) {
     const { data: session, status } = useSession();
+    const adRef = useRef<HTMLModElement>(null);
+    const [adFilled, setAdFilled] = useState(false);
 
     // Check if user has a paid plan
-    // Adjust 'pro' or 'premium' based on your actual plan values
     const isPaidUser = session?.user && (
         session.user.plan === 'PRO' ||
         session.user.plan === 'PREMIUM' ||
         session.user.plan === 'LIFETIME'
     );
 
-    const [adLoaded, setAdLoaded] = useState(false);
-
     useEffect(() => {
         // Don't load if loading session or if user is paid
         if (status === 'loading' || isPaidUser) return;
 
-        try {
-            // @ts-ignore
-            (window.adsbygoogle = window.adsbygoogle || []).push({});
-            setAdLoaded(true);
-        } catch (err) {
-            console.error('AdSense error:', err);
-        }
+        const loadAd = () => {
+            try {
+                // @ts-ignore
+                (window.adsbygoogle = window.adsbygoogle || []).push({});
+
+                // Check if ad was filled after a short delay
+                setTimeout(() => {
+                    if (adRef.current) {
+                        const adElement = adRef.current;
+                        // AdSense sets data-ad-status="filled" when an ad loads
+                        const adStatus = adElement.getAttribute('data-ad-status');
+                        if (adStatus === 'filled') {
+                            setAdFilled(true);
+                        }
+                        // Also check if child iframe exists (another indicator)
+                        if (adElement.querySelector('iframe')) {
+                            setAdFilled(true);
+                        }
+                    }
+                }, 1500);
+            } catch (err) {
+                console.error('AdSense error:', err);
+            }
+        };
+
+        // Small delay to ensure DOM is ready
+        const timer = setTimeout(loadAd, 100);
+        return () => clearTimeout(timer);
     }, [isPaidUser, status]);
 
     // Don't render anything if paid user
     if (status === 'authenticated' && isPaidUser) return null;
 
+    // Don't render anything while session is loading
+    if (status === 'loading') return null;
+
     return (
-        <div className={`ad-container my-8 flex justify-center items-center overflow-hidden ${className}`} aria-hidden={true}>
+        <div
+            className={`ad-container flex justify-center items-center overflow-hidden transition-opacity duration-300 ${adFilled ? 'opacity-100' : 'opacity-0 h-0'} ${className}`}
+            aria-hidden={true}
+        >
             <ins
+                ref={adRef}
                 className="adsbygoogle"
-                style={{ display: 'block', minWidth: '300px', minHeight: '50px', width: '100%' }}
+                style={{ display: 'block', minWidth: '300px', width: '100%' }}
                 data-ad-client="ca-pub-2782770414424875"
                 data-ad-slot={dataAdSlot}
                 data-ad-format={dataAdFormat}
