tknuth
/
QR-master
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adsense

This commit is contained in:
Timo Knuth 2026-01-12 17:22:20 +01:00
parent b3e858c033
commit 5784a52e3c
3 changed files with 50 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/(marketing)/tools/layout.tsx
View File

@ -1,6 +1,7 @@
'use client'; 'use client';
import React from 'react'; import React from 'react';
import Script from 'next/script';
import AdBanner from '@/components/ads/AdBanner'; import AdBanner from '@/components/ads/AdBanner';
export default function ToolsLayout({ export default function ToolsLayout({
@ -10,6 +11,13 @@ export default function ToolsLayout({
}) { }) {
return ( return (
<div className="flex flex-col min-h-screen"> <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"> <div className="flex-grow relative">
{children} {children}

7
src/app/layout.tsx
View File

@ -114,11 +114,8 @@ export default function RootLayout({
type="application/ld+json" type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteSchema) }} dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteSchema) }}
/> />
<script {/* AdSense script removed from global layout to prevent auto-ads on landing pages.
async Ads are loaded locally via the AdBanner component only on tool pages. */}
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2782770414424875"
crossOrigin="anonymous"
/>
</head> </head>
<body className="font-sans"> <body className="font-sans">
<Suspense fallback={null}> <Suspense fallback={null}>

53
src/components/ads/AdBanner.tsx
View File

@ -1,6 +1,6 @@
'use client'; 'use client';
import { useEffect, useState } from 'react'; import { useEffect, useState, useRef } from 'react';
import { useSession } from 'next-auth/react'; import { useSession } from 'next-auth/react';
interface AdBannerProps { interface AdBannerProps {
@ -17,38 +17,65 @@ export default function AdBanner({
className = '', className = '',
}: AdBannerProps) { }: AdBannerProps) {
const { data: session, status } = useSession(); const { data: session, status } = useSession();
const adRef = useRef<HTMLModElement>(null);
const [adFilled, setAdFilled] = useState(false);
// Check if user has a paid plan // Check if user has a paid plan
// Adjust 'pro' or 'premium' based on your actual plan values
const isPaidUser = session?.user && ( const isPaidUser = session?.user && (
session.user.plan === 'PRO' || session.user.plan === 'PRO' ||
session.user.plan === 'PREMIUM' || session.user.plan === 'PREMIUM' ||
session.user.plan === 'LIFETIME' session.user.plan === 'LIFETIME'
); );
const [adLoaded, setAdLoaded] = useState(false);
useEffect(() => { useEffect(() => {
// Don't load if loading session or if user is paid // Don't load if loading session or if user is paid
if (status === 'loading' || isPaidUser) return; if (status === 'loading' || isPaidUser) return;
try { const loadAd = () => {
// @ts-ignore try {
(window.adsbygoogle = window.adsbygoogle || []).push({}); // @ts-ignore
setAdLoaded(true); (window.adsbygoogle = window.adsbygoogle || []).push({});
} catch (err) {
console.error('AdSense error:', err); // 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]); }, [isPaidUser, status]);
// Don't render anything if paid user // Don't render anything if paid user
if (status === 'authenticated' && isPaidUser) return null; if (status === 'authenticated' && isPaidUser) return null;
// Don't render anything while session is loading
if (status === 'loading') return null;
return ( 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 <ins
ref={adRef}
className="adsbygoogle" 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-client="ca-pub-2782770414424875"
data-ad-slot={dataAdSlot} data-ad-slot={dataAdSlot}
data-ad-format={dataAdFormat} data-ad-format={dataAdFormat}