conversiontracking.io

Tutorial: Free PostHog Reverse Proxy with Netlify

I am SUPER excited about PostHog!

And I’m still in the early phase of figuring things out.

PostHog just released their Web Analytics feature (previously they only had Product Analytics, now both) and I’m not 100% sure what’s the difference for someone like me, who kinda has both or something in between.

PostHog gives me Notion vibes. Like a fresh take on an analytics, AB-testing, heatmap and user recording tool. Probably for web apps it’s even more.

PostHog Reverse Proxy with Netlify

In this tutorial, we’ll set up a reverse proxy for PostHog using Netlify. This guide will take you step-by-step through the process.

Why a reverse proxy?

My understanding is that those annoying ad blockers detect stuff like Google Analytics, Posthog etc. by network request your site sends to specific domains. They’ll be blocked.

BUT! If we route our analytics stuff via a sneaky subdomain on our own website like hog.example.com, no one will suspect a thing 🕵️.

PostHog seems to have their own managed reverse proxy but it requires the $450.00/month “Teams Add on”. So I’ll rather spend 20 minutes setting it up and save the money.

I’ll have to check how many requests and bandwidth Netlify takes, but I’m pretty sure it’ll be cheaper. My site is very niche so let’s see if the free plan will do. Will try keep you posted!

Video tutorial

Steps:

  1. Create a Site in Netlify

    • Start by creating a new site in Netlify.
    • Push your site via GitHub, ensuring it contains an index.html file and a .toml configuration file.

  2. Add CNAME for Custom Domain

    • Configure a CNAME record for example.mydomain.com to point to your Netlify URL.

  3. Verify HTTPS in Netlify

    • Make sure HTTPS is properly configured in Netlify for secure communication.

  4. Test Endpoint

    • Test the endpoint by visiting a URL such as: https://hog.example.com//ingest/decide/?v=2&project_api_key=phc_TutorialPlaceholderReplaceWithYourKey
    • You should see this:
{
  "config": {
    "enable_collect_everything": true
  },
  "toolbarParams": {

  },
  "isAuthenticated": false,
  "supportedCompression": [
    "gzip",
    "gzip-js"
  ],
  "featureFlags": [],
  "sessionRecording": false
}
  1. Edit PostHog Snippet in Website
    • Update the PostHog snippet on your website from:
posthog.init('YOUR_PROJECT_API_KEY', {
  api_host: 'https://your-api-host.example.com',
  person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well
});
  • To the following:
posthog.init('phc_TutorialPlaceholderReplaceWithYourKey', {
  api_host: 'https://your-api-host.example.com/ingest',
  ui_host: 'https://us.posthog.com',
  person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well
});
  1. Test a Custom Event
    • After setting up the reverse proxy, verify everything is functioning by capturing a custom event:
posthog.capture('reverse-proxy-test-TUTORIAL', { value: 'up-and-running' });
  1. Verify Custom Event in PostHog
    • Verify that the custom event appears under ACTIVITY in PostHog by visiting: https://us.posthog.com/project/YOUR-PROJECT-ID/activity/explore

By following these steps, you’ll have successfully set up a reverse proxy for PostHog using Netlify 🙌