# Werbung / Monetarisierung — toolaro.org

> Notizen zur Werbe-Einrichtung (Monetag). Schwesterseite von kotsch.tech, gleiche Monetag-Konto-Strategie.

## Projekt
- **Next.js 15 App Router** + TypeScript + Prisma + Tailwind. Pfad: `C:\xampp\htdocs\toolaro.org`. Dev-Port 3000 (`start-toolaro.cmd`).
- Tools: Kategorie-Seiten (`src/app/tools/{calculator,converter,developer,...}/page.tsx`) + dynamische Tool-Route `src/app/tools/[slug]/page.tsx`. Übersicht `src/app/tools/page.tsx`.

## Vorhandene Werbe-/Consent-Infrastruktur (sehr sauber, wird wiederverwendet)
- **`src/components/consent/ConsentBanner.tsx`** — DSGVO-Banner. localStorage-Key `toolaro-consent-v1`, speichert `{necessary, ads, statistics, externalMedia, updatedAt}`. Buttons „Alle akzeptieren" / „Nur notwendige" / Einstellungen. Feuert beim Speichern `window` Event **`toolaro-consent-updated`**. „Cookie-Einstellungen öffnen" via Event `toolaro-open-cookie-settings`.
- **`src/components/consent/AdSenseLoader.tsx`** — lädt AdSense-Script nur wenn `consent.ads === true`; hört auf `toolaro-consent-updated`; entfernt Script bei Widerruf. Publisher-ID `ca-pub-4893145615904722` (GLEICHE wie kotsch → ebenfalls abgelehnt → leere Slots).
- **`src/components/ads/AdSlot.tsx`** — Werbeplatz. Props `slot: "banner"|"sidebar"|"in-content"|"rail"`. Zeigt aktuell nur „Werbefläche"-Platzhalter. Versteckt auf `/privacy,/terms,/imprint,/contact`, bei `data-premium=true`, und `rail` auf Startseite `/`.
- **`src/app/layout.tsx`** — 3-Spalten-Grid `[160px_1fr_160px]`: linke `<AdSlot slot="rail">` + main + rechte `<AdSlot slot="rail">` (nur xl, nur !premium). Enthält `<ConsentBanner/>` + `<AdSenseLoader/>` + `<AnalyticsTracker/>`.
- `src/app/ads.txt`, `src/app/robots.ts`, `src/app/sitemap.ts` vorhanden.

## Plan (spiegelt kotsch.tech)
1. **Direct-Link-Banner in `AdSlot`** — wenn Monetag-Direct-Link konfiguriert, statt „Werbefläche" ein klickbares Banner (Vorrang vor leerem AdSense). Reiner `<a rel="sponsored nofollow noopener">` → kein Consent nötig.
2. **`MonetagLoader`-Komponente** (analog `AdSenseLoader`) — lädt In-Page Push + registriert Push-SW (`public/sw.js`) nur bei `consent.ads === true`; hört auf `toolaro-consent-updated`.
3. **AdSense optional aus** (wie kotsch, da abgelehnt) — oder parallel lassen.
4. **Optional**: Test-Seite `/werbung` (noindex) für aggressive Formate (Vignette/Interstitial/Popunder/MultiTag).
5. Config: `src/lib/ads-config.ts` (Zonen/URLs) oder env `NEXT_PUBLIC_MONETAG_*`.

## OFFEN — wird vom Betreiber gebraucht
- **Monetag-Tags für toolaro.org** (eigene Site + eigene Zonen im Monetag-Dashboard anlegen, NICHT die kotsch-Zonen wiederverwenden):
  - Minimum: **In-Page Push** Tag + **Direct Link** URL
  - Optional: **Push** (sw.js-Zone) + **Vignette/Interstitial/Popunder/MultiTag** (für Test-Seite)
- Gleiches Monetag-Konto wie kotsch.tech.

## Umgesetzt (30.06.2026)
- `src/lib/ads.ts` — `MONETAG_DIRECT_LINK` (omg10.com/4/11220624), `MONETAG_TAGS`
  (In-Page Push 11220621/nap5k.com + 11220629/al5sm.com), `AD_VARIANTS`.
- `src/components/ads/DirectLinkBanner.tsx` — neo-brutalistisches Banner (border-2
  border-ink-primary, shadow-[4px_4px_0], brand-500, font-mono, lucide-Icons). Rail = 2
  gestapelte Karten; sidebar = 1 vertikal; banner/in-content = 1 horizontal.
- `src/components/ads/AdSlot.tsx` — rendert DirectLinkBanner statt Platzhalter (wenn
  MONETAG_DIRECT_LINK gesetzt). Hide-Logik (premium/legal/rail-auf-Home) bleibt.
- `src/components/consent/MonetagLoader.tsx` — lädt MONETAG_TAGS erst bei consent.ads
  (hört auf `toolaro-consent-updated`), additiv (kein sauberes Entfernen möglich).
