Aktualisiere HeaderAdBanner-Komponente mit Standardwerten für Propeller-Anzeigen und verbessere die Skriptintegration

client/ADS-INTEGRATION.md

@@ -1,3 +1,11 @@
+Aktuell habe ich das In‑Page Push Snippet, das du gepostet hast, als Default eingebaut:
+```html
+<script>(function(s){s.dataset.zone='11023637',s.src='https://nap5k.com/tag.min.js'})([document.documentElement, document.body].filter(Boolean).pop().appendChild(document.createElement('script')))</script>
+Das ist jetzt die Standard‑Konfiguration in `HeaderAdBanner.vue` wenn `VITE_AD_PROVIDER=propeller` ist. Du kannst die Werte via Env überschreiben:
+- `VITE_PROP_SCRIPT_URL` (default `https://nap5k.com/tag.min.js`)
+- `VITE_PROP_SLOT` (default `11023637`)
+
+Wenn du später ein anderes Format/Zone anlegen willst, gib mir die neue Zone‑ID oder das komplette Snippet, dann passe ich es an.
 Live testen (empfohlen): kopiere die Datei in dein Produktions‑Dokument‑Root so, dass sie unter `https://yourdomain/scripts/sw.js` erreichbar ist. In diesem Repo habe ich die Datei zusätzlich ins Projekt‑Root (`/sw.js`) und in [docroot/sw.js](docroot/sw.js) gelegt.
 
 Live testen (empfohlen): kopiere die Datei in dein Produktions‑Dokument‑Root so, dass sie unter `https://yourdomain/sw.js` erreichbar ist (Root Pfad). In diesem Repo habe ich die Datei zusätzlich ins Projekt‑Root (`/sw.js`) und in [docroot/sw.js](docroot/sw.js) gelegt.

client/src/components/HeaderAdBanner.vue

@@ -17,8 +17,9 @@ const adClient = import.meta.env.VITE_ADSENSE_CLIENT || '';
 const adSlot = import.meta.env.VITE_ADSENSE_HEADER_SLOT || '';
 
 // Propeller config: you can set the script URL and the slot id via env
-const propScriptUrl = import.meta.env.VITE_PROP_SCRIPT_URL || '';
-const propSlotId = import.meta.env.VITE_PROP_SLOT || '';
+// Defaults set to the in-page push tag you provided (can be overridden via env)
+const propScriptUrl = import.meta.env.VITE_PROP_SCRIPT_URL || 'https://nap5k.com/tag.min.js';
+const propSlotId = import.meta.env.VITE_PROP_SLOT || '11023637';
 
 // Show only if the selected provider has config
 const isEnabled = computed(() => {
@@ -89,20 +90,27 @@ function ensureScriptLoaded(src, attrName) {
 async function renderPropeller() {
   if (!adContainer.value) return;
   try {
-    await ensureScriptLoaded(propScriptUrl, 'propeller');
-    // Provider-specific insertion: Propeller usually exposes a global builder or expects a div with an id.
-    // We create a lightweight iframe fallback that publishers can map on Propeller dashboard by slot id.
-    const iframe = document.createElement('iframe');
-    iframe.width = '100%';
-    iframe.height = '90';
-    iframe.frameBorder = '0';
-    iframe.scrolling = 'no';
-    iframe.style.border = '0';
-    iframe.title = 'Advertisement';
-    // Minimal message to the ad server; the exact ad markup is controlled via the external propeller script/endpoint.
-    iframe.src = `${propScriptUrl}?slot=${encodeURIComponent(propSlotId)}&responsive=1`;
+    // Insert Propeller in-page push tag exactly as provided by PropellerAds.
+    // Avoid duplicate insertion if same script+zone already present.
+    if (document.querySelector(`script[src="${propScriptUrl}"][data-zone="${propSlotId}"]`)) {
+      return;
+    }
+
+    const s = document.createElement('script');
+    s.dataset.zone = propSlotId;
+    s.src = propScriptUrl;
+    s.async = true;
+
+    // Append to the document (documentElement or body) like the snippet does
+    const target = [document.documentElement, document.body].filter(Boolean).pop();
+    if (target) target.appendChild(s);
+
+    // Clear container so the ad can render without duplicates
     adContainer.value.innerHTML = '';
-    adContainer.value.appendChild(iframe);
+    // Propeller will usually inject the ad into the page; keep a placeholder node
+    const placeholder = document.createElement('div');
+    placeholder.className = 'propeller-ad-placeholder';
+    adContainer.value.appendChild(placeholder);
   } catch (err) {
     console.warn('Propeller ad load failed', err);
   }