8319b43835
- 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.
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/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.
|