diff --git a/ADSENSE.md b/ADSENSE.md new file mode 100644 index 0000000..1955f1f --- /dev/null +++ b/ADSENSE.md @@ -0,0 +1,130 @@ +# 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 + +- Header-Komponente: [HeaderAdBanner.vue](/mnt/share/torsten/Programs/SingleChat/client/src/components/HeaderAdBanner.vue) +- Einbindung in die Kopfzeilen: + - [ChatView.vue](/mnt/share/torsten/Programs/SingleChat/client/src/views/ChatView.vue) + - [PartnersView.vue](/mnt/share/torsten/Programs/SingleChat/client/src/views/PartnersView.vue) + - [FeedbackView.vue](/mnt/share/torsten/Programs/SingleChat/client/src/views/FeedbackView.vue) + +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: + +```txt +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](/mnt/share/torsten/Programs/SingleChat/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: + +```env +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`: + +```bash +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. diff --git a/client/src/components/HeaderAdBanner.vue b/client/src/components/HeaderAdBanner.vue new file mode 100644 index 0000000..a3a6c09 --- /dev/null +++ b/client/src/components/HeaderAdBanner.vue @@ -0,0 +1,80 @@ + + + + + diff --git a/client/src/views/ChatView.vue b/client/src/views/ChatView.vue index 8fadf11..ac218ff 100644 --- a/client/src/views/ChatView.vue +++ b/client/src/views/ChatView.vue @@ -8,6 +8,7 @@

Chat

+
{{ chatStore.userName }} {{ chatStore.isoCountryCode }} @@ -89,6 +90,7 @@ import SearchView from '../components/SearchView.vue'; import InboxView from '../components/InboxView.vue'; import HistoryView from '../components/HistoryView.vue'; import ImprintContainer from '../components/ImprintContainer.vue'; +import HeaderAdBanner from '../components/HeaderAdBanner.vue'; const chatStore = useChatStore(); diff --git a/client/src/views/FeedbackView.vue b/client/src/views/FeedbackView.vue index 7a09861..a864229 100644 --- a/client/src/views/FeedbackView.vue +++ b/client/src/views/FeedbackView.vue @@ -8,6 +8,7 @@

Feedback

+ @@ -18,5 +19,6 @@ diff --git a/client/src/views/PartnersView.vue b/client/src/views/PartnersView.vue index 3abf573..5a6182a 100644 --- a/client/src/views/PartnersView.vue +++ b/client/src/views/PartnersView.vue @@ -1,7 +1,14 @@