From 0101447d8422e8ef905d39c955df9c6248598cb6 Mon Sep 17 00:00:00 2001 From: Tim Leikauf Date: Wed, 1 Jul 2026 20:59:29 +0200 Subject: [PATCH] =?UTF-8?q?Add=20PostHog=20analytics=20=E2=80=94=20full=20?= =?UTF-8?q?event=20tracking=20across=20all=20pages?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tracks pageviews, hero/CTA clicks, product teaser clicks, app card and detail views, newsletter signups, nav interactions, and footer link clicks with structured properties for PostHog dashboards. Co-Authored-By: Claude Sonnet 4.6 --- app/apps/fittimo/page.tsx | 20 +++++--- app/apps/page.tsx | 10 ++-- app/apps/rezeptimo/page.tsx | 20 +++++--- app/apps/snakkimo/page.tsx | 20 +++++--- app/layout.tsx | 9 ++-- app/page.tsx | 36 ++++++++++--- app/shop/page.tsx | 15 +++--- components/PostHogProvider.tsx | 21 ++++++++ components/ui/Footer.tsx | 28 ++++++---- components/ui/Nav.tsx | 16 ++++-- components/ui/NewsletterForm.tsx | 8 ++- lib/posthog.ts | 13 +++++ package-lock.json | 87 ++++++++++++++++++++++++++++++++ package.json | 9 ++-- 14 files changed, 248 insertions(+), 64 deletions(-) mode change 100644 => 100755 app/layout.tsx create mode 100644 components/PostHogProvider.tsx mode change 100644 => 100755 components/ui/NewsletterForm.tsx create mode 100644 lib/posthog.ts mode change 100644 => 100755 package.json diff --git a/app/apps/fittimo/page.tsx b/app/apps/fittimo/page.tsx index 647994c..49258a8 100644 --- a/app/apps/fittimo/page.tsx +++ b/app/apps/fittimo/page.tsx @@ -1,10 +1,8 @@ -import type { Metadata } from 'next' -import Link from 'next/link' +'use client' -export const metadata: Metadata = { - title: 'Fittimo – Bewegung im Alltag | HyggeCraftery', - description: 'Sanfte Bewegung und Atemübungen für Körper und Geist im Einklang.', -} +import Link from 'next/link' +import { useEffect } from 'react' +import { posthog } from '@/lib/posthog' const accent = '#7DAF8A' @@ -16,6 +14,10 @@ const features = [ ] export default function FittimoPage() { + useEffect(() => { + posthog.capture('app_detail_viewed', { app: 'fittimo' }) + }, []) + return (
@@ -98,7 +100,11 @@ export default function FittimoPage() {

Fittimo erscheint bald. Trage dich in unseren Newsletter ein und erfahre als Erste davon.

- + posthog.capture('newsletter_cta_clicked', { source: 'app_page', app_name: 'fittimo' })} + style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10, background: accent, color: '#FAFAF7', fontSize: 15.5, fontWeight: 600, padding: '16px 36px', borderRadius: 44 }} + > Benachrichtigen lassen →
diff --git a/app/apps/page.tsx b/app/apps/page.tsx index 634bf38..43a74cf 100644 --- a/app/apps/page.tsx +++ b/app/apps/page.tsx @@ -1,10 +1,7 @@ -import type { Metadata } from 'next' -import Link from 'next/link' +'use client' -export const metadata: Metadata = { - title: 'Apps – HyggeCraftery', - description: 'Drei sanfte Apps für einen langsameren, bewussteren Alltag.', -} +import Link from 'next/link' +import { posthog } from '@/lib/posthog' const apps = [ { @@ -56,6 +53,7 @@ export default function AppsPage() { posthog.capture('app_card_clicked', { app_name: app.name })} style={{ textDecoration: 'none', display: 'grid', diff --git a/app/apps/rezeptimo/page.tsx b/app/apps/rezeptimo/page.tsx index e3c4851..f8caa3f 100644 --- a/app/apps/rezeptimo/page.tsx +++ b/app/apps/rezeptimo/page.tsx @@ -1,10 +1,8 @@ -import type { Metadata } from 'next' -import Link from 'next/link' +'use client' -export const metadata: Metadata = { - title: 'Rezeptimo – Kochen mit Freude | HyggeCraftery', - description: 'Saisonale Rezepte zum langsamen Kochen — ehrlich, einfach, nährend.', -} +import Link from 'next/link' +import { useEffect } from 'react' +import { posthog } from '@/lib/posthog' const accent = '#C4896A' @@ -16,6 +14,10 @@ const features = [ ] export default function RezeptimoPage() { + useEffect(() => { + posthog.capture('app_detail_viewed', { app: 'rezeptimo' }) + }, []) + return (
@@ -98,7 +100,11 @@ export default function RezeptimoPage() {

Rezeptimo erscheint bald. Trage dich in unseren Newsletter ein und erfahre als Erste davon.

- + posthog.capture('newsletter_cta_clicked', { source: 'app_page', app_name: 'rezeptimo' })} + style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10, background: accent, color: '#FAFAF7', fontSize: 15.5, fontWeight: 600, padding: '16px 36px', borderRadius: 44 }} + > Benachrichtigen lassen →
diff --git a/app/apps/snakkimo/page.tsx b/app/apps/snakkimo/page.tsx index d0f6066..b43c749 100644 --- a/app/apps/snakkimo/page.tsx +++ b/app/apps/snakkimo/page.tsx @@ -1,10 +1,8 @@ -import type { Metadata } from 'next' -import Link from 'next/link' +'use client' -export const metadata: Metadata = { - title: 'Snakkimo – Sprachen lernen | HyggeCraftery', - description: 'Sprachen lernen, das sich anfühlt wie durch einen schönen Feed scrollen. Kleine Lektionen, großer Effekt.', -} +import Link from 'next/link' +import { useEffect } from 'react' +import { posthog } from '@/lib/posthog' const accent = '#7BA7BC' @@ -16,6 +14,10 @@ const features = [ ] export default function SnakkimoPage() { + useEffect(() => { + posthog.capture('app_detail_viewed', { app: 'snakkimo' }) + }, []) + return (
@@ -98,7 +100,11 @@ export default function SnakkimoPage() {

Snakkimo erscheint bald. Trage dich in unseren Newsletter ein und erfahre als Erste davon.

- + posthog.capture('newsletter_cta_clicked', { source: 'app_page', app_name: 'snakkimo' })} + style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10, background: accent, color: '#FAFAF7', fontSize: 15.5, fontWeight: 600, padding: '16px 36px', borderRadius: 44 }} + > Benachrichtigen lassen →
diff --git a/app/layout.tsx b/app/layout.tsx old mode 100644 new mode 100755 index 4fd10b7..c457b32 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -3,6 +3,7 @@ import { Cormorant_Garamond, Mulish } from 'next/font/google' import './globals.css' import Nav from '@/components/ui/Nav' import Footer from '@/components/ui/Footer' +import PostHogProvider from '@/components/PostHogProvider' const cormorant = Cormorant_Garamond({ subsets: ['latin'], @@ -45,9 +46,11 @@ export default function RootLayout({ backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`, }} /> -