From 807c2cc77a11260331eaad84d75c56bacf24c334 Mon Sep 17 00:00:00 2001 From: Edwin Lim Date: Fri, 7 Nov 2025 11:15:03 -0500 Subject: [PATCH] posthog ips snippet (#13575) * posthog ips snippet * suggestions --- contents/docs/getting-started/_snippets/wizard.mdx | 5 ++++- .../docs/integrate/_snippets/details/posthog-ips.mdx | 12 ++++++++++++ .../docs/integrate/_snippets/install-js-snippet.mdx | 4 ++++ contents/docs/libraries/angular.mdx | 3 +++ contents/docs/libraries/astro.mdx | 3 +++ contents/docs/libraries/bubble.mdx | 3 +++ contents/docs/libraries/docusaurus.mdx | 5 ++++- contents/docs/libraries/framer.mdx | 3 +++ contents/docs/libraries/gatsby.mdx | 5 ++++- contents/docs/libraries/next-js/index.mdx | 3 +++ contents/docs/libraries/nuxt-js-3-6.mdx | 3 +++ contents/docs/libraries/nuxt-js.mdx | 3 +++ contents/docs/libraries/react-native/index.mdx | 3 +++ contents/docs/libraries/react/index.mdx | 3 +++ contents/docs/libraries/remix.mdx | 3 +++ contents/docs/libraries/svelte.mdx | 3 +++ contents/docs/libraries/vue-js/index.mdx | 3 +++ contents/docs/toolbar/heatmaps.mdx | 4 ++++ 18 files changed, 68 insertions(+), 3 deletions(-) create mode 100644 contents/docs/integrate/_snippets/details/posthog-ips.mdx diff --git a/contents/docs/getting-started/_snippets/wizard.mdx b/contents/docs/getting-started/_snippets/wizard.mdx index f3bf63afd..8cffd5806 100644 --- a/contents/docs/getting-started/_snippets/wizard.mdx +++ b/contents/docs/getting-started/_snippets/wizard.mdx @@ -2,6 +2,7 @@ import AgentPrompt from "../../integrate/_snippets/agent-prompt.mdx" import DetailSetUpReverseProxy from "../../integrate/_snippets/details/set-up-reverse-proxy.mdx" import DetailGroupProductsInOneProject from "../../integrate/_snippets/details/group-products-in-one-project.mdx" +import DetailPostHogIPs from "../../integrate/_snippets/details/posthog-ips.mdx" Install PostHog in seconds with our wizard by running this command in your project directory with your terminal (it also works for [LLM coding agents](/blog/envoy-wizard-llm-agent) like Cursor and Bolt): @@ -15,4 +16,6 @@ Check out the wizard's [GitHub repo](https://github.com/PostHog/wizard) for more - \ No newline at end of file + + + \ No newline at end of file diff --git a/contents/docs/integrate/_snippets/details/posthog-ips.mdx b/contents/docs/integrate/_snippets/details/posthog-ips.mdx new file mode 100644 index 000000000..fa8cf0aea --- /dev/null +++ b/contents/docs/integrate/_snippets/details/posthog-ips.mdx @@ -0,0 +1,12 @@ +
+ Add IPs to Firewall/WAF allowlists (recommended) + + For certain features like [heatmaps](/docs/toolbar/heatmaps), your Web Application Firewall (WAF) may be blocking PostHog’s requests to your site. Add these IP addresses to your WAF allowlist or rules to let PostHog access your site. + + **EU**: `3.75.65.221`, `18.197.246.42`, `3.120.223.253` + + **US**: `44.205.89.55`, `52.4.194.122`, `44.208.188.173` + + These are public, stable IPs used by PostHog services (e.g., Celery tasks for snapshots). + +
\ No newline at end of file diff --git a/contents/docs/integrate/_snippets/install-js-snippet.mdx b/contents/docs/integrate/_snippets/install-js-snippet.mdx index ef30d0f14..039edc299 100644 --- a/contents/docs/integrate/_snippets/install-js-snippet.mdx +++ b/contents/docs/integrate/_snippets/install-js-snippet.mdx @@ -1,6 +1,8 @@ import Snippet from "../snippet.mdx" import DetailGroupProductsInOneProject from "./details/group-products-in-one-project.mdx" import DetailSetUpReverseProxy from "./details/set-up-reverse-proxy.mdx" +import DetailPostHogIPs from "./details/posthog-ips.mdx" + This is the simplest way to get PostHog up and running. It only takes a few minutes. @@ -18,6 +20,8 @@ Once the snippet is added, PostHog automatically captures `$pageview` and [other + +
Include ES5 support (optional) diff --git a/contents/docs/libraries/angular.mdx b/contents/docs/libraries/angular.mdx index 470a35cf6..a7bb2ac61 100644 --- a/contents/docs/libraries/angular.mdx +++ b/contents/docs/libraries/angular.mdx @@ -7,6 +7,7 @@ icon: >- import DetailSetUpReverseProxy from "../integrate/_snippets/details/set-up-reverse-proxy.mdx" import DetailGroupProductsInOneProject from "../integrate/_snippets/details/group-products-in-one-project.mdx" import InstallNodePackageManagers from "../integrate/_snippets/install-node-package-managers.mdx" +import DetailPostHogIPs from "../integrate/_snippets/details/posthog-ips.mdx" PostHog makes it easy to get data about traffic and usage of your [Angular](https://angular.dev/) app. Integrating PostHog into your site enables analytics about user behavior, custom events capture, session recordings, feature flags, and more. @@ -28,6 +29,8 @@ import AngularInstall from "../integrate/_snippets/install-angular.mdx" + + ## Tracking pageviews PostHog automatically tracks your pageviews by hooking up to the browser's `navigator` API as long as you initialize PostHog with the `defaults` config option set after `2025-05-24`. diff --git a/contents/docs/libraries/astro.mdx b/contents/docs/libraries/astro.mdx index 5e0206d07..577eaeb1c 100644 --- a/contents/docs/libraries/astro.mdx +++ b/contents/docs/libraries/astro.mdx @@ -6,6 +6,7 @@ icon: >- import DetailSetUpReverseProxy from "../integrate/_snippets/details/set-up-reverse-proxy.mdx" import DetailGroupProductsInOneProject from "../integrate/_snippets/details/group-products-in-one-project.mdx" +import DetailPostHogIPs from "../integrate/_snippets/details/posthog-ips.mdx" PostHog makes it easy to get data about traffic and usage of your [Astro](https://astro.build/) app. Integrating PostHog into your site enables analytics about user behavior, custom events capture, session recordings, feature flags, and more. @@ -25,6 +26,8 @@ import AstroInstall from "../integrate/_snippets/install-astro.mdx" + + ## Next steps For any technical questions for how to integrate specific PostHog features into Astro (such as analytics, feature flags, A/B testing, surveys, etc.), have a look at our [JavaScript Web SDK docs](/docs/libraries/js/features). diff --git a/contents/docs/libraries/bubble.mdx b/contents/docs/libraries/bubble.mdx index 8761546c3..e95f04d68 100644 --- a/contents/docs/libraries/bubble.mdx +++ b/contents/docs/libraries/bubble.mdx @@ -6,6 +6,7 @@ icon: >- import DetailSetUpReverseProxy from "../integrate/_snippets/details/set-up-reverse-proxy.mdx" import DetailGroupProductsInOneProject from "../integrate/_snippets/details/group-products-in-one-project.mdx" +import DetailPostHogIPs from "../integrate/_snippets/details/posthog-ips.mdx" PostHog makes it easy to get data about traffic and usage of your [Bubble](https://bubble.io/) app. Integrating PostHog into your site enables analytics about user behavior, custom events capture, session recordings, feature flags, and more. @@ -32,6 +33,8 @@ Go to the **SEO / metatags** tab in site settings. Paste your PostHog snippet in + + ## Capture custom events To capture custom events, you need to install the [Bubble Toolbox plugin](https://bubble.io/plugin/toolbox-1488796042609x768734193128308700). This enables you to run custom JavaScript code. diff --git a/contents/docs/libraries/docusaurus.mdx b/contents/docs/libraries/docusaurus.mdx index aaca17553..ab0021a9e 100644 --- a/contents/docs/libraries/docusaurus.mdx +++ b/contents/docs/libraries/docusaurus.mdx @@ -8,6 +8,7 @@ tags: import DetailSetUpReverseProxy from "../integrate/_snippets/details/set-up-reverse-proxy.mdx" import DetailGroupProductsInOneProject from "../integrate/_snippets/details/group-products-in-one-project.mdx" +import DetailPostHogIPs from "../integrate/_snippets/details/posthog-ips.mdx" To easily track your Docusaurus site, you can install the [PostHog plugin](https://github.com/PostHog/posthog-docusaurus). This enables you to autocapture pageviews, clicks, session replays, as well as use the other features of PostHog such as [surveys](/docs/surveys). @@ -49,4 +50,6 @@ Run your site again to see events autocaptured by PostHog. - \ No newline at end of file + + + \ No newline at end of file diff --git a/contents/docs/libraries/framer.mdx b/contents/docs/libraries/framer.mdx index 05466979a..03b141067 100644 --- a/contents/docs/libraries/framer.mdx +++ b/contents/docs/libraries/framer.mdx @@ -6,6 +6,7 @@ icon: >- import DetailSetUpReverseProxy from "../integrate/_snippets/details/set-up-reverse-proxy.mdx" import DetailGroupProductsInOneProject from "../integrate/_snippets/details/group-products-in-one-project.mdx" +import DetailPostHogIPs from "../integrate/_snippets/details/posthog-ips.mdx" PostHog makes it easy to get data about traffic and usage of your [Framer](https://www.framer.com/) app. Integrating PostHog into your site enables analytics about user behavior, custom events capture, session recordings, feature flags, and more. @@ -21,6 +22,8 @@ import FramerInstall from "../integrate/_snippets/install-framer.mdx" + + ## Capture custom events To [capture custom events](/docs/product-analytics/capture-events), you call `posthog.capture()` using [custom code components in Framer](https://www.framer.com/developers/components/introduction). diff --git a/contents/docs/libraries/gatsby.mdx b/contents/docs/libraries/gatsby.mdx index a72539b08..68ee63173 100644 --- a/contents/docs/libraries/gatsby.mdx +++ b/contents/docs/libraries/gatsby.mdx @@ -6,6 +6,7 @@ icon: >- import DetailSetUpReverseProxy from "../integrate/_snippets/details/set-up-reverse-proxy.mdx" import DetailGroupProductsInOneProject from "../integrate/_snippets/details/group-products-in-one-project.mdx" +import DetailPostHogIPs from "../integrate/_snippets/details/posthog-ips.mdx" > This [library](https://github.com/posthog/gatsby-plugin-posthog) was built by the community. Thanks to [Ritesh Kadmawala](https://github.com/kgritesh) for building it. @@ -55,4 +56,6 @@ For more instructions, see [browser JS library](/docs/integrate/client/js). - \ No newline at end of file + + + \ No newline at end of file diff --git a/contents/docs/libraries/next-js/index.mdx b/contents/docs/libraries/next-js/index.mdx index da26290c2..e33bc19e2 100644 --- a/contents/docs/libraries/next-js/index.mdx +++ b/contents/docs/libraries/next-js/index.mdx @@ -16,6 +16,7 @@ features: import DetailSetUpReverseProxy from "../../integrate/_snippets/details/set-up-reverse-proxy.mdx" import DetailGroupProductsInOneProject from "../../integrate/_snippets/details/group-products-in-one-project.mdx" +import DetailPostHogIPs from "../../integrate/_snippets/details/posthog-ips.mdx" PostHog makes it easy to get data about traffic and usage of your [Next.js](https://nextjs.org/) app. Integrating PostHog into your site enables analytics about user behavior, custom events capture, session recordings, feature flags, and more. @@ -46,6 +47,8 @@ import NextJSInstall from "../../integrate/_snippets/nextjs/install-nextjs.mdx" + + ## Accessing PostHog import Tab from "components/Tab" diff --git a/contents/docs/libraries/nuxt-js-3-6.mdx b/contents/docs/libraries/nuxt-js-3-6.mdx index 82075efd3..ce4708b2c 100644 --- a/contents/docs/libraries/nuxt-js-3-6.mdx +++ b/contents/docs/libraries/nuxt-js-3-6.mdx @@ -6,6 +6,7 @@ icon: >- import DetailSetUpReverseProxy from "../integrate/_snippets/details/set-up-reverse-proxy.mdx" import DetailGroupProductsInOneProject from "../integrate/_snippets/details/group-products-in-one-project.mdx" +import DetailPostHogIPs from "../integrate/_snippets/details/posthog-ips.mdx" PostHog makes it easy to get data about usage of your [Nuxt.js](https://nuxt.com/) app. Integrating PostHog into your app enables analytics about user behavior, custom events capture, session replays, feature flags, and more. @@ -37,6 +38,8 @@ See the [JavaScript SDK docs](/docs/libraries/js/features) for all usable functi + + ## Setting up PostHog on the server side Install `posthog-node` using your package manager: diff --git a/contents/docs/libraries/nuxt-js.mdx b/contents/docs/libraries/nuxt-js.mdx index 749c52445..aaf6f183e 100644 --- a/contents/docs/libraries/nuxt-js.mdx +++ b/contents/docs/libraries/nuxt-js.mdx @@ -6,6 +6,7 @@ icon: >- import DetailSetUpReverseProxy from "../integrate/_snippets/details/set-up-reverse-proxy.mdx" import DetailGroupProductsInOneProject from "../integrate/_snippets/details/group-products-in-one-project.mdx" +import DetailPostHogIPs from "../integrate/_snippets/details/posthog-ips.mdx" PostHog makes it easy to get data about usage of your [Nuxt.js](https://nuxt.com/) app. Integrating PostHog into your app enables analytics about user behavior, custom events capture, session replays, feature flags, and more. @@ -93,6 +94,8 @@ export default defineEventHandler(async (event) => { + + ## Error tracking For a detailed error tracking installation guide, including automatic exception capture and source map configuration, see the [Nuxt error tracking installation docs](/docs/error-tracking/installation/nuxt). diff --git a/contents/docs/libraries/react-native/index.mdx b/contents/docs/libraries/react-native/index.mdx index 0b14a84ad..235bd3e39 100644 --- a/contents/docs/libraries/react-native/index.mdx +++ b/contents/docs/libraries/react-native/index.mdx @@ -19,6 +19,7 @@ features: import DetailSetUpReverseProxy from "../../integrate/_snippets/details/set-up-reverse-proxy.mdx" import DetailGroupProductsInOneProject from "../../integrate/_snippets/details/group-products-in-one-project.mdx" +import DetailPostHogIPs from "../../integrate/_snippets/details/posthog-ips.mdx" ## Installation @@ -30,6 +31,8 @@ import ReactNativeInstall from '../../integrate/_snippets/install-react-native.m + + ### Configuration options You can further customize how PostHog works through its configuration on initialization. diff --git a/contents/docs/libraries/react/index.mdx b/contents/docs/libraries/react/index.mdx index 96eba3bef..f80fde580 100644 --- a/contents/docs/libraries/react/index.mdx +++ b/contents/docs/libraries/react/index.mdx @@ -20,6 +20,7 @@ features: import DetailSetUpReverseProxy from "../../integrate/_snippets/details/set-up-reverse-proxy.mdx" import DetailGroupProductsInOneProject from "../../integrate/_snippets/details/group-products-in-one-project.mdx" +import DetailPostHogIPs from "../../integrate/_snippets/details/posthog-ips.mdx" PostHog makes it easy to get data about traffic and usage of your React app. Integrating PostHog into your site enables analytics about user behavior, custom events capture, session recordings, feature flags, and more. @@ -39,6 +40,8 @@ import ReactInstall from '../../integrate/_snippets/install-react.mdx' + + ## Usage ### PostHog provider diff --git a/contents/docs/libraries/remix.mdx b/contents/docs/libraries/remix.mdx index 0b933f1f2..f47f47a39 100644 --- a/contents/docs/libraries/remix.mdx +++ b/contents/docs/libraries/remix.mdx @@ -6,6 +6,7 @@ icon: >- import DetailSetUpReverseProxy from "../integrate/_snippets/details/set-up-reverse-proxy.mdx" import DetailGroupProductsInOneProject from "../integrate/_snippets/details/group-products-in-one-project.mdx" +import DetailPostHogIPs from "../integrate/_snippets/details/posthog-ips.mdx" PostHog makes it easy to get data about traffic and usage of your [Remix](https://remix.run/) app. Integrating PostHog into your site enables analytics about user behavior, custom events capture, session recordings, feature flags, and more. @@ -109,6 +110,8 @@ When you run your app now, PostHog will automatically capture events and pagevie + + ## Next steps For any technical questions for how to integrate specific PostHog features into Remix (such as analytics, feature flags, A/B testing, surveys, etc.), have a look at our [JavaScript Web SDK docs](/docs/libraries/js/features) and [React](/docs/libraries/react) docs. diff --git a/contents/docs/libraries/svelte.mdx b/contents/docs/libraries/svelte.mdx index 2b0982a23..4fa8838f9 100644 --- a/contents/docs/libraries/svelte.mdx +++ b/contents/docs/libraries/svelte.mdx @@ -6,6 +6,7 @@ icon: >- import DetailSetUpReverseProxy from "../integrate/_snippets/details/set-up-reverse-proxy.mdx" import DetailGroupProductsInOneProject from "../integrate/_snippets/details/group-products-in-one-project.mdx" +import DetailPostHogIPs from "../integrate/_snippets/details/posthog-ips.mdx" PostHog makes it easy to get data about traffic and usage of your [Svelte](https://svelte.dev/) app. Integrating PostHog into your site enables analytics about user behavior, custom events capture, session recordings, feature flags, and more. @@ -27,6 +28,8 @@ import SvelteInstallClient from "../integrate/_snippets/install-svelte-client.md + + ## Server-side setup import SvelteInstallServer from "../integrate/_snippets/install-svelte-server.mdx" diff --git a/contents/docs/libraries/vue-js/index.mdx b/contents/docs/libraries/vue-js/index.mdx index b7480728d..a4e438a95 100644 --- a/contents/docs/libraries/vue-js/index.mdx +++ b/contents/docs/libraries/vue-js/index.mdx @@ -6,6 +6,7 @@ icon: >- import DetailSetUpReverseProxy from "../../integrate/_snippets/details/set-up-reverse-proxy.mdx" import DetailGroupProductsInOneProject from "../../integrate/_snippets/details/group-products-in-one-project.mdx" +import DetailPostHogIPs from "../../integrate/_snippets/details/posthog-ips.mdx" PostHog makes it easy to get data about usage of your [Vue.js](https://vuejs.org/) app. Integrating PostHog into your app enables analytics about user behavior, custom events capture, session replays, feature flags, and more. @@ -55,6 +56,8 @@ import PluginEvents from "./_snippets/plugin-events.mdx" + + ## Other setup options import ProvideInjectInstall from "./_snippets/provide-inject-install.mdx" diff --git a/contents/docs/toolbar/heatmaps.mdx b/contents/docs/toolbar/heatmaps.mdx index 1309b9140..5e44b8d4e 100644 --- a/contents/docs/toolbar/heatmaps.mdx +++ b/contents/docs/toolbar/heatmaps.mdx @@ -8,6 +8,8 @@ availability: enterprise: full --- +import DetailPostHogIPs from "../integrate/_snippets/details/posthog-ips.mdx" +