Add PostHog analytics — full event tracking across all pages

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 <noreply@anthropic.com>
This commit is contained in:
Tim Leikauf
2026-07-01 20:59:29 +02:00
parent 7f67d123d6
commit 0101447d84
14 changed files with 248 additions and 64 deletions

View File

@@ -1,4 +1,7 @@
'use client'
import Link from 'next/link'
import { posthog } from '@/lib/posthog'
export default function Footer() {
return (
@@ -25,10 +28,10 @@ export default function Footer() {
Entdecken
</h4>
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
<FooterLink href="/shop">Shop</FooterLink>
<FooterLink href="/apps">Apps</FooterLink>
<FooterLink href="/#ueber">Über uns</FooterLink>
<FooterLink href="/#newsletter">Newsletter</FooterLink>
<FooterLink href="/shop" section="Entdecken">Shop</FooterLink>
<FooterLink href="/apps" section="Entdecken">Apps</FooterLink>
<FooterLink href="/#ueber" section="Entdecken">Über uns</FooterLink>
<FooterLink href="/#newsletter" section="Entdecken">Newsletter</FooterLink>
</div>
</div>
@@ -38,10 +41,10 @@ export default function Footer() {
Service
</h4>
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
<FooterLink href="#">Versand</FooterLink>
<FooterLink href="#">Kontakt</FooterLink>
<FooterLink href="#">Impressum</FooterLink>
<FooterLink href="#">Datenschutz</FooterLink>
<FooterLink href="#" section="Service">Versand</FooterLink>
<FooterLink href="#" section="Service">Kontakt</FooterLink>
<FooterLink href="#" section="Service">Impressum</FooterLink>
<FooterLink href="#" section="Service">Datenschutz</FooterLink>
</div>
</div>
@@ -56,6 +59,7 @@ export default function Footer() {
key={abbr}
href="#"
title={label}
onClick={() => posthog.capture('footer_link_clicked', { label, section: 'Folgen' })}
style={{
textDecoration: 'none',
width: 42,
@@ -86,9 +90,13 @@ export default function Footer() {
)
}
function FooterLink({ href, children }: { href: string; children: React.ReactNode }) {
function FooterLink({ href, section, children }: { href: string; section: string; children: React.ReactNode }) {
return (
<Link href={href} style={{ textDecoration: 'none', fontSize: 14.5, color: 'rgba(250,250,247,0.7)' }}>
<Link
href={href}
onClick={() => posthog.capture('footer_link_clicked', { label: String(children), section })}
style={{ textDecoration: 'none', fontSize: 14.5, color: 'rgba(250,250,247,0.7)' }}
>
{children}
</Link>
)