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

@@ -2,6 +2,7 @@
import Link from 'next/link'
import { useState } from 'react'
import { posthog } from '@/lib/posthog'
const apps = [
{ name: 'Snakkimo', href: '/apps/snakkimo', accent: '#7BA7BC' },
@@ -26,7 +27,7 @@ export default function Nav() {
}}
>
{/* Logo */}
<Link href="/" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 12 }}>
<Link href="/" onClick={() => posthog.capture('nav_link_clicked', { label: 'Logo', href: '/' })} style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 12 }}>
<div
style={{
width: 34,
@@ -50,8 +51,8 @@ export default function Nav() {
{/* Nav links */}
<nav style={{ display: 'flex', alignItems: 'center', gap: 38 }}>
<Link href="/#ueber" style={navLinkStyle}>Über uns</Link>
<Link href="/shop" style={navLinkStyle}>Shop</Link>
<Link href="/#ueber" onClick={() => posthog.capture('nav_link_clicked', { label: 'Über uns', href: '/#ueber' })} style={navLinkStyle}>Über uns</Link>
<Link href="/shop" onClick={() => posthog.capture('nav_link_clicked', { label: 'Shop', href: '/shop' })} style={navLinkStyle}>Shop</Link>
{/* Apps dropdown */}
<div
@@ -61,7 +62,11 @@ export default function Nav() {
>
<button
style={{ ...navLinkStyle, background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}
onClick={() => setAppsOpen((v) => !v)}
onClick={() => {
const next = !appsOpen
setAppsOpen(next)
if (next) posthog.capture('nav_apps_dropdown_opened')
}}
aria-expanded={appsOpen}
>
Apps
@@ -98,7 +103,7 @@ export default function Nav() {
fontSize: 14.5,
fontWeight: 500,
}}
onClick={() => setAppsOpen(false)}
onClick={() => { setAppsOpen(false); posthog.capture('nav_link_clicked', { label: app.name, href: app.href }) }}
>
<span
style={{
@@ -118,6 +123,7 @@ export default function Nav() {
<Link
href="/#newsletter"
onClick={() => posthog.capture('newsletter_cta_clicked', { source: 'nav' })}
style={{
textDecoration: 'none',
color: '#FAFAF7',