dd8ec301e2
Introduce AdSenseAd component and integrate it across multiple pages (VideoPage, Home) to display various ad formats, including header, sidebar, and mid-content placements. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 946a0075-7e32-454b-b348-9e7f576d7f45 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/946a0075-7e32-454b-b348-9e7f576d7f45/tiAdL5T
56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|
|
|
interface AdSenseAdProps {
|
|
adSlot: string;
|
|
adFormat?: 'auto' | 'rectangle' | 'vertical' | 'horizontal';
|
|
width?: number;
|
|
height?: number;
|
|
className?: string;
|
|
}
|
|
|
|
export default function AdSenseAd({
|
|
adSlot,
|
|
adFormat = 'auto',
|
|
width,
|
|
height,
|
|
className = ''
|
|
}: AdSenseAdProps) {
|
|
const adRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
// Ensure adsbygoogle is loaded
|
|
if (typeof window !== 'undefined') {
|
|
// @ts-ignore
|
|
(window.adsbygoogle = window.adsbygoogle || []).push({});
|
|
}
|
|
} catch (error) {
|
|
console.error('AdSense initialization error:', error);
|
|
}
|
|
}, []);
|
|
|
|
const adStyle: React.CSSProperties = {
|
|
display: 'block'
|
|
};
|
|
|
|
if (adFormat !== 'auto' && width && height) {
|
|
adStyle.width = `${width}px`;
|
|
adStyle.height = `${height}px`;
|
|
} else {
|
|
adStyle.width = '100%';
|
|
adStyle.height = 'auto';
|
|
}
|
|
|
|
return (
|
|
<div className={`adsense-wrapper ${className}`} ref={adRef}>
|
|
<ins
|
|
className="adsbygoogle"
|
|
style={adStyle}
|
|
data-ad-client="ca-pub-4465464714854276"
|
|
data-ad-slot={adSlot}
|
|
data-ad-format={adFormat}
|
|
data-full-width-responsive="true"
|
|
/>
|
|
</div>
|
|
);
|
|
} |