diff --git a/client/ADS-INTEGRATION.md b/client/ADS-INTEGRATION.md index cdfc61a..5d4026e 100644 --- a/client/ADS-INTEGRATION.md +++ b/client/ADS-INTEGRATION.md @@ -1,3 +1,11 @@ +Aktuell habe ich das In‑Page Push Snippet, das du gepostet hast, als Default eingebaut: +```html + +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. diff --git a/client/src/components/HeaderAdBanner.vue b/client/src/components/HeaderAdBanner.vue index d011416..1f1ca3e 100644 --- a/client/src/components/HeaderAdBanner.vue +++ b/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); }