Änderung der werbung

client/ADS-INTEGRATION.md

@@ -1,78 +1,31 @@
-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`)
+# Header-Ad Integration
 
-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.
+Aktuell nutzt `YpChat` im Header eine direkte Adsterra-Integration ueber `HeaderAdBanner.vue`.
 
-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.
-Kurz: Anleitung zur Aktivierung des Header‑Ads (Propeller / AdSense)
+Verwendete Placements:
 
-1) Umgebungsvariablen
-- Lege in deiner lokalen Umgebung (z. B. `.env.local`) folgende Variablen an:
-  - `VITE_AD_PROVIDER=propeller`  # oder `adsense`
-  - `VITE_PROP_SCRIPT_URL=https://example-propeller.example/ads.js`  # Propeller: Script/Endpoint
-  - `VITE_PROP_SLOT=YOUR_PROP_SLOT_ID`
-  - `VITE_ADSENSE_CLIENT=ca-pub-XXXXXXXXXXXX`  # nur bei AdSense
-  - `VITE_ADSENSE_HEADER_SLOT=NNNNNNNNNN`      # nur bei AdSense
-  - `VITE_HEADER_STICKY=true`  # `true`=thin sticky header, `false`=static
+- Mobile: `320x50`
+  - Key: `fb9b5e7f817d40d72943dae0c54eb769`
+- Desktop: `468x60`
+  - Key: `2b658317c1e28b4b4f234d26c8fca28d`
 
-2) Was ich bereits implementiert habe
-- `client/src/components/HeaderAdBanner.vue` wurde erweitert: unterstützt `propeller` + `adsense`, lazy load nach Interaktion, prüft `localStorage('ads_consent')`, und kann sticky sein.
-- `HeaderAdBanner` wurde in die Chat‑Ansicht eingebaut: [client/src/views/ChatView.vue](client/src/views/ChatView.vue)
+Die Komponente waehlt automatisch anhand der Viewport-Breite:
 
-3) Consent‑Handling (was du tun musst)
-- Der Code wartet auf einen Consent-Wert in `localStorage` unter dem Key `ads_consent` (Wert `'true'`).
-- Du solltest eine Consent‑UI (CMP / IAB TCF) implementieren, die nach Zustimmung `localStorage.setItem('ads_consent','true')` setzt und das Event `window.dispatchEvent(new Event('ads:consent-granted'))` feuert.
-- Kurztest (ohne CMP): Öffne die Konsole und führe aus:
-  ```js
-  localStorage.setItem('ads_consent','true');
-  window.dispatchEvent(new Event('ads:consent-granted'));
-  ```
+- bis `720px`: `320x50`
+- ab `721px`: `468x60`
 
-4) Propeller‑Integration
-- Propeller liefert normalerweise ein Provider‑Snippet. Trage die korrekte `VITE_PROP_SCRIPT_URL` und `VITE_PROP_SLOT` ein.
-- Falls Propeller ein Inline‑Div erwartet, liefere mir das Snippet/Anweisungen und ich passe `HeaderAdBanner.vue` an (derzeit wird ein iframe mit `?slot=` angehängt als generischer Fallback).
+Einbauorte:
 
-5) Test & Dev
-- Dev starten:
-  ```bash
-  cd client
-  npm install
-  npm run dev
-  ```
-- Besuche eine Chat‑Konversation (eingeloggt) und prüfe, ob das Header‑Ad nach Interaktion oder Consent geladen wird.
+- [client/src/components/HeaderAdBanner.vue](/mnt/share/torsten/Programs/SingleChat/client/src/components/HeaderAdBanner.vue)
+- [client/src/views/ChatView.vue](/mnt/share/torsten/Programs/SingleChat/client/src/views/ChatView.vue)
+- weitere SEO-/Info-Seiten mit `HeaderAdBanner`
 
-6) A/B‑Test‑Vorschlag (kurz)
-- Variante A: statischer Header (VITE_HEADER_STICKY=false)
-- Variante B: thin sticky header (VITE_HEADER_STICKY=true)
-- Metriken: RPM, CTR, Session Length, Bounce Rate. Testlauf: 2 Wochen oder mind. 10k Seitenaufrufe pro Variante.
+Technik:
 
-Hinweis: Die Anwendung weist jedem neuen Besucher automatisch eine Variante zu (localStorage `ads_ab_variant` = `A` oder `B`).
+- Adsterra `IFRAME SYNC`
+- Script-Quelle:
+  - `https://www.highperformanceformat.com/<key>/invoke.js`
 
-Kurzbefehle zum Debugging:
-- Aktuelle Variante anzeigen:
-  ```js
-  localStorage.getItem('ads_ab_variant')
-  ```
-- Variante zurücksetzen (erneute Zuteilung bei Neuaufruf):
-  ```js
-  localStorage.removeItem('ads_ab_variant');
-  location.reload();
-  ```
+Aktuell gibt es keine zusaetzliche Consent-, Provider- oder Fallback-Logik mehr in dieser Komponente.
 
-Events:
-- `ads:ab-assigned` → Fired when a user is assigned to A or B. Detail: `{variant:'A'|'B'}`.
-- `ads:load-start` and `ads:loaded` → Fired around ad load with `{provider, variant}`.
-
-7) Monitoring & Events (optional)
-- Um schnelle Messungen zu erhalten, feuere ein Custom Event beim Ad‑Load:
-  ```js
-  window.dispatchEvent(new CustomEvent('ads:loaded',{detail:{provider: 'propeller'}}))
-  ```
-- Du kannst im Frontend listeners registrieren und diese Events an dein Analytics (Matomo/GA4) weiterleiten.
-
-Wenn du mir jetzt die echte `VITE_PROP_SCRIPT_URL` und `VITE_PROP_SLOT` gibst, baue ich das Inline‑Snippet exakt so ein, wie Propeller es erwartet. Möchtest du, dass ich auch eine minimale Consent‑UI direkt in `client` ergänze (ein einfacher Banner mit Zustimmen/ablehnen)?
+Wenn neue Banner-Formate kommen, muessen nur die Keys und Groessen in `HeaderAdBanner.vue` angepasst werden.