Install Plausible for traffic analytics

~10 min

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 of your site (or use your framework's head component)
For Next.js: add it to app/layout.tsx using 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 min

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)

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 min

Add 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-js and 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 min

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

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.

Set Up Analytics

What You'll Build

Prerequisites

Architecture

4 Steps

Install Plausible for traffic analytics

Set up Plausible goals and events

Install PostHog for product analytics

Track custom events and set up funnels

🎉 You're Done!

Want this built for you?

Set Up Analytics

What You'll Build

Prerequisites

Architecture

4 Steps

Install Plausible for traffic analytics

Set up Plausible goals and events

Install PostHog for product analytics

Track custom events and set up funnels

🎉 You're Done!

Related Guides

Related Comparisons

Want this built for you?