videofolxtv/client/src/components/HeaderAd.tsx
sebastjanartic f67af040c0 Update ad sizes and placement for improved user experience
Update the `HeaderAd.tsx` component to use a 970x90px desktop ad slot and adjust the `home.tsx` page to display the same ad size before the footer.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 45a1dcfc-f8a2-475a-a6b9-96fbb841dc27
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/45a1dcfc-f8a2-475a-a6b9-96fbb841dc27/RzcERJv
2025-09-28 13:52:58 +00:00

50 lines
1.3 KiB
TypeScript

import { useEffect, useRef } from 'react';
export default function HeaderAd() {
const adRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const initializeAd = () => {
const insElement = adRef.current?.querySelector('ins');
if (!insElement || insElement.dataset.adsbygoogleStatus === 'done') return;
try {
// @ts-ignore
(window.adsbygoogle = window.adsbygoogle || []).push({});
} catch (error) {
console.error('Header AdSense initialization error:', error);
}
};
// Initialize the ad immediately
initializeAd();
}, []);
return (
<div className="w-full flex justify-center py-1 bg-bunny-dark" ref={adRef}>
{/* Mobile: 320x50px */}
<ins
className="adsbygoogle md:hidden"
style={{
display: 'inline-block',
width: '320px',
height: '50px'
}}
data-ad-client="ca-pub-4465464714854276"
data-ad-slot="7241323742"
/>
{/* Desktop: 970x90px Wide Header Ad */}
<ins
className="adsbygoogle hidden md:inline-block"
style={{
display: 'inline-block',
width: '970px',
height: '90px'
}}
data-ad-client="ca-pub-4465464714854276"
data-ad-slot="6554928035"
/>
</div>
);
}