# 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.