- `src/app/layout.tsx` — `<MonetagLoader/>` eingehängt.
- Verifiziert: Banner rendert auf /tools, links+rechts in den Rails, passt ins Design
  (Screenshot). tsc sauber.

## ⚠️ WICHTIGE LEKTION (30.06.2026) — `next dev` killt den Prod-Build
**Symptom:** Live-Seite zeigte „Application error: a client-side exception" (curl gab aber 200).
**Ursache:** `next dev` und `next start` teilen sich denselben `.next/`-Ordner. Ein `next dev`
zum Testen überschrieb die content-gehashten Client-Chunks, die der laufende Prod-Server
(`next start`, Port 3000) im bereits ausgelieferten HTML referenziert → Browser holt nicht mehr
existierende Chunks → Hydration-Crash. SSR-HTML blieb 200, daher in curl unsichtbar.
**Fix:** `npm run build` (frischer, konsistenter Prod-Build) → Prod-Server neu (der Autostart-
Dienst übernahm 3000 nach dem Kill von selbst und lud den neuen Build). Verifiziert: Startseite
+ /tools laden ohne Crash, 4 Banner in den Rails, Chunks → 200.
**Künftig:** NICHT `next dev` im selben Verzeichnis laufen lassen, während Prod (`next start`)
live ist. Für Tests separates Verzeichnis/Worktree oder Prod kurz stoppen. Nach Code-Änderungen
immer `npm run build` + Prod-Neustart, damit die Live-Seite aktualisiert wird.

## Korrektur 30.06.2026 — Redirect raus + Startseite werbefrei
- **3. Tag 11220629 / al5sm.com ENTFERNT** — verursachte einen **Redirect auf der Startseite**
  (Popunder/Redirect-Format). Aus `MONETAG_TAGS` gestrichen. Nicht wieder aufnehmen.
- **Startseite jetzt KOMPLETT werbefrei**: `AdSlot` versteckt auf `/` ALLE Slots (vorher nur
  `rail`) und rendert erst nach Mount (`mounted`-Guard) → kein Banner im SSR, kein Aufblitzen.
- **MonetagLoader** lädt Overlay-Tags NICHT auf `/` + Rechts-/Konto-Seiten (privacy/terms/
  imprint/contact/login/account/admin/reset-password) — nur auf Inhalts-/Tool-Seiten.
- Verifiziert (Prod, mit akzeptiertem Consent): Startseite = 0 Scripts/0 Banner/kein Redirect;
  /tools = 4 Banner + In-Page Push (nap5k), KEIN al5sm, kein Crash.

## Bugfix 30.06.2026 — Werbung blieb nach Soft-Navigation hängen
**Symptom:** Startseite (kein Banner) → Tool-Seite (Banner kommt) → per Klick zurück zur
Startseite → Banner blieb stehen; erst harter Reload entfernte es.
**Ursache:** `AdSlot` + `MonetagLoader` bestimmten die Route per `window.location.pathname` in
`useEffect([])` — läuft nur EINMAL. Das Root-Layout bleibt bei Next-App-Router-Soft-Navigation
gemountet → kein Re-Run → stale Route → Banner/Script blieben.
**Fix:** beide nutzen jetzt **`usePathname()`** (aus `next/navigation`) → reagieren auf jede
Client-Navigation. AdSlot bewertet `isHome`/`legal` pro Render neu; MonetagLoader hat
`useEffect([pathname])` und **entfernt** auf gesperrten Seiten die injizierten Scripts wieder.
**Verifiziert (Prod, Soft-Nav):** Start→Tool→Start→Tool: Banner & In-Page Push erscheinen/
verschwinden korrekt pro Seite; Startseite bleibt immer werbefrei.

## Banner-Anzahl je Seite (30.06.2026)
`src/lib/ads.ts` → `RAIL_BANNERS = { left, right }` steuert die Anzahl gestapelter Banner pro
Seitenleiste. Aktuell **links 2, rechts 4** (rechts „voll", da dort kein Inhalt ist). `AdSlot`
bekommt `side="left"|"right"` aus dem Layout, `DirectLinkBanner` rendert entsprechend viele
Karten (Varianten zyklisch). Nur Desktop ≥1280px sichtbar — auf dem Handy sind die Leisten
`hidden xl:block` (verifiziert: 0 sichtbare Banner bei 375px). Anzahl ändern = Werte in
RAIL_BANNERS + `npm run build` + Prod-Neustart.

## OFFEN / zu klären
- **AdSense**: ID ca-pub-4893145615904722 (abgelehnt, leer). AdSenseLoader lädt es weiter
  bei consent.ads (zeigt nichts). Wie kotsch ausschalten? (env/Flag)
- **Live**: Prod-Server (Port 3000, Autostart) zeigt Änderungen erst nach `npm run build`
  + Neustart. Dev-Server (`npm run dev`, bzw. Port 3200) zeigt sofort.
- **Push / Test-Seite /werbung**: optional, wie kotsch — bei Bedarf.
- **Git**: eigenes toolaro-Repo → separat committen.