PostHog Analytics
PostHog is the open-source analytics platform wired in by default. Track every page view, product interaction, checkout step, and purchase. All without sending your data to third parties. posthog-js is already listed in your dependencies.
Last updated: 2026-03-29
Create a Project & Add Your Key
Sign up at posthog.com, create a new project, and copy your Project API key. Add it to your .env file. Flux reads it via import.meta.env so it's never hard-coded.
# .env
PUBLIC_POSTHOG_KEY=phc_your_project_api_key
PUBLIC_POSTHOG_HOST=https://us.i.posthog.comWire It Into the Flux Layout
The template uses a BaseHead.astro component loaded on every page. Drop the Analytics component there so PostHog initialises once and auto-captures every route change.
// src/components/Analytics.jsx
import { useEffect } from 'react';
import posthog from 'posthog-js';
export default function Analytics() {
useEffect(() => {
if (typeof window === 'undefined') return;
posthog.init(import.meta.env.PUBLIC_POSTHOG_KEY, {
api_host: import.meta.env.PUBLIC_POSTHOG_HOST,
capture_pageview: true,
capture_pageleave: true,
persistence: 'localStorage',
});
}, []);
return null;
}
// src/layout/BaseHead.astro — add inside <head>
---
import Analytics from '../components/Analytics.jsx';
---
<Analytics client:load />Template-Specific Events to Track
Flux ships with e-commerce, blog, and SaaS pages. Here are the key events to capture across the template so you can build funnels that actually mean something.
import posthog from 'posthog-js';
// — Hero / Landing —
posthog.capture('hero_cta_clicked', { variant: 'primary', page: '/' });
// — Gallery / Showcase —
posthog.capture('template_viewed', { slug: 'breville-machines', category: 'e-commerce' });
posthog.capture('demo_link_clicked', { slug: 'breville-machines' });
posthog.capture('buy_button_clicked', { slug: 'breville-machines', price: 120 });
// — Checkout (Polar.sh / Stripe) —
posthog.capture('checkout_started', { plan: 'lifetime', amount: 149 });
posthog.capture('purchase_completed', { plan: 'lifetime', amount: 149, currency: 'usd' });
// — Blog —
posthog.capture('post_read', { slug: 'getting-started', read_time_seconds: 240 });
// — Auth (Clerk) —
posthog.capture('sign_up_completed', { method: 'email' });
posthog.identify(user.id, { email: user.emailAddresses[0].emailAddress, plan: 'lifetime' });| Event | Where to fire it | Key properties |
|---|---|---|
| hero_cta_clicked | src/components/hero/Hero.jsx | variant, page |
| template_viewed | src/components/pages/Gallery.jsx | slug, category, price |
| buy_button_clicked | src/components/pages/Gallery.jsx | slug, price |
| checkout_started | Polar.sh redirect handler | plan, amount |
| purchase_completed | Stripe / Polar webhook | plan, amount, currency |
| post_read | src/pages/blog/[slug].astro | slug, read_time_seconds |
| sign_up_completed | Clerk onSignUp callback | method |
