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.
Plan checks and sources
Plan-specific access matters more than a tool’s “free” label. Read the dated profile linked above, then confirm your seat count, usage, billing basis and required export or publishing feature.
No new vendor price or free-plan allowance is asserted in this edit. Linked profiles retain their own source dates and unknowns.
Before launch: use a synthetic record, verify permissions and output, test a failed action, and document how to reverse it. A successful checkout preview or API response does not prove a paid order, delivery or confirmed subscription.
Install Plausible for traffic analytics
Add 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
<head>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
Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.
<script defer data-domain="yourdomain.com"
src="https://plausible.io/js/script.js"></script>Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.
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>
)
}Set up Plausible goals and events
Track 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)
Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.
// 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")
})
Install PostHog for product analytics
Add PostHog for deeper product insights: user journeys, session replay, and feature flags.
- Sign up at posthog.com (generous check the current event allowance and retention for your chosen product)
- 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
Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.
<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>Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.
// 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>
}Track custom events and set up funnels
Capture 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
Illustrative code, not executed in this review. Check current SDK documentation, authentication, input validation and error handling before use.
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' })Validate before launch
Target outcome: Complete analytics setup with traffic data (Plausible) and product behavior data (PostHog) - no cookie banners needed. Check the actual workflow, failure and recovery paths before publishing.
Need help building?
I help founders set up, connect, and launch their tool stacks. Skip the guesswork.
Work with me →