131 lines
3.8 KiB
Markdown
131 lines
3.8 KiB
Markdown
# 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/YpChat/client/src/components/HeaderAdBanner.vue)
|
|
- Einbindung in die Kopfzeilen:
|
|
- [ChatView.vue](/mnt/share/torsten/Programs/YpChat/client/src/views/ChatView.vue)
|
|
- [PartnersView.vue](/mnt/share/torsten/Programs/YpChat/client/src/views/PartnersView.vue)
|
|
- [FeedbackView.vue](/mnt/share/torsten/Programs/YpChat/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/YpChat/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.
|