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';
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}

7
src/app/layout.tsx
View File

@ -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}>

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

@ -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}