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.
This commit is contained in:
Torsten Schulz (local)
130
ADSENSE.md
Normal file
130
ADSENSE.md
Normal file
@@ -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.
|
||||
Reference in New Issue
Block a user