torsten/singlechat
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
singlechat/ADSENSE.md
Torsten Schulz (local) 8319b43835 Add HeaderAdBanner component to ChatView, FeedbackView, and PartnersView 
- Integrated HeaderAdBanner into ChatView.vue, FeedbackView.vue, and PartnersView.vue to enhance advertising capabilities.
- Updated PartnersView.vue to include a new app branding structure for improved visual hierarchy.

These changes collectively improve the user interface and advertising integration across multiple views.
2026-03-19 15:25:42 +01:00

3.8 KiB
Raw Permalink Blame History

AdSense in SingleChat

Ziel

Im Header kann ein Google-AdSense-Banner eingeblendet werden. Die Einbindung ist bereits vorbereitet, aber nur aktiv, wenn die passenden Vite-Variablen gesetzt sind.

Bereits im Code vorbereitet

Aktiv wird der Banner nur mit:

  • VITE_ADSENSE_CLIENT
  • VITE_ADSENSE_HEADER_SLOT

Was bei Google AdSense erledigt werden muss

1. AdSense-Konto und Website

In AdSense selbst:

  1. Website ypchat.net hinzufügen
  2. Eigentum/Einbindung abschließen
  3. Warten, bis die Website von Google geprüft und freigegeben wurde

Ohne freigegebene Website werden in der Regel keine regulären Anzeigen ausgeliefert.

2. Anzeigenblock anlegen

Für den Header in AdSense einen normalen responsiven Display-Anzeigenblock anlegen.

Benötigt werden daraus:

  • Publisher-ID Beispiel: ca-pub-1234567890123456
  • Slot-ID des Header-Anzeigenblocks Beispiel: 1234567890

3. ads.txt korrekt pflegen

AdSense erwartet in der Regel einen korrekten Eintrag in /ads.txt.

Für Google AdSense ist das Format typischerweise:

google.com, pub-1234567890123456, DIRECT, f08c47fec0942fa0

Wichtig:

  • pub-... muss zu deinem echten AdSense-Konto passen
  • die Datei muss öffentlich unter https://ypchat.net/ads.txt erreichbar sein
  • Änderungen brauchen oft etwas Zeit, bis Google sie erkennt

Im Projekt liegt aktuell eine Datei unter docroot/ads.txt. Diese muss auf deine echte Publisher-ID geprüft und ggf. angepasst werden.

Was im Projekt erledigt werden muss

1. Vite-Variablen setzen

In der Projekt-.env die beiden Werte ergänzen:

VITE_ADSENSE_CLIENT=ca-pub-1234567890123456
VITE_ADSENSE_HEADER_SLOT=1234567890

Hinweis:

  • VITE_... ist notwendig, damit die Werte im Client verfügbar sind
  • ohne diese Werte bleibt der Banner automatisch unsichtbar

2. Frontend neu bauen

Nach Änderung der .env:

cd client
npm run build

Danach wie bisher den Build nach docroot/dist deployen.

3. Server/Deployment aktualisieren

Je nach Deploy-Prozess:

  1. neuen Client-Build deployen
  2. prüfen, dass docroot/dist aktuell ist
  3. Service neu starten oder Deployment neu laden

Prüfung nach dem Deploy

Technisch

Prüfen:

  • ist im HTML ein AdSense-Script geladen?
  • erscheint im Header ein reservierter Anzeigenbereich?
  • gibt es Fehler in der Browser-Konsole?

Extern

Prüfen:

  • https://ypchat.net/ads.txt ist erreichbar
  • AdSense zeigt keinen ads.txt-Fehler mehr
  • die Website ist in AdSense als bereit/freigegeben markiert

Wichtige Hinweise

  • Im lokalen Development erscheinen AdSense-Anzeigen oft nicht sinnvoll oder gar nicht.
  • Nach dem ersten Einbau kann es dauern, bis Google echte Anzeigen ausliefert.
  • Wenn Header-Anzeigen die UX zu stark stören, sollte der Banner auf Mobile ausgeblendet bleiben. Das ist im Code bereits berücksichtigt.
  • Für Consent-/CMP-Themen kann je nach Land eine zusätzliche Einwilligungslösung nötig sein. Das ist aktuell nicht Teil dieser Implementierung.

Kurz-Checkliste

  1. In AdSense Website hinzufügen und freigeben lassen.
  2. Header-Display-Ad-Unit anlegen.
  3. Publisher-ID und Slot-ID notieren.
  4. docroot/ads.txt auf korrekten Google-Eintrag prüfen.
  5. .env mit VITE_ADSENSE_CLIENT und VITE_ADSENSE_HEADER_SLOT ergänzen.
  6. Client neu bauen.
  7. Deployen.
  8. Live prüfen, ob ads.txt und Banner korrekt ausgeliefert werden.
Reference in New Issue View Git Blame Copy Permalink