Integrate ads to enhance platform monetization and user engagement

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
2025-09-04 16:24:43 +00:00
parent 8a497293cb
commit dd8ec301e2
3 changed files with 116 additions and 0 deletions
@@ -0,0 +1,56 @@
+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>
+  );
+}