diff --git a/docs/anleitungen/ANALYTICS_IMPLEMENTATION_GUIDE.md b/docs/anleitungen/ANALYTICS_IMPLEMENTATION_GUIDE.md new file mode 100644 index 0000000..3704287 --- /dev/null +++ b/docs/anleitungen/ANALYTICS_IMPLEMENTATION_GUIDE.md @@ -0,0 +1,963 @@ +# ANALYTICS-LÖSUNG: Implementierungsübersicht für Payload CMS + +## Kontext + +Du entwickelst das Multi-Tenant Payload CMS Backend und Next.js Frontend für 4 Websites. Diese Dokumentation beschreibt die implementierte Analytics-Lösung, die du in das Frontend integrieren musst. + +--- + +## Architektur-Übersicht + +``` +┌─────────────────────────────────────────────────────────────────────────────────────┐ +│ ANALYTICS ARCHITEKTUR │ +│ │ +│ ┌─────────────────────────────────────────────────────────────────────────────┐ │ +│ │ OHNE CONSENT (immer aktiv) │ │ +│ │ │ │ +│ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ +│ │ │ UMAMI ANALYTICS │ │ │ +│ │ │ │ │ │ +│ │ │ Server: sv-analytics (10.10.181.103:3000) │ │ │ +│ │ │ Dashboard: http://10.10.181.103:3000 │ │ │ +│ │ │ Script: /custom.js (Anti-Adblock) │ │ │ +│ │ │ Endpoint: /api/send │ │ │ +│ │ │ │ │ │ +│ │ │ Features: │ │ │ +│ │ │ • Cookieless Tracking (DSGVO-konform ohne Einwilligung) │ │ │ +│ │ │ • Pageviews, Sessions, Referrer, UTM-Parameter │ │ │ +│ │ │ • Custom Events (Newsletter, Formulare, CTAs, Downloads) │ │ │ +│ │ │ • 100% Erfassung aller Besucher │ │ │ +│ │ └─────────────────────────────────────────────────────────────────────┘ │ │ +│ └─────────────────────────────────────────────────────────────────────────────┘ │ +│ │ +│ ┌─────────────────────────────────────────────────────────────────────────────┐ │ +│ │ MIT CONSENT (Kategorie: "marketing") │ │ +│ │ │ │ +│ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ +│ │ │ GOOGLE ADS CONVERSION │ │ │ +│ │ │ │ │ │ +│ │ │ Client-Side (bei Consent): │ │ │ +│ │ │ • Google Ads Tag (gtag.js) │ │ │ +│ │ │ • Conversion Tracking │ │ │ +│ │ │ • Remarketing Audiences │ │ │ +│ │ │ │ │ │ +│ │ │ Server-Side (immer, anonymisiert): │ │ │ +│ │ │ • Google Ads Conversion API │ │ │ +│ │ │ • Enhanced Conversions (gehashte E-Mail) │ │ │ +│ │ │ • GCLID-basierte Attribution │ │ │ +│ │ └─────────────────────────────────────────────────────────────────────┘ │ │ +│ │ │ │ +│ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ +│ │ │ GOOGLE CONSENT MODE v2 │ │ │ +│ │ │ │ │ │ +│ │ │ Integration mit bestehendem Orestbida Consent-Banner │ │ │ +│ │ │ Kategorie "marketing" steuert: │ │ │ +│ │ │ • ad_storage │ │ │ +│ │ │ • ad_user_data │ │ │ +│ │ │ • ad_personalization │ │ │ +│ │ └─────────────────────────────────────────────────────────────────────┘ │ │ +│ └─────────────────────────────────────────────────────────────────────────────┘ │ +│ │ +└─────────────────────────────────────────────────────────────────────────────────────┘ +``` + +--- + +## Infrastruktur + +### Umami Server + +| Eigenschaft | Wert | +|-------------|------| +| **Server** | sv-analytics (LXC 703) | +| **IP** | 10.10.181.103 | +| **Port** | 3000 | +| **Dashboard** | http://10.10.181.103:3000 | +| **Tracking Script** | http://10.10.181.103:3000/custom.js | +| **API Endpoint** | http://10.10.181.103:3000/api/send | +| **Datenbank** | PostgreSQL auf sv-postgres (umami_analytics) | + +### Website-IDs (Multi-Tenant) + +Nach Umami-Setup werden diese IDs vergeben: + +```typescript +// src/config/analytics.ts + +export const UMAMI_WEBSITE_IDS: Record = { + 'porwoll.de': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', + 'complexcaresolutions.de': 'yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy', + 'gunshin.de': 'zzzzzzzz-zzzz-zzzz-zzzz-zzzzzzzzzzzz', + 'zweitmeinu.ng': 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa', +} + +export const UMAMI_HOST = process.env.NEXT_PUBLIC_UMAMI_HOST || 'http://10.10.181.103:3000' +``` + +--- + +## Frontend-Integration + +### 1. Umami Script Komponente + +```typescript +// src/components/analytics/UmamiScript.tsx + +'use client' + +import Script from 'next/script' + +interface UmamiScriptProps { + websiteId: string + host?: string +} + +export function UmamiScript({ + websiteId, + host = 'http://10.10.181.103:3000' +}: UmamiScriptProps) { + if (!websiteId) return null + + return ( +