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

This commit is contained in:
Torsten Schulz (local)
2026-05-18 15:12:35 +02:00
parent 44dd757243
commit 0f6ba9222b
2 changed files with 31 additions and 15 deletions

View File

@@ -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);
}