Engineering
How to Bypass Ad-Blockers for Posthog Using Next.js
RG
Rasmus Gustafsson • Dec 7, 2023
Learn how to tweak Next.js config and Posthog setup to bypass ad-blockers, ensuring complete analytics even with ad-blocking browsers like Arc.
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.
First things first, let's tweak that . 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 configIP API: Pick any you like. We're not picky here. It should be reliable. If the fetch fails for any reason, your build/deployment will fail.
Domain: Swap in your own. We're using ours (https://www.useflytrap.com) as a placeholder.
Posthog API Base: We’re using the EU data centers. Using the US data center? Change https://eu.posthog.com to your https://app.posthog.com.
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();
}
});