admin/hyggecraftery-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add PostHog analytics — full event tracking across all pages

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

28
components/ui/Footer.tsx
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>
)

16
components/ui/Nav.tsx
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',

8
components/ui/NewsletterForm.tsx Normal file → Executable file
View File

@@ -1,8 +1,9 @@
'use client'
import { useState } from 'react'
import { posthog } from '@/lib/posthog'
export default function NewsletterForm() {
export default function NewsletterForm({ source = 'homepage' }: { source?: string }) {
const [email, setEmail] = useState('')
const [submitted, setSubmitted] = useState(false)
@@ -21,7 +22,10 @@ export default function NewsletterForm() {
<form
onSubmit={(e) => {
e.preventDefault()
if (email.trim()) setSubmitted(true)
if (email.trim()) {
posthog.capture('newsletter_signup', { source })
setSubmitted(true)
}
}}
style={{ display: 'flex', gap: 12, maxWidth: 480, margin: '0 auto', flexWrap: 'wrap' }}
>