Learn how to tweak Next.js config and Posthog setup to bypass ad-blockers, ensuring complete analytics even with ad-blocking browsers like Arc.

Why Bypassing Adblockers Matters

With new browsers like Arc blocking ads by default and users flocking to them, it's getting tougher to get the full picture about how your product is used from product analytics. It's like trying to understand the plot of a movie when you've missed half the scenes. Frustrating, right?

We struggled with this, and found ourselves missing important data in our analytics to be able to understand how our product is being used and how we can improve it. We’re sure that many others have also been facing this problem, so here’s a quick write-up of how we use Next.js rewrites to be able to get product analytics from all of our users, regardless if they have an ad-blocker enabled or not.

Setting Up the Next.js Configuration

First things first, let's tweak that next.config.js. It's our secret sauce to making sure Posthog sneaks past those ad-blockers like a ninja:

/** @type {import("next").NextConfig} */
const config = {
	reactStrictMode: true,
  // ... the rest of your config
	...(process?.env?.NODE_ENV === 'production' && {
		async rewrites() {
			return [
				// Posthog
				{
					source: '/posthog/:path*',
					destination: 'https://eu.posthog.com/:path*'
				},
				{
					source: '/posthog/:path*/',
					destination: 'https://eu.posthog.com/:path*/'
				}
			]
		},
		async headers() {
			async function getMyIp() {
				// const x = await fetch('https://api.ipify.org')
				const x = await fetch('https://api.my-ip.io/ip')
				return await x.text()
			}
			const ip = await getMyIp()
			return [
				{
					source: '/posthog/:path*',
					headers: [
						{ key: 'X-Forwarded-Proto', value: 'https' },
						{ key: 'X-Forwarded-Host', value: 'https://www.useflytrap.com' },
						{ key: 'X-Forwarded-For', value: ip }
					]
				},
				{
					source: '/posthog/:path*/',
					headers: [
						{ key: 'X-Forwarded-Proto', value: 'https' },
						{ key: 'X-Forwarded-Host', value: 'https://www.useflytrap.com' },
						{ key: 'X-Forwarded-For', value: ip }
					]
				}
			]
		}
	})
}
export default config

Quick Notes:

Tweaking the Posthog Initialization

Next up, the Posthog setup. This is where we tell our analytics to chill during development but go full ninja in production:

posthog.init(clientEnv.NEXT_PUBLIC_POSTHOG_API_KEY as string, {
    api_host: process.env.NODE_ENV === 'development' ? 'https://eu.posthog.com' : '/posthog',
    // Disable in development
    loaded: (posthog) => {
        if (process.env.NODE_ENV === 'development') posthog.opt_out_capturing();
    }
});

Quick Notes:

Wrapping Up

So there you have it! A little tweak here, a little change there, and just like that – you've outsmarted those ad-blockers. Now you can actually see what your users are up to, which is, let's face it, why we do all this in the first place. Go forth, analyze, and maybe catch a few bugs along the way.