Beginner
⏱ 30-45 min
Set Up Analytics
Add privacy-friendly analytics and product insights to any website or app
What You'll Build
Complete analytics setup with traffic data (Plausible) and product behavior data (PostHog) - no cookie banners needed.
- Real-time traffic dashboard with Plausible
- Product analytics and session replay with PostHog
- Custom event tracking
- Zero cookie banners required
Prerequisites
- A live website or web app
- Access to your site's HTML or framework code
- About 30 minutes
Architecture
Plausible handles traffic analytics (pageviews, referrers, top pages, countries) in a lightweight, privacy-friendly script. PostHog handles product analytics (user journeys, feature usage, session replay, funnels). Together they give you the full picture.
Visitor → Your site → Plausible (traffic data) + PostHog (behavior data) → Your dashboards
1
Install Plausible for traffic analytics
~10 minAdd Plausible's lightweight script to get real-time traffic data without cookies.
- Sign up at plausible.io and add your domain
- Copy the one-line script tag
- Add it to the
of your site (or use your framework's head component) - For Next.js: add it to
app/layout.tsxusing the Script component - Visit your site and check the Plausible dashboard - data appears in real time
Plain HTML (add to <head>)
<script defer data-domain="yourdomain.com"
src="https://plausible.io/js/script.js"></script>Next.js app/layout.tsx
import Script from 'next/script'
export default function Layout({ children }) {
return (
<html>
<head>
<Script defer data-domain="yourdomain.com"
src="https://plausible.io/js/script.js" />
</head>
<body>{children}</body>
</html>
)
}Tip: Plausible's script is under 1KB. That's 45x smaller than Google Analytics. Your site speed won't be affected.
2
Set up Plausible goals and events
~10 minTrack specific actions like signups, purchases, and button clicks.
- Go to your Plausible site settings → Goals
- Create a custom event goal (e.g. "Signup", "Purchase")
- Add the tracking code to your site's event handlers
- You can also track pageview goals for specific URLs (e.g. /thank-you)
Event tracking (JavaScript)
// Track a signup event
plausible("Signup")
// Track with custom properties
plausible("Purchase", { props: { plan: "pro", amount: "29" } })
// Example: track button click
document.getElementById("cta").addEventListener("click", () => {
plausible("CTA Click")
})Tip: Track your 3 most important actions first: signups, purchases, and your main CTA click. Don't over-track.
3
Install PostHog for product analytics
~10 minAdd PostHog for deeper product insights: user journeys, session replay, and feature flags.
- Sign up at posthog.com (generous free tier: 1M events/month)
- Create a project and copy your API key
- Install the PostHog snippet or npm package
- For Next.js:
npm install posthog-jsand initialize in your app - Verify events are flowing in the PostHog dashboard
Plain HTML (add before </head>)
<script>
!function(t,e){var o,n,p,r;e.__SV||(global.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,global.posthog||[]);
posthog.init('YOUR_API_KEY', {api_host: 'https://app.posthog.com'})
</script>Next.js (npm install posthog-js)
// src/app/providers.tsx
'use client'
import posthog from 'posthog-js'
import { PostHogProvider } from 'posthog-js/react'
import { useEffect } from 'react'
export function PHProvider({ children }: { children: React.ReactNode }) {
useEffect(() => {
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY! {
api_host: 'https://app.posthog.com'
})
}, [])
return <PostHogProvider client={posthog}>{children}</PostHogProvider>
}Tip: Enable Session Replay in PostHog - watching real users navigate your app reveals issues you'd never find otherwise.
4
Track custom events and set up funnels
~10 minCapture key product events and build conversion funnels.
- PostHog auto-captures pageviews and clicks by default
- Add custom event tracking for important actions
- Create a funnel in PostHog: e.g. Landing Page → Signup → Onboarding → First Action
- Set up a dashboard with your key metrics
- Enable feature flags if you want to A/B test
Custom event tracking
import posthog from 'posthog-js'
// Track a signup
posthog.capture('user_signed_up', { method: 'google' })
// Track a feature usage
posthog.capture('feature_used', { feature: 'ai_chat', plan: 'pro' })
// Identify a user (links events to a person)
posthog.identify(userId, { email: user.email, plan: 'pro' })Tip: Use Plausible for "is my site getting traffic?" and PostHog for "are users actually using my product?" They complement each other perfectly.
🎉 You're Done!
Complete analytics setup with traffic data (Plausible) and product behavior data (PostHog) - no cookie banners needed.
Done for you
Want this built for you?
Get a step-by-step checklist, setup order, and the exact config for every tool in this guide. Or let me build it for you.
Get the checklist → Want this built for you?