Add a header ad component to various pages across the platform

Introduce a new `HeaderAd` component for displaying AdSense ads on multiple pages, including `FolxStadlPage`, `GeschichteLiedPage`, `GipfelstammtischPage`, `Impressum`, `LivePage`, `PrivacyPolicy`, `TermsOfService`, `VideoPage`, `admin`, `home`, and `not-found`. This component is implemented in `client/src/components/HeaderAd.tsx` and integrated into the respective page components. 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/HUI2eAX
2025-09-28 13:14:57 +00:00
parent 235dc584ec
commit 831d254261
13 changed files with 78 additions and 4 deletions
@@ -0,0 +1,34 @@
+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-4 bg-bunny-dark" ref={adRef}>
+      {/* Fixed Header/Footer Ad */}
+      <ins 
+        className="adsbygoogle"
+        style={{ display: 'inline-block', width: '728px', height: '90px' }}
+        data-ad-client="ca-pub-4465464714854276"
+        data-ad-slot="7241323742"
+      />
+    </div>
+  );
+}