mirror of
https://github.com/BillyOutlast/posthog.com.git
synced 2026-02-04 03:11:21 +01:00
Pricing page cleanup (#9281)
This commit is contained in:
Cory Watilo
@@ -423,4 +423,4 @@ We're biased, obviously, but we think PostHog is the perfect GrowthBook replacem
|
||||
- You want all the tools you need to build a better product like product analytics, session replay, and surveys.
|
||||
- You want to try before you buy. We're self-serve with a [generous free tier](/pricing).
|
||||
|
||||
Check out [our product pages](/ab-testing) and [read our docs](/docs) to learn more.
|
||||
Check out [our product pages](/experiments) and [read our docs](/docs) to learn more.
|
||||
|
||||
@@ -24,7 +24,7 @@ import { ComparisonRow } from 'components/ComparisonTable/row'
|
||||
|
||||
### What is PostHog?
|
||||
|
||||
[PostHog](https://posthog.com) (that's us 👋) is an all-in-one platform built to help engineers create better products. It includes product analytics **and** a whole bunch more, such as [A/B testing](/ab-testing), [feature flags](/feature-flags), and [session replays](/session-replay).
|
||||
[PostHog](https://posthog.com) (that's us 👋) is an all-in-one platform built to help engineers create better products. It includes product analytics **and** a whole bunch more, such as [A/B testing](/experiments), [feature flags](/feature-flags), and [session replays](/session-replay).
|
||||
|
||||
It's designed for product-minded engineers, growth teams, and product managers who need to move fast and iterate based on reliable, actionable insights.
|
||||
|
||||
|
||||
@@ -159,7 +159,7 @@ According to [reviews on G2](https://www.g2.com/products/microsoft-microsoft-cla
|
||||
|
||||
### What is PostHog?
|
||||
|
||||
[PostHog](https://posthog.com) (that's us 👋) is an all-in-one platform built to help engineers create better products. It includes [session replays](/session-replay) **and** a whole bunch more, such as [product analytics](/analytics), [A/B testing](/ab-testing), and [feature flags](/feature-flags).
|
||||
[PostHog](https://posthog.com) (that's us 👋) is an all-in-one platform built to help engineers create better products. It includes [session replays](/session-replay) **and** a whole bunch more, such as [product analytics](/analytics), [A/B testing](/experiments), and [feature flags](/feature-flags).
|
||||
|
||||
It's designed for product-minded engineers, growth teams, and product managers who need to move fast and iterate based on reliable, actionable insights.
|
||||
|
||||
@@ -179,7 +179,7 @@ It's designed for product-minded engineers, growth teams, and product managers w
|
||||
|
||||
### How much does PostHog cost?
|
||||
|
||||
PostHog has [transparent pricing](/pricing?product=session-replay) based on usage. It’s free to get started and completely free for the first 5,000 recordings. After this free monthly allowance, pricing starts at $0.0050/recording (or $50 for 10k recordings), and recordings cost progressively less the more you use. This makes PostHog significantly cheaper than all the other companies on this list (apart from [Microsoft Clarity](#3-microsoft-clarity)).
|
||||
PostHog has [transparent pricing](/session-replay#pricing) based on usage. It’s free to get started and completely free for the first 5,000 recordings. After this free monthly allowance, pricing starts at $0.0050/recording (or $50 for 10k recordings), and recordings cost progressively less the more you use. This makes PostHog significantly cheaper than all the other companies on this list (apart from [Microsoft Clarity](#3-microsoft-clarity)).
|
||||
|
||||
### Why do companies use PostHog?
|
||||
|
||||
|
||||
@@ -54,7 +54,7 @@ You can also evaluate feature flags using PostHog's API from any language that c
|
||||
|
||||
#### How much does it cost?
|
||||
|
||||
There are no limits on feature flag usage in the open-source edition, though A/B testing isn't available. PostHog's Cloud edition includes 1 million API requests per month for free – see the [feature flag pricing page](/pricing?product=feature-flags) for more info.
|
||||
There are no limits on feature flag usage in the open-source edition, though A/B testing isn't available. PostHog's Cloud edition includes 1 million API requests per month for free – see the [feature flag pricing page](/feature-flags#pricing) for more info.
|
||||
|
||||
### 2. Unleash
|
||||
|
||||
@@ -180,7 +180,7 @@ In addition to the free open-source edition, Flipper also offers a cloud-hosted
|
||||
|
||||
#### What is FeatBit?
|
||||
|
||||
FeatBit is an open-source feature flag and A/B testing tool that's available in Standard (for small businesses) and Professional (for enterprises) flavors – the Standard edition is easier deploy due to fewer dependencies. It supports custom user segments, rolling out by percentages, and feature flag scheduling. A/B testing data can also be exported to tools like Datadog, Grafana, and Amplitude.
|
||||
FeatBit is an open-source feature flag and A/B testing tool that's available in Standard (for small businesses) and Professional (for enterprises) flavors – the Standard edition is easier deploy due to fewer dependencies. It supports custom user segments, rolling out by percentages, and feature flag scheduling. A/B testing data can also be exported to tools like Datadog, Grafana, and Amplitude.
|
||||
|
||||
#### Supported SDKs
|
||||
|
||||
|
||||
@@ -98,7 +98,7 @@ According to [BuiltWith](https://trends.builtwith.com/analytics/PostHog), as of
|
||||
|
||||
Survicate supports platforms PostHog doesn't yet, such as surveys for mobile apps. It also offers 1-click integrations for sending survey data to other tools, whereas PostHog requires some basic setup using [webhooks](/docs/webhooks).
|
||||
|
||||
But, while Survicate goes slightly deeper on survey features, PostHog integrates entire tools Survicate doesn't, such as [session replays](/session-replay), [product analytics](/product-analytics), and [A/B testing](/ab-testing). This makes it easier to connect survey data to real users, and real sessions.
|
||||
But, while Survicate goes slightly deeper on survey features, PostHog integrates entire tools Survicate doesn't, such as [session replays](/session-replay), [product analytics](/product-analytics), and [A/B testing](/experiments). This makes it easier to connect survey data to real users, and real sessions.
|
||||
|
||||
<ComparisonTable column1="PostHog" column2="Survicate">
|
||||
<ComparisonRow column1={true} column2={true} feature="Surveys" description="Collect and analyze feedback, run NPS and PMF"/>
|
||||
|
||||
@@ -25,7 +25,7 @@ import { ComparisonRow } from 'components/ComparisonTable/row'
|
||||
|
||||
### What is PostHog?
|
||||
|
||||
[PostHog](/) (that's us 👋) is an open-source platform that combines [product analytics](/product-analytics), [session replay](/session-replay), [A/B testing](/ab-testing), and [feature flags](/feature-flags). It also has a [data warehouse for startups](/docs/data-warehouse) and a [customer data platform (CDP)](/docs/cdp). This means it's not only an alternative to UXCam, but also tools like [Statsig](/blog/posthog-vs-statsig) and [LaunchDarkly](/blog/posthog-vs-launchdarkly).
|
||||
[PostHog](/) (that's us 👋) is an open-source platform that combines [product analytics](/product-analytics), [session replay](/session-replay), [A/B testing](/experiments), and [feature flags](/feature-flags). It also has a [data warehouse for startups](/docs/data-warehouse) and a [customer data platform (CDP)](/docs/cdp). This means it's not only an alternative to UXCam, but also tools like [Statsig](/blog/posthog-vs-statsig) and [LaunchDarkly](/blog/posthog-vs-launchdarkly).
|
||||
|
||||
By combining all these tools into one platform, it eliminates the need for stitching together integrations between third-party tools, and makes it easier for engineers to work with data. PostHog is popular with engineering-led companies, like AI startup [ElevenLabs](/customers/elevenlabs) and [carVertical](/feature-flags), which use PostHog for both session replays and analytics.
|
||||
|
||||
|
||||
@@ -433,4 +433,4 @@ We're biased, obviously, but we think PostHog is the perfect VWO replacement if:
|
||||
- You want tools to help you build a better product – like behavioral analytics, feature flags, and A/B testing.
|
||||
- You want to try before you buy. We're self-serve with a [generous free tier](/pricing).
|
||||
|
||||
Check out [our product pages](/ab-testing) and [read our docs](/docs) to learn more.
|
||||
Check out [our product pages](/experiments) and [read our docs](/docs) to learn more.
|
||||
|
||||
@@ -23,7 +23,7 @@ import { ComparisonRow } from 'components/ComparisonTable/row'
|
||||
|
||||
### 1. We're an all-in-one platform
|
||||
|
||||
PostHog combines [product analytics](/product-analytics) and [web analytics](/web-analytics) with [session replay](/session-replay), [feature flags](/feature-flags), [A/B testing](/ab-testing), [surveys](/surveys), and a baked in [data warehouse](/docs/data-warehouse) into one tightly integrated platform. Everything you need from a single app with a single contract. A _genuine_ single source of truth for your product and customer data.
|
||||
PostHog combines [product analytics](/product-analytics) and [web analytics](/web-analytics) with [session replay](/session-replay), [feature flags](/feature-flags), [A/B testing](/experiments), [surveys](/surveys), and a baked in [data warehouse](/docs/data-warehouse) into one tightly integrated platform. Everything you need from a single app with a single contract. A _genuine_ single source of truth for your product and customer data.
|
||||
|
||||
### 2. It's built for developers
|
||||
|
||||
|
||||
@@ -152,7 +152,7 @@ PostHog provides all the visualizations and product tools for evaluating the suc
|
||||
<ComparisonRow column1={true} column2={false} feature="Fully transparent" />
|
||||
</ComparisonTable>
|
||||
|
||||
PostHog’s [feature flag pricing](/pricing?product=feature-flags) is pay-per-request (and A/B tests use feature flags). There is a generous free tier of 1M requests per month with all features, add-ons, and integrations available.
|
||||
PostHog’s [feature flag pricing](/feature-flags#pricing) is pay-per-request (and A/B tests use feature flags). There is a generous free tier of 1M requests per month with all features, add-ons, and integrations available.
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@ PostHog and Hotjar both help you understand user behavior, including the ability
|
||||
|
||||
### 1. We're an all-in-one platform
|
||||
|
||||
PostHog goes beyond [replays](/session-replay) and [user surveys](/surveys) by integrating them with [product](/product-analytics) and [web](/web-analytics) analytics, [feature flags](/feature-flags), [A/B testing](/ab-testing), and a [data warehouse](/data-warehouse). It's everything you need from a single app with a single contract. A _genuine_ single source of truth for your product and customer data.
|
||||
PostHog goes beyond [replays](/session-replay) and [user surveys](/surveys) by integrating them with [product](/product-analytics) and [web](/web-analytics) analytics, [feature flags](/feature-flags), [A/B testing](/experiments), and a [data warehouse](/data-warehouse). It's everything you need from a single app with a single contract. A _genuine_ single source of truth for your product and customer data.
|
||||
|
||||
### 2. We support both web and mobile apps
|
||||
|
||||
|
||||
@@ -116,7 +116,7 @@ PostHog and LaunchDarkly take opposing approaches.
|
||||
<ComparisonRow column1={true} column2={false} feature="Free collaboration" />
|
||||
</ComparisonTable>
|
||||
|
||||
**PostHog’s** [feature flag pricing](/pricing?product=feature-flags) is pay-per-request (and A/B tests use feature flags). There is a generous free tier of 1M requests per month with all features, add-ons, and integrations available.
|
||||
**PostHog’s** [feature flag pricing](/feature-flags#pricing) is pay-per-request (and A/B tests use feature flags). There is a generous free tier of 1M requests per month with all features, add-ons, and integrations available.
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -54,7 +54,7 @@ We ship weirdly fast. We update [our changelog](/changlog) every week and often
|
||||
|
||||
- **Feature flags:** PostHog offers robust, multivariate feature flags which support JSON payloads. This enables you to push real-time changes to your product without needing to redeploy. Visit [our feature flag page](/feature-flags) for more information. LogRocket doesn’t have any in-built feature flag functions.
|
||||
|
||||
- **Experiments:** PostHog offers multivariate experimentation, which enables you to test changes and discover statistically relevant insights. Visit [the experimentation page](/ab-testing) for more information. LogRocket doesn’t have any in-built experimentation features.
|
||||
- **Experiments:** PostHog offers multivariate experimentation, which enables you to test changes and discover statistically relevant insights. Visit [the experimentation page](/experiments) for more information. LogRocket doesn’t have any in-built experimentation features.
|
||||
|
||||
### Product analytics
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ import { ComparisonRow } from 'components/ComparisonTable/row'
|
||||
|
||||
### 1. We're an all-in-one platform
|
||||
|
||||
PostHog combines [product analytics](/product-analytics) with [web analytics](/web-analytics), [session replay](/session-replay), [feature flags](/feature-flags), [A/B testing](/ab-testing), [surveys](/surveys), and a [data warehouse](/docs/data-warehouse) into one tightly integrated platform. Everything you need from a single app with a single contract. A _genuine_ single source of truth for your product and customer data.
|
||||
PostHog combines [product analytics](/product-analytics) with [web analytics](/web-analytics), [session replay](/session-replay), [feature flags](/feature-flags), [A/B testing](/experiments), [surveys](/surveys), and a [data warehouse](/docs/data-warehouse) into one tightly integrated platform. Everything you need from a single app with a single contract. A _genuine_ single source of truth for your product and customer data.
|
||||
|
||||
### 2. It's built for developers
|
||||
|
||||
|
||||
@@ -78,7 +78,7 @@ To make a clean comparison between PostHog and Pendo, we’ll focus on comparing
|
||||
|
||||
- **Feature flags:** PostHog includes [multivariate feature flags](/feature-flags) that support JSON payloads, enabling you to push real-time changes to your product without redeploying. Teams can use feature flags to offer different features or UI choices to users, to trigger in-app messages, and more.
|
||||
|
||||
- **A/B testing:** In PostHog, you can use the [experimentation suite](/ab-testing) to create multivariate tests within your product, such as showing some users a different page layout to others. Over time, you can build an understanding of which page performs better, correlate results with other events, and deploy a final version.
|
||||
- **A/B testing:** In PostHog, you can use the [experimentation suite](/experiments) to create multivariate tests within your product, such as showing some users a different page layout to others. Over time, you can build an understanding of which page performs better, correlate results with other events, and deploy a final version.
|
||||
|
||||
### Product Analytics
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ PostHog and Sentry are multi-product platforms trusted by developers to help mak
|
||||
|
||||
1. **Sentry** is an application monitoring tool with error and performance monitoring, session replay, code coverage, and more. It's built for engineers and devops teams.
|
||||
|
||||
2. **PostHog** is an all-in-one platform for building successful products. It includes [product analytics](/product-analytics), [session replays](/session-replay), [feature flags](/ab-testing), [surveys](/surveys), and more. It's built for engineers and product teams.
|
||||
2. **PostHog** is an all-in-one platform for building successful products. It includes [product analytics](/product-analytics), [session replays](/session-replay), [feature flags](/experiments), [surveys](/surveys), and more. It's built for engineers and product teams.
|
||||
|
||||
## How is PostHog different?
|
||||
|
||||
@@ -43,7 +43,7 @@ PostHog has usage-based pricing, meaning you can get everything for free if you
|
||||
|
||||
Sentry is much more focused and opinionated in how you use it. The tools are tailored for developers and devops teams to do error and performance monitoring.
|
||||
|
||||
PostHog offers more flexibility and breadth. It's built for developers but also used by marketing, growth, and data teams. Startups and scaleups use PostHog for tracking [retention](/docs/product-analytics/retention), running targeted [A/B tests](/ab-testing), [booking user interviews](/tutorials/feedback-interviews-site-apps), and more.
|
||||
PostHog offers more flexibility and breadth. It's built for developers but also used by marketing, growth, and data teams. Startups and scaleups use PostHog for tracking [retention](/docs/product-analytics/retention), running targeted [A/B tests](/experiments), [booking user interviews](/tutorials/feedback-interviews-site-apps), and more.
|
||||
|
||||
More examples of this flexibility include PostHog's simpler [custom event capture](/docs/getting-started/send-events#2-capture-custom-events), the ability to [import and use data from external sources](/data-warehouse), and [direct SQL querying](/docs/hogql).
|
||||
|
||||
|
||||
@@ -132,7 +132,7 @@ Both PostHog and Statsig offer simple, transparent pricing.
|
||||
|
||||
**Statsig** has a free plan for up to 1 million *metered events* (a metered event is any feature flag, A/B testing, or logging event). Thereafter, it's $150 per month for up to 5 million metered events, and then $50 per every 1 million events.
|
||||
|
||||
**PostHog’s** prices for [A/B testing and feature flags](/pricing?product=feature-flags) requests are as follows:
|
||||
**PostHog’s** prices for [A/B testing and feature flags](/feature-flags#pricing) requests are as follows:
|
||||
- Free up to 1 million requests.
|
||||
- **$0.000100** per request between 1-2 million requests – i.e., $100 for 1 million requests.
|
||||
- **$0.000045** from 2-10 million requests – i.e. $45 for 1 million requests
|
||||
@@ -140,7 +140,7 @@ Both PostHog and Statsig offer simple, transparent pricing.
|
||||
|
||||
You can, however, significantly reduce feature flag and A/B testing requests by using [PostHog's backend local evaluation](/docs/feature-flags/local-evaluation), potentially saving you a considerable amount of money.
|
||||
|
||||
> **Note:** Product analytics are billed separately from A/B testing and feature flag requests. See our [analytics pricing](/pricing?product-analytics) for more details.
|
||||
> **Note:** Product analytics are billed separately from A/B testing and feature flag requests. See our [analytics pricing](/product-analytics#pricing) for more details.
|
||||
|
||||
### Integrations
|
||||
|
||||
|
||||
@@ -31,7 +31,7 @@ Web analytics in PostHog is similar to Plausible – it’s centered around [a s
|
||||
|
||||
“We were using Plausible but it doesn’t really have any cool features to analyze data more deeply,” said Tomás. “PostHog, on the other hand, enables us to analyze our traffic in more ways and to set up funnels when we need to.”
|
||||
|
||||
Tomás is currently focused on tracking typical user interactions and uses [funnel and path insights](/product-analytics) to see which pages people move through, including their entry and exit points, and form submissions. In the future he envisions using additional tools, such as [A/B testing](/ab-testing) to learn even more.
|
||||
Tomás is currently focused on tracking typical user interactions and uses [funnel and path insights](/product-analytics) to see which pages people move through, including their entry and exit points, and form submissions. In the future he envisions using additional tools, such as [A/B testing](/experiments) to learn even more.
|
||||
|
||||
“We’re planning to deploy different landing pages across the site,” said Tomás. “A/B testing is one of the other features we’re going to start using first, so we can get an idea of what works and what helps us get more leads.”
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@ This success is largely because Wowzer's product and growth teams are incredibly
|
||||
|
||||
## Rapid experimentation and instant insights
|
||||
|
||||
Wowzer is continuously tweaking and [experimenting](/ab-testing) with pricing strategies and features on their platform. The ability to dive deep into real-time results enables quick decisions that significantly impact conversion and engagement.
|
||||
Wowzer is continuously tweaking and [experimenting](/experiments) with pricing strategies and features on their platform. The ability to dive deep into real-time results enables quick decisions that significantly impact conversion and engagement.
|
||||
|
||||
"For example, we weren't sure what effect moving our DALL-E model from our free to paid tier would have. We ran an experiment and we saw our conversion rate increased by 10%. Not only that, we saw that the average time to conversion decreased from two days to under four hours, and that the number of sessions per user increased," shares Amin.
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@ Web analytics relies on a subset of the events and properties used by product an
|
||||
|
||||
## How much does web analytics cost?
|
||||
|
||||
Web analytics is no additional cost on top of product analytics. Events are used between both, and follow [product analytics' pricing](/pricing?product=product-analytics).
|
||||
Web analytics is no additional cost on top of product analytics. Events are used between both, and follow [product analytics' pricing](/product-analytics#pricing).
|
||||
|
||||
## Where is my world map?
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ Our first line of code was January 22nd, 2020, after a pivot during a YC batch.
|
||||
* [Product analytics](/product-analytics)
|
||||
* [Session replay](/session-replay)
|
||||
* [Feature flags](/feature-flags)
|
||||
* [A/B testing](/ab-testing)
|
||||
* [A/B testing](/experiments)
|
||||
* [User surveys](/docs/surveys)
|
||||
* [Heatmaps](/docs/toolbar/heatmaps)
|
||||
* [SDKs](/docs/libraries) for all the above
|
||||
|
||||
@@ -12,7 +12,7 @@ tags:
|
||||
- Product engineers
|
||||
---
|
||||
|
||||
[A/B testing](/ab-testing) is powerful when used correctly, but it's easily misused. Only comparing the old version with a new feature, copy change, or query does not create success.
|
||||
[A/B testing](/experiments) is powerful when used correctly, but it's easily misused. Only comparing the old version with a new feature, copy change, or query does not create success.
|
||||
|
||||
In the wise words of Picasso: "Good artists copy, great artists steal." So, to help you become a great A/B test "artist," we’ve researched how some of Y Combinator’s most successful companies do A/B tests.
|
||||
|
||||
|
||||
@@ -94,7 +94,7 @@ To know whether your sample size is large enough, you'll need to know:
|
||||
|
||||
3. **Your desired level of confidence.** The industry standard is 95%.
|
||||
|
||||
You then use a [sample size determination formula](https://en.wikipedia.org/wiki/Sample_size_determination) to determine if your sample size is large enough. There are many calculators online that will do this for you, so you can avoid calculating this yourself – [A/B tests in PostHog](/ab-testing) calculate this for you automatically.
|
||||
You then use a [sample size determination formula](https://en.wikipedia.org/wiki/Sample_size_determination) to determine if your sample size is large enough. There are many calculators online that will do this for you, so you can avoid calculating this yourself – [A/B tests in PostHog](/experiments) calculate this for you automatically.
|
||||
|
||||
### 5. A long enough test duration
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ tags:
|
||||
- experimentation
|
||||
---
|
||||
|
||||
[A/B tests](/ab-testing) enables you to compare the impact of your changes on key metrics.
|
||||
[A/B tests](/experiments) enables you to compare the impact of your changes on key metrics.
|
||||
|
||||
PostHog makes [A/B testing on Android](/docs/experiments/installation?tab=android) simple. To show you how, this tutorial will guide you on how to run an A/B test with PostHog on an app built with Kotlin and Jetpack Compose. We will create a simple A/B test to see how the background color of a screen affects the click-through rate of a button.
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ export const EventsInPostHogDark = "https://res.cloudinary.com/dmukukwp6/image/u
|
||||
export const TestSetupLight = "https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/images/tutorials/bubble-ab-tests/test-setup-light.png"
|
||||
export const TestSetupDark = "https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/images/tutorials/bubble-ab-tests/test-setup-dark.png"
|
||||
|
||||
[Bubble](https://bubble.io/) is a great tool for building marketing websites. However, sometimes you may be unsure if a change actually improves your conversion rate. This is where [A/B testing](/ab-testing) is helpful. It enables you to test and compare the results of your changes.
|
||||
[Bubble](https://bubble.io/) is a great tool for building marketing websites. However, sometimes you may be unsure if a change actually improves your conversion rate. This is where [A/B testing](/experiments) is helpful. It enables you to test and compare the results of your changes.
|
||||
|
||||
This tutorial shows you how to set up A/B tests with Bubble and PostHog to get the most out of your website.
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ export const EventsInPostHogDark = "https://res.cloudinary.com/dmukukwp6/image/u
|
||||
export const TestSetupLight = "https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/images/tutorials/flutter-ab-tests/experiment-setup-light.png"
|
||||
export const TestSetupDark = "https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/images/tutorials/flutter-ab-tests/experiment-setup-dark.png"
|
||||
|
||||
[A/B tests](/ab-testing) help you improve your Flutter app by enabling you to compare the impact of changes on key metrics. To show you how to set one up, we create a basic Flutter app, add PostHog, create an A/B test, and implement the code for it.
|
||||
[A/B tests](/experiments) help you improve your Flutter app by enabling you to compare the impact of changes on key metrics. To show you how to set one up, we create a basic Flutter app, add PostHog, create an A/B test, and implement the code for it.
|
||||
|
||||
## 1. Create a new Flutter app
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ tags:
|
||||
- feature flags
|
||||
---
|
||||
|
||||
[Framer](https://www.framer.com/) is a great tool for building marketing websites. However, sometimes you may be unsure if a change will actually improve your conversion rate. This is where [A/B testing](/ab-testing) is helpful. It enables you to test and compare your changes to systemically improve your site.
|
||||
[Framer](https://www.framer.com/) is a great tool for building marketing websites. However, sometimes you may be unsure if a change will actually improve your conversion rate. This is where [A/B testing](/experiments) is helpful. It enables you to test and compare your changes to systemically improve your site.
|
||||
|
||||
This tutorial shows you how to set up A/B tests with Framer and PostHog to get the most out of your website.
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ tags: ['experimentation']
|
||||
featuredVideo: https://www.youtube-nocookie.com/embed/BtHeP8lORJY
|
||||
---
|
||||
|
||||
[A/B tests](/ab-testing) help you make your iOS app better by comparing the impact of changes on key metrics.
|
||||
[A/B tests](/experiments) help you make your iOS app better by comparing the impact of changes on key metrics.
|
||||
|
||||
PostHog makes [A/B testing on iOS](/docs/experiments/installation?tab=iOS) simple. To show you how, this tutorial will guide you on how to add PostHog to your iOS app and run an A/B test. We'll create a basic A/B test to see how the background color of a screen affects the click-through rate of a button.
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ tags:
|
||||
- actions
|
||||
---
|
||||
|
||||
[A/B tests](/ab-testing) are a way to make sure the content of your Next.js app performs as well as possible. They compare two or more variations on their impact on a goal.
|
||||
[A/B tests](/experiments) are a way to make sure the content of your Next.js app performs as well as possible. They compare two or more variations on their impact on a goal.
|
||||
|
||||
PostHog's experimentation tool makes it easy to set up A/B tests. This tutorial shows you how to build a basic Next.js app (with the app router), add PostHog to it, bootstrap feature flag data, and set up the A/B test in the app.
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ tags:
|
||||
- feature flags
|
||||
---
|
||||
|
||||
A/B testing enables you to experiment with how changes to your app affect metrics you care about. PostHog makes it easy to set up [A/B tests](/ab-testing) in Python. This tutorial shows you how to create a basic Python app with Flask, add PostHog to it, and then set up an A/B test to compare button variants.
|
||||
A/B testing enables you to experiment with how changes to your app affect metrics you care about. PostHog makes it easy to set up [A/B tests](/experiments) in Python. This tutorial shows you how to create a basic Python app with Flask, add PostHog to it, and then set up an A/B test to compare button variants.
|
||||
|
||||
## Creating a basic Flask app
|
||||
|
||||
|
||||
@@ -161,7 +161,7 @@ def show_user(user):
|
||||
return f"<p>Hello, {user}!</p>"
|
||||
```
|
||||
|
||||
This is the basic implementation of Python feature flags in Flask set up. From here, we can set up [A/B tests](/ab-testing), a [public beta program](/tutorials/public-beta-program), or [canary releases](/tutorials/canary-release).
|
||||
This is the basic implementation of Python feature flags in Flask set up. From here, we can set up [A/B tests](/experiments), a [public beta program](/tutorials/public-beta-program), or [canary releases](/tutorials/canary-release).
|
||||
|
||||
## Further reading
|
||||
|
||||
|
||||
@@ -146,7 +146,7 @@ function App() {
|
||||
export default App;
|
||||
```
|
||||
|
||||
These are basic implementations of React feature flags setup. From here, you can set up [A/B tests](/ab-testing), a [public beta program](/tutorials/public-beta-program), or [canary releases](/tutorials/canary-release).
|
||||
These are basic implementations of React feature flags setup. From here, you can set up [A/B tests](/experiments), a [public beta program](/tutorials/public-beta-program), or [canary releases](/tutorials/canary-release).
|
||||
|
||||
## Further reading
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ export const EventsInPostHogDark = "https://res.cloudinary.com/dmukukwp6/image/u
|
||||
export const TestSetupLight = "https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/images/tutorials/react-native-ab-tests/experiment-setup-light.png"
|
||||
export const TestSetupDark = "https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/images/tutorials/react-native-ab-tests/experiment-setup-dark.png"
|
||||
|
||||
[A/B tests](/ab-testing) helps you improve your React Native app by enabling you to compare the impact of changes on key metrics.
|
||||
[A/B tests](/experiments) helps you improve your React Native app by enabling you to compare the impact of changes on key metrics.
|
||||
|
||||
PostHog makes [A/B testing in React Native](/docs/experiments/installation?tab=React+Native) simple. To show you how to set it up, we create a basic app with Expo, add PostHog, create an A/B test, and implement the code for it.
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ tags:
|
||||
- feature flags
|
||||
---
|
||||
|
||||
Redirect testing is a way to [A/B test](/ab-testing) web pages by redirecting users to one or the other.
|
||||
Redirect testing is a way to [A/B test](/experiments) web pages by redirecting users to one or the other.
|
||||
|
||||
To show you how to do a redirect test with PostHog, we set up a two-page Next.js app, create an A/B test in PostHog, and then implement it in our app using middleware and feature flags.
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
"@heroicons/react": "^1.0.6",
|
||||
"@hubspot/api-client": "^7.1.2",
|
||||
"@popperjs/core": "^2.11.2",
|
||||
"@posthog/icons": "0.7.3",
|
||||
"@posthog/icons": "0.8.2",
|
||||
"@slack/bolt": "^3.8.1",
|
||||
"@supabase/supabase-js": "^1.29.4",
|
||||
"@tailwindcss/container-queries": "^0.1.1",
|
||||
|
||||
@@ -31,7 +31,7 @@ export default function Checkbox({
|
||||
id={value || id}
|
||||
aria-describedby={`${value}-description`}
|
||||
name={value}
|
||||
className="checkbox focus:ring-primary hover:border-dark/50 dark:hover:border-dark size-5 text-green dark:text-green border-2 border-light dark:border-dark bg-white dark:bg-accent-dark checked:!bg-green rounded-[2px] appearance-none absolute transition-all cursor-pointer"
|
||||
className="checkbox focus:ring-primary hover:border-dark/50 dark:hover:border-dark size-5 text-green dark:text-green border-2 border-light dark:border-dark bg-white dark:bg-accent-dark checked:!bg-green checked:!border-green rounded-[2px] appearance-none absolute transition-all cursor-pointer"
|
||||
/>
|
||||
<Check className="size-5 relative invisible text-white dark:text-white pointer-events-none" />
|
||||
</span>
|
||||
|
||||
@@ -47,7 +47,7 @@ const Feature = ({ feature }: { feature: BillingV2FeatureType }) => {
|
||||
}
|
||||
|
||||
const Title = ({ title, className = '' }: { title: string; className?: string }) => {
|
||||
return <h5 className={`m-0 text-sm lg:text-[15px] opacity-70 font-normal ${className}`}>{title}</h5>
|
||||
return <h5 className={`m-0 text-sm opacity-70 font-normal ${className}`}>{title}</h5>
|
||||
}
|
||||
|
||||
export const InclusionOnlyRow = ({ plans }) => (
|
||||
|
||||
@@ -849,457 +849,345 @@ const PricingExperiment = ({
|
||||
<SelfHostOverlay open={currentModal === 'self host'} setOpen={setCurrentModal} />
|
||||
<SEO title="PostHog pricing" description="Find out how much it costs to use PostHog" />
|
||||
|
||||
<section className="w-screen md:w-auto overflow-x-hidden -mx-4 px-4">
|
||||
<div
|
||||
className={`grid md:grid-cols-2 md:mt-8 md:gap-x-12 lg:gap-x-8 xl:gap-x-4 gap-y-3 md:gap-y-0 mb-4 md:px-4 items-center ${section}`}
|
||||
>
|
||||
<div className="md:order-2">
|
||||
<div className="scale-[1.75] sm:scale-[1.4] md:scale-[1.1] lg:scale-[1.1] py-8 pl-20 sm:pl-28 md:p-0 md:scale-110 -mr-0 md:-mr-56 lg:-mr-64 xl:-mr-80 ">
|
||||
<Lottie
|
||||
options={{
|
||||
loop: false,
|
||||
autoplay: true,
|
||||
animationData: tractorHog,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<section className={`${section} mb-12 mt-8 md:px-4`}>
|
||||
<ProductTabs />
|
||||
</section>
|
||||
|
||||
<SectionLayout>
|
||||
<SectionHeader>
|
||||
<h3>Pricing calculator</h3>
|
||||
</SectionHeader>
|
||||
|
||||
<SectionMainCol>
|
||||
<Tabbed />
|
||||
</SectionMainCol>
|
||||
</SectionLayout>
|
||||
|
||||
<SectionLayout>
|
||||
<div className="bg-accent dark:bg-accent-dark p-4 pb-6 md:pb-4 rounded border border-light dark:border-dark flex flex-col md:flex-row justify-between md:items-center gap-4 -mt-4">
|
||||
<div>
|
||||
<h3 className="mb-1 text-xl">Give PostHog a try</h3>
|
||||
<p className="mb-0 text-[15px]">
|
||||
No need to pick a plan - try our free version and decide if you want advanced features
|
||||
later!
|
||||
</p>
|
||||
</div>
|
||||
<div className="md:order-1">
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl mt-0 mb-4">
|
||||
{currentProduct
|
||||
? billingProducts.find((p: BillingProductV2Type) => p.type === currentProduct)?.name ||
|
||||
currentProduct === 'experiments' ||
|
||||
'Product'
|
||||
: 'Usage-based'}{' '}
|
||||
pricing
|
||||
</h1>
|
||||
<p className="text-base font-medium opacity-60 leading-tight mb-4">
|
||||
PostHog offers usage-based pricing, not{' '}
|
||||
<Tooltip
|
||||
content={() => (
|
||||
<div className="max-w-sm">
|
||||
<strong className="block text-lg mb-1">What is value-based pricing?</strong>
|
||||
<p className="mb-2 text-sm">
|
||||
<em>Value-based pricing</em> is geared around testing how much money you're
|
||||
willing to pay.
|
||||
</p>
|
||||
<p className="mb-0 text-sm">
|
||||
<em>Usage-based pricing</em> is like a utility - where we continually seek
|
||||
to lower costs and make money through volume.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
placement="right"
|
||||
<div>
|
||||
<PlanCTA />
|
||||
</div>
|
||||
</div>
|
||||
</SectionLayout>
|
||||
|
||||
<SectionLayout>
|
||||
<SectionHeader>
|
||||
<h3>One plan for most customers</h3>
|
||||
</SectionHeader>
|
||||
|
||||
<SectionColumns>
|
||||
<SectionMainCol>
|
||||
<PlansTabs />
|
||||
</SectionMainCol>
|
||||
<SectionSidebar className="justify-between">
|
||||
<div>
|
||||
<h4 className="text-lg mb-2">Plan FYIs</h4>
|
||||
<SidebarList>
|
||||
<SidebarListItem>Self-serve, no upsells, no need to "talk to sales"</SidebarListItem>
|
||||
<SidebarListItem>
|
||||
We don't do outbound sales. Everyone pays the same rates.
|
||||
</SidebarListItem>
|
||||
<SidebarListItem>
|
||||
You can set billing limits per product so you never get a surprise bill
|
||||
</SidebarListItem>
|
||||
<SidebarListItem>
|
||||
90% of our customers don't pay anything to use PostHog!
|
||||
<Tooltip
|
||||
content={() => (
|
||||
<div className="max-w-[300px]">
|
||||
<p className="mb-1">
|
||||
<strong>... and we're cool with it!</strong>
|
||||
</p>
|
||||
<p className="text-[15px] mb-0">
|
||||
Use PostHog for free within our generous free tier limits. Exceed
|
||||
the free tier limits and you'll only pay for what you use.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
placement="bottom"
|
||||
>
|
||||
<IconInfo className="size-4 inline-block ml-0.5 -mt-0.5" />
|
||||
</Tooltip>{' '}
|
||||
</SidebarListItem>
|
||||
</SidebarList>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
onClick={() => setIsPlanComparisonVisible(!isPlanComparisonVisible)}
|
||||
className="text-red dark:text-yellow font-semibold cursor-pointer"
|
||||
>
|
||||
<span className="border-b border-dashed border-primary/50 dark:border-primary-dark/50">
|
||||
value-based pricing
|
||||
</span>
|
||||
</Tooltip>
|
||||
.
|
||||
</p>
|
||||
<p className="text-base font-medium opacity-60 leading-tight">
|
||||
Enjoy a generous free tier every month.
|
||||
</p>
|
||||
<div className="flex gap-4 items-center">
|
||||
<div>
|
||||
<PlanCTA />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm opacity-70">No credit card required</span>
|
||||
<Tooltip
|
||||
content={() => (
|
||||
<div className="max-w-[300px] pb-2">
|
||||
<p className="mb-1">
|
||||
<strong>Totally free</strong>{' '}
|
||||
<span className="opacity-70 text-sm italic">
|
||||
- no credit card required
|
||||
</span>
|
||||
</p>
|
||||
<ul className="pl-0 pb-2 list-none [&_li]:text-[15px] opacity-70">
|
||||
<li>Usage capped at free tier limits</li>
|
||||
<li>Basic product features</li>
|
||||
<li>1 project</li>
|
||||
<li>1-year data retention</li>
|
||||
<li>Community support</li>
|
||||
</ul>
|
||||
<PlanCTA intent="free" />
|
||||
</div>
|
||||
)}
|
||||
placement="right"
|
||||
>
|
||||
<IconInfo className="size-5 inline-block opacity-60 hover:opacity-75 ml-0.5 -mt-0.5" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
{isPlanComparisonVisible ? 'Hide' : 'Show'} full plan comparison
|
||||
</button>
|
||||
</div>
|
||||
</SectionSidebar>
|
||||
</SectionColumns>
|
||||
</SectionLayout>
|
||||
|
||||
<section
|
||||
className={`${section} ${
|
||||
isPlanComparisonVisible
|
||||
? 'visible max-h-full opacity-1 mb-12 mt-8 md:px-4'
|
||||
: 'overflow-y-hidden invisible max-h-0 opacity-0'
|
||||
} transition duration-500 ease-in-out transform`}
|
||||
>
|
||||
<div className="overflow-x-auto -mx-4 px-4 md:mx-0 md:px-0">
|
||||
<div className="grid grid-cols-16 mb-1 min-w-[1000px]">
|
||||
<div className="col-span-4 bg-accent/50 dark:bg-black/75 px-3 py-1"> </div>
|
||||
{platformAndSupportProduct?.plans
|
||||
?.filter((plan: BillingV2PlanType) => plan.name !== 'Teams') // This is a temporary addition until the teams addon is shipped and the teams plan is removed
|
||||
?.map((plan: BillingV2PlanType) => (
|
||||
<div className="col-span-4 px-3 py-1" key={plan.key}>
|
||||
<strong className="text-sm opacity-75">{plan.name}</strong>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-16 mb-2 border-x border-b border-light dark:border-dark bg-white dark:bg-accent-dark [&>div]:border-t [&>div]:border-light dark:[&>div]:border-dark min-w-[1000px]">
|
||||
<div className="col-span-4 bg-accent/50 dark:bg-black/75 px-3 py-2 text-sm">
|
||||
<strong className="text-primary/75 dark:text-primary-dark/75">Base price</strong>
|
||||
</div>
|
||||
{platformAndSupportProduct?.plans
|
||||
?.filter((plan: BillingV2PlanType) => plan.name !== 'Teams') // This is a temporary addition until the teams addon is shipped and the teams plan is removed
|
||||
?.map((plan: BillingV2PlanType) => {
|
||||
return (
|
||||
<div className="col-span-4 px-3 py-2 text-sm" key={`${plan.key}-base-price`}>
|
||||
{plan.included_if === 'no_active_subscription' ? (
|
||||
<span>Free forever</span>
|
||||
) : plan.included_if === 'has_subscription' ? (
|
||||
<span>$0</span>
|
||||
) : plan.unit_amount_usd ? (
|
||||
`$${parseFloat(plan.unit_amount_usd).toFixed(0)}/mo`
|
||||
) : plan.contact_support ? (
|
||||
'Contact us'
|
||||
) : (
|
||||
'Contact us'
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{highestSupportPlan?.features
|
||||
?.filter(
|
||||
(f: BillingV2FeatureType) =>
|
||||
![
|
||||
// TODO: this shouldn't be necessary, update billing products api to include entitlement_only info
|
||||
'role_based_access',
|
||||
'project_based_permissioning',
|
||||
'ingestion_taxonomy',
|
||||
'tagging',
|
||||
].includes(f.key)
|
||||
)
|
||||
.map((feature: BillingV2FeatureType) => (
|
||||
<>
|
||||
<div className="col-span-4 bg-accent/50 dark:bg-black/75 px-3 py-2 text-sm">
|
||||
{feature.description ? (
|
||||
<Tooltip content={feature.description}>
|
||||
<strong className="border-b border-dashed border-light dark:border-dark cursor-help text-primary/75 dark:text-primary-dark/75">
|
||||
{feature.name}
|
||||
</strong>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<strong className="text-primary/75 dark:text-primary-dark/75">
|
||||
{feature.name}
|
||||
</strong>
|
||||
)}
|
||||
</div>
|
||||
{platformAndSupportProduct?.plans
|
||||
?.filter((plan: BillingV2PlanType) => plan.name !== 'Teams') // This is a temporary addition until the teams addon is shipped and the teams plan is removed
|
||||
?.map((plan: BillingV2PlanType) => {
|
||||
const planFeature = plan?.features?.find((f) => f.key === feature.key)
|
||||
return (
|
||||
<div
|
||||
className="col-span-4 px-3 py-2 text-sm"
|
||||
key={`${plan.key}-${feature.key}`}
|
||||
>
|
||||
{planFeature ? (
|
||||
<div className="flex gap-x-2">
|
||||
{planFeature.note ?? (
|
||||
<IconCheck className="w-5 h-5 text-green" />
|
||||
)}
|
||||
{planFeature.limit && (
|
||||
<span className="opacity-75">
|
||||
<>
|
||||
{planFeature.limit} {planFeature.unit}
|
||||
</>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-16 min-w-[1000px]">
|
||||
<div className="col-span-4 px-3 py-2 text-sm"> </div>
|
||||
<div className="col-span-4 px-3 py-2">
|
||||
<PlanCTA intent="free" />
|
||||
</div>
|
||||
<div className="col-span-4 px-3 py-2">
|
||||
<PlanCTA intent="paid" />
|
||||
</div>
|
||||
<div className="col-span-4 px-3 py-2">
|
||||
<PlanCTA intent="enterprise" ctaText="Get in touch" ctaLink="/talk-to-a-human" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{!currentProduct && (
|
||||
<>
|
||||
<section className={`${section} mb-12 mt-8 md:px-4`}>
|
||||
<ProductTabs />
|
||||
</section>
|
||||
<SectionLayout id="add-ons">
|
||||
<SectionHeader>
|
||||
<h3>Add-ons</h3>
|
||||
</SectionHeader>
|
||||
|
||||
<SectionLayout>
|
||||
<SectionHeader>
|
||||
<h3>Pricing calculator</h3>
|
||||
</SectionHeader>
|
||||
<SectionColumns>
|
||||
<SectionMainCol>
|
||||
<AllAddons />
|
||||
</SectionMainCol>
|
||||
<SectionSidebar>
|
||||
<h4 className="text-lg mb-0">Why add-ons?</h4>
|
||||
<SidebarList>
|
||||
<SidebarListItem>
|
||||
We move additional functionality to add-ons to keep our base prices low. This is so you
|
||||
never pay for functionality you don't want or need.
|
||||
</SidebarListItem>
|
||||
<SidebarListItem>Subscribe to add-ons after signing up.</SidebarListItem>
|
||||
</SidebarList>
|
||||
</SectionSidebar>
|
||||
</SectionColumns>
|
||||
</SectionLayout>
|
||||
|
||||
<SectionMainCol>
|
||||
<Tabbed />
|
||||
</SectionMainCol>
|
||||
</SectionLayout>
|
||||
<section className="bg-white text-dark shadow-xl rounded pt-6 pb-2 md:py-8 px-8 md:px-12 mx-6 md:mx-auto w-[calc(100%_-_3rem)] md:w-full max-w-3xl -rotate-1">
|
||||
<SectionHeader>
|
||||
<p className="opacity-60 text-[15px] mb-2">A note from our co-founder</p>
|
||||
<h3>Our pricing is designed to make you happy</h3>
|
||||
</SectionHeader>
|
||||
|
||||
<SectionLayout>
|
||||
<div className="bg-accent dark:bg-accent-dark p-4 pb-6 md:pb-4 rounded border border-light dark:border-dark flex flex-col md:flex-row justify-between md:items-center gap-4 -mt-4">
|
||||
<div>
|
||||
<h3 className="mb-1 text-xl">Give PostHog a try</h3>
|
||||
<p className="mb-0 text-[15px]">
|
||||
No need to pick a plan - try our free version and decide if you want advanced
|
||||
features later!
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<PlanCTA />
|
||||
</div>
|
||||
</div>
|
||||
</SectionLayout>
|
||||
|
||||
<SectionLayout>
|
||||
<SectionHeader>
|
||||
<h3>One plan for most customers</h3>
|
||||
</SectionHeader>
|
||||
|
||||
<SectionColumns>
|
||||
<SectionMainCol>
|
||||
<PlansTabs />
|
||||
</SectionMainCol>
|
||||
<SectionSidebar className="justify-between">
|
||||
<div>
|
||||
<h4 className="text-lg mb-2">Plan FYIs</h4>
|
||||
<SidebarList>
|
||||
<SidebarListItem>
|
||||
Self-serve, no upsells, no need to "talk to sales"
|
||||
</SidebarListItem>
|
||||
<SidebarListItem>
|
||||
We don't do outbound sales. Everyone pays the same rates.
|
||||
</SidebarListItem>
|
||||
<SidebarListItem>
|
||||
You can set billing limits per product so you never get a surprise bill
|
||||
</SidebarListItem>
|
||||
<SidebarListItem>
|
||||
90% of our customers don't pay anything to use PostHog!
|
||||
<Tooltip
|
||||
content={() => (
|
||||
<div className="max-w-[300px]">
|
||||
<p className="mb-1">
|
||||
<strong>... and we're cool with it!</strong>
|
||||
</p>
|
||||
<p className="text-[15px] mb-0">
|
||||
Use PostHog for free within our generous free tier limits.
|
||||
Exceed the free tier limits and you'll only pay for what you
|
||||
use.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
placement="bottom"
|
||||
>
|
||||
<IconInfo className="size-4 inline-block ml-0.5 -mt-0.5" />
|
||||
</Tooltip>{' '}
|
||||
</SidebarListItem>
|
||||
</SidebarList>
|
||||
<p className="mt-4">Here's what you should know about our pricing:</p>
|
||||
<ul className="space-y-1 mb-4 [&_li]:leading-7 pl-4 md:pl-8">
|
||||
<li>
|
||||
<strong>We make a profit with every product.</strong> This means we don’t have loss-leader
|
||||
products that will go up in pricing later or get retired.
|
||||
</li>
|
||||
<li>
|
||||
<strong>We aim to be the cheapest for each product at every scale</strong> compared to every
|
||||
major competitor.{' '}
|
||||
<Link
|
||||
iconClasses="!text-dark"
|
||||
href="https://twitter.com/intent/tweet?text=@posthog%20Your%20pricing%20is..."
|
||||
external
|
||||
>
|
||||
<em>Tell us if we're not!</em>
|
||||
</Link>{' '}
|
||||
(Note: This doesn't include your buddy's two person startup.)
|
||||
</li>
|
||||
<li>
|
||||
The company in general has significant revenue, over 60,000 customers, runs{' '}
|
||||
<Link href="/newsletter/the-companies-that-shaped-posthog#our-takeaways-2">default alive</Link>,
|
||||
and aims to IPO rather than sell. This means{' '}
|
||||
<strong>we don’t rely on investors to grow, and we’re stable.</strong> Of course we aren’t
|
||||
perfect, but this goes a long way to avoiding the average dumb vc-backed company stuff in
|
||||
general - like running out of money or selling to a lame bigger company who just kills off our
|
||||
products.
|
||||
</li>
|
||||
<li>
|
||||
We have an open source product too - so if you must, you can self host. It is MIT licensed if
|
||||
you want to use it in a big organization that isn’t ready to move to PostHog Cloud yet.
|
||||
<Tooltip
|
||||
content={() => (
|
||||
<div className="max-w-sm">
|
||||
<strong className="block">A disclaimer about self-hosting</strong>
|
||||
<p className="mb-2 text-sm">
|
||||
Being upfront, self-hosting PostHog has limitations and is usually a worse
|
||||
experience (and more expensive) than PostHog Cloud.
|
||||
</p>
|
||||
<p className="mb-0 text-sm">
|
||||
Main benefits of PostHog Cloud include our large, shared infrastructure and lack
|
||||
of separate hosting costs, required maintenance, and upgrades that come with
|
||||
self-hosting.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
onClick={() => setIsPlanComparisonVisible(!isPlanComparisonVisible)}
|
||||
className="text-red dark:text-yellow font-semibold cursor-pointer"
|
||||
>
|
||||
{isPlanComparisonVisible ? 'Hide' : 'Show'} full plan comparison
|
||||
</button>
|
||||
</div>
|
||||
</SectionSidebar>
|
||||
</SectionColumns>
|
||||
</SectionLayout>
|
||||
|
||||
<section
|
||||
className={`${section} ${
|
||||
isPlanComparisonVisible
|
||||
? 'visible max-h-full opacity-1 mb-12 mt-8 md:px-4'
|
||||
: 'overflow-y-hidden invisible max-h-0 opacity-0'
|
||||
} transition duration-500 ease-in-out transform`}
|
||||
)}
|
||||
>
|
||||
<IconInfo className="size-4 inline-block relative left-0.5 -top-0.5" />
|
||||
</Tooltip>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="mb-4">If this makes you happy – like most people - just start here:</p>
|
||||
<p>
|
||||
<div className="flex flex-col md:flex-row gap-2 md:gap-4 items-center">
|
||||
<PlanCTA />
|
||||
<em className="opacity-75 text-sm">No credit card required</em>
|
||||
</div>
|
||||
</p>
|
||||
<p>
|
||||
Or if you need more info,{' '}
|
||||
<button
|
||||
className="text-red dark:text-yellow font-semibold"
|
||||
onClick={() =>
|
||||
window.scrollTo({
|
||||
top:
|
||||
document.querySelector('#faq')?.getBoundingClientRect().top +
|
||||
window.pageYOffset -
|
||||
128,
|
||||
behavior: 'smooth',
|
||||
})
|
||||
}
|
||||
>
|
||||
<div className="overflow-x-auto -mx-4 px-4 md:mx-0 md:px-0">
|
||||
<div className="grid grid-cols-16 mb-1 min-w-[1000px]">
|
||||
<div className="col-span-4 bg-accent/50 dark:bg-black/75 px-3 py-1"> </div>
|
||||
{platformAndSupportProduct?.plans
|
||||
?.filter((plan: BillingV2PlanType) => plan.name !== 'Teams') // This is a temporary addition until the teams addon is shipped and the teams plan is removed
|
||||
?.map((plan: BillingV2PlanType) => (
|
||||
<div className="col-span-4 px-3 py-1" key={plan.key}>
|
||||
<strong className="text-sm opacity-75">{plan.name}</strong>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
read our FAQ
|
||||
</button>
|
||||
, <Link href="/questions/topic/pricing">ask a question</Link>, or{' '}
|
||||
<Link href="/talk-to-a-human">talk to a human</Link>.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-16 mb-2 border-x border-b border-light dark:border-dark bg-white dark:bg-accent-dark [&>div]:border-t [&>div]:border-light dark:[&>div]:border-dark min-w-[1000px]">
|
||||
<div className="col-span-4 bg-accent/50 dark:bg-black/75 px-3 py-2 text-sm">
|
||||
<strong className="text-primary/75 dark:text-primary-dark/75">Base price</strong>
|
||||
</div>
|
||||
{platformAndSupportProduct?.plans
|
||||
?.filter((plan: BillingV2PlanType) => plan.name !== 'Teams') // This is a temporary addition until the teams addon is shipped and the teams plan is removed
|
||||
?.map((plan: BillingV2PlanType) => {
|
||||
return (
|
||||
<div
|
||||
className="col-span-4 px-3 py-2 text-sm"
|
||||
key={`${plan.key}-base-price`}
|
||||
>
|
||||
{plan.included_if === 'no_active_subscription' ? (
|
||||
<span>Free forever</span>
|
||||
) : plan.included_if === 'has_subscription' ? (
|
||||
<span>$0</span>
|
||||
) : plan.unit_amount_usd ? (
|
||||
`$${parseFloat(plan.unit_amount_usd).toFixed(0)}/mo`
|
||||
) : plan.contact_support ? (
|
||||
'Contact us'
|
||||
) : (
|
||||
'Contact us'
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{highestSupportPlan?.features
|
||||
?.filter(
|
||||
(f: BillingV2FeatureType) =>
|
||||
![
|
||||
// TODO: this shouldn't be necessary, update billing products api to include entitlement_only info
|
||||
'role_based_access',
|
||||
'project_based_permissioning',
|
||||
'ingestion_taxonomy',
|
||||
'tagging',
|
||||
].includes(f.key)
|
||||
)
|
||||
.map((feature: BillingV2FeatureType) => (
|
||||
<>
|
||||
<div className="col-span-4 bg-accent/50 dark:bg-black/75 px-3 py-2 text-sm">
|
||||
{feature.description ? (
|
||||
<Tooltip content={feature.description}>
|
||||
<strong className="border-b border-dashed border-light dark:border-dark cursor-help text-primary/75 dark:text-primary-dark/75">
|
||||
{feature.name}
|
||||
</strong>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<strong className="text-primary/75 dark:text-primary-dark/75">
|
||||
{feature.name}
|
||||
</strong>
|
||||
)}
|
||||
</div>
|
||||
{platformAndSupportProduct?.plans
|
||||
?.filter((plan: BillingV2PlanType) => plan.name !== 'Teams') // This is a temporary addition until the teams addon is shipped and the teams plan is removed
|
||||
?.map((plan: BillingV2PlanType) => {
|
||||
const planFeature = plan?.features?.find(
|
||||
(f) => f.key === feature.key
|
||||
)
|
||||
return (
|
||||
<div
|
||||
className="col-span-4 px-3 py-2 text-sm"
|
||||
key={`${plan.key}-${feature.key}`}
|
||||
>
|
||||
{planFeature ? (
|
||||
<div className="flex gap-x-2">
|
||||
{planFeature.note ?? (
|
||||
<IconCheck className="w-5 h-5 text-green" />
|
||||
)}
|
||||
{planFeature.limit && (
|
||||
<span className="opacity-75">
|
||||
<>
|
||||
{planFeature.limit} {planFeature.unit}
|
||||
</>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-16 min-w-[1000px]">
|
||||
<div className="col-span-4 px-3 py-2 text-sm"> </div>
|
||||
<div className="col-span-4 px-3 py-2">
|
||||
<PlanCTA intent="free" />
|
||||
</div>
|
||||
<div className="col-span-4 px-3 py-2">
|
||||
<PlanCTA intent="paid" />
|
||||
</div>
|
||||
<div className="col-span-4 px-3 py-2">
|
||||
<PlanCTA intent="enterprise" ctaText="Get in touch" ctaLink="/talk-to-a-human" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Link
|
||||
href="/community/profiles/27732"
|
||||
className="rounded-full overflow-hidden size-12 border border-border hover:border-bg-dark/30 dark:border-dark dark:hover:border-light/50 p-0.5 bg-light dark:bg-dark"
|
||||
>
|
||||
<StaticImage
|
||||
src="https://res.cloudinary.com/dmukukwp6/image/upload/v1683655764/james_b841adce96.png"
|
||||
quality={100}
|
||||
alt="James Hawkins, CEO, Co-founder"
|
||||
placeholder="none"
|
||||
objectFit="contain"
|
||||
className="bg-yellow rounded-full"
|
||||
/>
|
||||
</Link>
|
||||
<p className="leading-tight mb-0">
|
||||
<Link href="/community/profiles/27732" className="flex">
|
||||
<strong>James Hawkins</strong>
|
||||
</Link>
|
||||
<span className="text-sm opacity-70">Co-founder</span>
|
||||
</p>
|
||||
</div>
|
||||
<p className="pl-14 text-sm opacity-75 italic">
|
||||
When James isn't thinking about how to cut prices (again), you'll likely find him changing a diaper.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<SectionLayout id="add-ons">
|
||||
<SectionHeader>
|
||||
<h3>Add-ons</h3>
|
||||
</SectionHeader>
|
||||
<section id="faq" className={`${section} mb-20 mt-12 md:px-4`}>
|
||||
<h2 className="text-2xl m-0 mb-6 pb-6 border-b border-light dark:border-dark">Pricing FAQ</h2>
|
||||
<FAQs />
|
||||
<p className="my-6 pt-6 relative before:w-48 before:absolute before:top-0 before:left-0 before:border-t before:border-light before:dark:border-dark before:h-px">
|
||||
Have another pricing-related question?{' '}
|
||||
<Link href="/questions/topic/pricing">Ask in our community forum</Link>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<SectionColumns>
|
||||
<SectionMainCol>
|
||||
<AllAddons />
|
||||
</SectionMainCol>
|
||||
<SectionSidebar>
|
||||
<h4 className="text-lg mb-0">Why add-ons?</h4>
|
||||
<SidebarList>
|
||||
<SidebarListItem>
|
||||
We move additional functionality to add-ons to keep our base prices low. This is
|
||||
so you never pay for functionality you don't want or need.
|
||||
</SidebarListItem>
|
||||
<SidebarListItem>Subscribe to add-ons after signing up.</SidebarListItem>
|
||||
</SidebarList>
|
||||
</SectionSidebar>
|
||||
</SectionColumns>
|
||||
</SectionLayout>
|
||||
|
||||
<section className="bg-white text-dark shadow-xl rounded pt-6 pb-2 md:py-8 px-8 md:px-12 mx-6 md:mx-auto w-[calc(100%_-_3rem)] md:w-full max-w-3xl -rotate-1">
|
||||
<SectionHeader>
|
||||
<p className="opacity-60 text-[15px] mb-2">A note from our co-founder</p>
|
||||
<h3>Our pricing is designed to make you happy</h3>
|
||||
</SectionHeader>
|
||||
|
||||
<p className="mt-4">Here's what you should know about our pricing:</p>
|
||||
<ul className="space-y-1 mb-4 [&_li]:leading-7 pl-4 md:pl-8">
|
||||
<li>
|
||||
<strong>We make a profit with every product.</strong> This means we don’t have
|
||||
loss-leader products that will go up in pricing later or get retired.
|
||||
</li>
|
||||
<li>
|
||||
<strong>We aim to be the cheapest for each product at every scale</strong> compared to
|
||||
every major competitor.{' '}
|
||||
<Link
|
||||
iconClasses="!text-dark"
|
||||
href="https://twitter.com/intent/tweet?text=@posthog%20Your%20pricing%20is..."
|
||||
external
|
||||
>
|
||||
<em>Tell us if we're not!</em>
|
||||
</Link>{' '}
|
||||
(Note: This doesn't include your buddy's two person startup.)
|
||||
</li>
|
||||
<li>
|
||||
The company in general has significant revenue, over 60,000 customers, runs{' '}
|
||||
<Link href="/newsletter/the-companies-that-shaped-posthog#our-takeaways-2">
|
||||
default alive
|
||||
</Link>
|
||||
, and aims to IPO rather than sell. This means{' '}
|
||||
<strong>we don’t rely on investors to grow, and we’re stable.</strong> Of course we
|
||||
aren’t perfect, but this goes a long way to avoiding the average dumb vc-backed company
|
||||
stuff in general - like running out of money or selling to a lame bigger company who
|
||||
just kills off our products.
|
||||
</li>
|
||||
<li>
|
||||
We have an open source product too - so if you must, you can self host. It is MIT
|
||||
licensed if you want to use it in a big organization that isn’t ready to move to PostHog
|
||||
Cloud yet.
|
||||
<Tooltip
|
||||
content={() => (
|
||||
<div className="max-w-sm">
|
||||
<strong className="block">A disclaimer about self-hosting</strong>
|
||||
<p className="mb-2 text-sm">
|
||||
Being upfront, self-hosting PostHog has limitations and is usually a
|
||||
worse experience (and more expensive) than PostHog Cloud.
|
||||
</p>
|
||||
<p className="mb-0 text-sm">
|
||||
Main benefits of PostHog Cloud include our large, shared infrastructure
|
||||
and lack of separate hosting costs, required maintenance, and upgrades
|
||||
that come with self-hosting.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<IconInfo className="size-4 inline-block relative left-0.5 -top-0.5" />
|
||||
</Tooltip>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="mb-4">If this makes you happy – like most people - just start here:</p>
|
||||
<p>
|
||||
<div className="flex flex-col md:flex-row gap-2 md:gap-4 items-center">
|
||||
<PlanCTA />
|
||||
<em className="opacity-75 text-sm">No credit card required</em>
|
||||
</div>
|
||||
</p>
|
||||
<p>
|
||||
Or if you need more info,{' '}
|
||||
<button
|
||||
className="text-red dark:text-yellow font-semibold"
|
||||
onClick={() =>
|
||||
window.scrollTo({
|
||||
top:
|
||||
document.querySelector('#faq')?.getBoundingClientRect().top +
|
||||
window.pageYOffset -
|
||||
128,
|
||||
behavior: 'smooth',
|
||||
})
|
||||
}
|
||||
>
|
||||
read our FAQ
|
||||
</button>
|
||||
, <Link href="/questions/topic/pricing">ask a question</Link>, or{' '}
|
||||
<Link href="/talk-to-a-human">talk to a human</Link>.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-2 items-center">
|
||||
<Link
|
||||
href="/community/profiles/27732"
|
||||
className="rounded-full overflow-hidden size-12 border border-border hover:border-bg-dark/30 dark:border-dark dark:hover:border-light/50 p-0.5 bg-light dark:bg-dark"
|
||||
>
|
||||
<StaticImage
|
||||
src="https://res.cloudinary.com/dmukukwp6/image/upload/v1683655764/james_b841adce96.png"
|
||||
quality={100}
|
||||
alt="James Hawkins, CEO, Co-founder"
|
||||
placeholder="none"
|
||||
objectFit="contain"
|
||||
className="bg-yellow rounded-full"
|
||||
/>
|
||||
</Link>
|
||||
<p className="leading-tight mb-0">
|
||||
<Link href="/community/profiles/27732" className="flex">
|
||||
<strong>James Hawkins</strong>
|
||||
</Link>
|
||||
<span className="text-sm opacity-70">Co-founder</span>
|
||||
</p>
|
||||
</div>
|
||||
<p className="pl-14 text-sm opacity-75 italic">
|
||||
When James isn't thinking about how to cut prices (again), you'll likely find him changing a
|
||||
diaper.
|
||||
</p>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
|
||||
{currentProduct && (
|
||||
<section className={`${section} mb-12 mt-8 md:px-4 overflow-auto`}>
|
||||
<Plans showTitle groupsToShow={groupsToShow} />
|
||||
</section>
|
||||
)}
|
||||
|
||||
{!currentProduct && (
|
||||
<>
|
||||
<section id="faq" className={`${section} mb-20 mt-12 md:px-4`}>
|
||||
<h2 className="text-2xl m-0 mb-6 pb-6 border-b border-light dark:border-dark">Pricing FAQ</h2>
|
||||
<FAQs />
|
||||
<p className="my-6 pt-6 relative before:w-48 before:absolute before:top-0 before:left-0 before:border-t before:border-light before:dark:border-dark before:h-px">
|
||||
Have another pricing-related question?{' '}
|
||||
<Link href="/questions/topic/pricing">Ask in our community forum</Link>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="relative">
|
||||
<CTA />
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
<section className="relative">
|
||||
<CTA />
|
||||
</section>
|
||||
|
||||
<section className="bg-primary my-12 md:px-4">
|
||||
<Quote
|
||||
|
||||
@@ -24,9 +24,9 @@ const Addon = ({ type, name, description, plans, addons, setAddons, volume, incl
|
||||
...addon,
|
||||
totalCost: checked
|
||||
? calculatePrice(
|
||||
inclusion_only ? (percentage / 100) * volume : volume,
|
||||
plans[plans.length - 1].tiers
|
||||
).total
|
||||
inclusion_only ? (percentage / 100) * volume : volume,
|
||||
plans[plans.length - 1].tiers
|
||||
).total
|
||||
: 0,
|
||||
}
|
||||
}
|
||||
@@ -48,7 +48,7 @@ const Addon = ({ type, name, description, plans, addons, setAddons, volume, incl
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-6 gap-8 items-center">
|
||||
<div className="col-span-3 md:col-span-4 flex justify-between items-center">
|
||||
<div className="col-span-3 sm:col-span-4 flex justify-between items-center">
|
||||
<div className="flex space-x-1 items-center">
|
||||
<p className="m-0 text-sm font-bold">{name}</p>
|
||||
<Tooltip content={description} tooltipClassName="max-w-[250px]" placement="top">
|
||||
@@ -59,7 +59,7 @@ const Addon = ({ type, name, description, plans, addons, setAddons, volume, incl
|
||||
</div>
|
||||
<Toggle checked={checked} onChange={handleToggle} />
|
||||
</div>
|
||||
<div className="col-span-3 md:col-span-2 flex justify-between">
|
||||
<div className="col-span-3 sm:col-span-2 flex justify-between">
|
||||
<div>
|
||||
<p className="m-0 text-sm opacity-70">Starts at</p>
|
||||
<strong className="text-[15px] md:text-base">
|
||||
@@ -128,7 +128,7 @@ const TabContent = ({ activeProduct, addons, setVolume, setAddons, setProduct, a
|
||||
}) ||
|
||||
(activeProduct.name == 'Experiments' ? (
|
||||
<div className="bg-accent dark:bg-accent-dark border border-light dark:border-dark rounded-md px-4 py-3 mb-2 text-sm">
|
||||
Experiments are currently bundled with Feature flags and share a free tier and volume
|
||||
Experiments is currently bundled with Feature flags and share a free tier and volume
|
||||
pricing.
|
||||
</div>
|
||||
) : (
|
||||
@@ -314,8 +314,8 @@ export default function Tabbed() {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="grid md:grid-cols-12 mb-1 md:mb-0 pt-2">
|
||||
<div className="w-full flex-1 max-w-6xl">
|
||||
<div className="grid md:grid-cols-12 mb-1">
|
||||
<div className="md:col-span-4 lg:col-span-3 md:pr-6 mb-4 md:mb-0">
|
||||
<h4 className="m-0 md:pl-3 pb-1 font-normal text-sm opacity-70">Products</h4>
|
||||
<ul className="list-none m-0 p-0 pb-2 flex flex-row md:flex-col gap-px overflow-x-auto w-screen md:w-auto -mx-4 px-4">
|
||||
@@ -332,11 +332,10 @@ export default function Tabbed() {
|
||||
<li key={name} className="flex-1">
|
||||
<button
|
||||
onClick={() => setActiveTab(index)}
|
||||
className={`p-2 rounded-md font-semibold text-sm flex flex-col md:flex-row space-x-2 whitespace-nowrap items-start md:items-center justify-between w-full click ${
|
||||
active
|
||||
className={`p-2 rounded-md font-semibold text-sm flex flex-col md:flex-row space-x-2 whitespace-nowrap items-start md:items-center justify-between w-full click ${active
|
||||
? 'font-bold bg-accent dark:bg-accent-dark'
|
||||
: 'hover:bg-accent dark:hover:bg-accent/15'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span>
|
||||
@@ -385,7 +384,7 @@ export default function Tabbed() {
|
||||
const checked = platformAddon?.checked
|
||||
return (
|
||||
<div key={type} className="grid grid-cols-6 gap-8 items-center">
|
||||
<div className="col-span-3 md:col-span-4 flex items-center justify-between">
|
||||
<div className="col-span-3 sm:col-span-4 flex items-center justify-between">
|
||||
<div className="flex space-x-1 items-center">
|
||||
<p className="m-0 text-sm font-bold">{name}</p>
|
||||
<Tooltip content={description} tooltipClassName="max-w-[250px]" placement="top">
|
||||
@@ -408,7 +407,7 @@ export default function Tabbed() {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-3 md:col-span-2 flex justify-between">
|
||||
<div className="col-span-3 sm:col-span-2 flex justify-between">
|
||||
<div>
|
||||
<strong className="text-[15px] md:text-base">$450</strong>
|
||||
<span className="text-sm opacity-70">/mo</span>
|
||||
|
||||
@@ -351,12 +351,12 @@ const SliderToggle = ({
|
||||
{...activeProduct.slider}
|
||||
onChange={(value) => setAnalyticsVolume(type, value)}
|
||||
value={analyticsData[type].volume}
|
||||
className="col-span-4 lg:col-span-5 pl-8"
|
||||
className="col-span-5 pl-8"
|
||||
label={label}
|
||||
enhanced={analyticsData[type].enhanced}
|
||||
setModalOpen={setModalOpen}
|
||||
/>
|
||||
<div className="col-span-2 lg:col-span-1 text-right font-bold m-0 self-end -mb-1.5 flex justify-end">
|
||||
<div className="col-span-1 text-right font-bold m-0 self-end -mb-1.5 flex justify-end">
|
||||
<NumericFormat
|
||||
inputClassName="bg-transparent text-center focus:ring-0 focus:border-red dark:focus:border-yellow focus:bg-white dark:focus:bg-accent-dark font-code max-w-[103px] text-sm border border-light hover:border-button dark:border-dark rounded-sm py-1 px-0 min-w-[25px] px-1"
|
||||
value={analyticsData[type].volume}
|
||||
|
||||
@@ -118,7 +118,7 @@ export const PricingCalculator = () => {
|
||||
<div className="col-span-16 sm:col-span-8 border-t md:border-t-0 border-light dark:border-dark md:col-span-3 pt-4 md:pb-4 md:pr-4">
|
||||
<div className="col-span-7 @md:col-span-6 sm:pl-0 md:pl-2 mb-1 @md:mb-0">
|
||||
<Link
|
||||
to={`/pricing?product=${product.slug}`}
|
||||
to={`/${product.slug}#pricing`}
|
||||
className="inline-flex md:flex-col mdlg:flex-row gap-2 md:gap-1 mdlg:gap-2 mdlg:items-center hover:bg-accent dark:bg-accent-dark rounded p-1 text-primary hover:text-primary dark:text-primary-dark dark:hover:text-primary-dark"
|
||||
>
|
||||
{product.icon}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -59,7 +59,7 @@ const Addon = ({ name, icon_key, description, plans, unit, type, ...other }) =>
|
||||
exit={{ opacity: 0, translateY: '100%' }}
|
||||
className="absolute inset-0 bg-white dark:bg-accent-dark pt-4 rounded"
|
||||
>
|
||||
<PricingTiers plans={plans} type={type} unit={unit} />
|
||||
<PricingTiers plans={plans} type={type} unit={unit} test={true} />
|
||||
<button
|
||||
onClick={() => setShowBreakdown(false)}
|
||||
className={`text-red dark:text-yellow font-bold text-sm px-2 lg:px-4`}
|
||||
|
||||
@@ -44,7 +44,7 @@ export const PaidPricing = () => {
|
||||
<li>
|
||||
<s>Community support</s>{' '}
|
||||
<span className="bg-highlight p-0.5 font-bold text-[15px] italic text-red dark:text-yellow">
|
||||
Priority support
|
||||
Email support
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -256,11 +256,11 @@ export const PlanColumns = ({ billingProducts, highlight = 'paid' }) => {
|
||||
availability?
|
||||
</strong>{' '}
|
||||
Visit the product comparison pages:{' '}
|
||||
<Link to="/pricing?product=product-analytics">Product analytics</Link> |{' '}
|
||||
<Link to="/pricing?product=session-replay">Session replay</Link> |{' '}
|
||||
<Link to="/pricing?product=feature-flags">Feature flags</Link> |{' '}
|
||||
<Link to="/pricing?product=experiments">Experiments</Link> |{' '}
|
||||
<Link to="/pricing?product=surveys">Surveys</Link>
|
||||
<Link to="/product-analytics#pricing">Product analytics</Link> |{' '}
|
||||
<Link to="/session-replay#pricing">Session replay</Link> |{' '}
|
||||
<Link to="/feature-flags#pricing">Feature flags</Link> |{' '}
|
||||
<Link to="/experiments#pricing">Experiments</Link> |{' '}
|
||||
<Link to="/surveys#pricing">Surveys</Link>
|
||||
</p>
|
||||
</div>
|
||||
<div className="overflow-x-auto -mx-4 px-4 md:mx-0 md:px-0">
|
||||
|
||||
@@ -83,11 +83,11 @@ export const PaidPlanContent = ({ onFreeTierClick }) => {
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<IconCheck className="text-green inline-block size-5" />
|
||||
Unlimited team members
|
||||
<IconCheck className="text-green inline-block size-5" />6 projects, 7-year data retention
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<IconCheck className="text-green inline-block size-5" />6 projects, 7-year data retention
|
||||
<IconCheck className="text-green inline-block size-5" />
|
||||
Unlimited team members
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -100,6 +100,7 @@ const AccordionItem = ({ isOpen, onClick, onAnimationComplete, Icon, name, color
|
||||
) : (
|
||||
startsAt && (
|
||||
<span>
|
||||
<span className="opacity-60 text-[13px]">From</span>{' '}
|
||||
<strong className="text-sm">
|
||||
${startsAt.length <= 3 ? Number(startsAt).toFixed(2) : startsAt}
|
||||
</strong>
|
||||
|
||||
@@ -5,32 +5,37 @@ import useProducts from '../Products'
|
||||
import { IconCheck, IconX } from '@posthog/icons'
|
||||
import Logo from 'components/Logo'
|
||||
import { StaticImage } from 'gatsby-plugin-image'
|
||||
import { CTA } from '../Plans'
|
||||
|
||||
const comparison = [
|
||||
{
|
||||
name: 'Amplitude',
|
||||
logo: <StaticImage src={`./images/icon-amp.png`} className="" placeholder="blurred" alt="Amplitude" />,
|
||||
logo: (
|
||||
<StaticImage src={`./images/icon-amp.png`} className="" height={32} placeholder="blurred" alt="Amplitude" />
|
||||
),
|
||||
products: {
|
||||
ProductAnalytics: true,
|
||||
WebAnalytics: false,
|
||||
SessionReplay: true,
|
||||
FeatureFlags: false,
|
||||
AbTesting: true,
|
||||
'Product analytics': true,
|
||||
'Web analytics': false,
|
||||
'Session replay': true,
|
||||
'Feature flags': false,
|
||||
Experiments: true,
|
||||
Surveys: false,
|
||||
DataWarehouse: false,
|
||||
'Data warehouse': false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Mixpanel',
|
||||
logo: <StaticImage src={`./images/icon-mp.png`} className="" placeholder="blurred" alt="Mixpanel" />,
|
||||
logo: (
|
||||
<StaticImage src={`./images/icon-mp.png`} className="" height={32} placeholder="blurred" alt="Mixpanel" />
|
||||
),
|
||||
products: {
|
||||
ProductAnalytics: true,
|
||||
WebAnalytics: false,
|
||||
SessionReplay: false,
|
||||
FeatureFlags: false,
|
||||
AbTesting: false,
|
||||
'Product analytics': true,
|
||||
'Web analytics': false,
|
||||
'Session replay': false,
|
||||
'Feature flags': false,
|
||||
Experiments: false,
|
||||
Surveys: false,
|
||||
DataWarehouse: false,
|
||||
'Data warehouse': false,
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -38,33 +43,35 @@ const comparison = [
|
||||
logo: (
|
||||
<StaticImage
|
||||
src={`./images/icon-heep.png`}
|
||||
className="h-full"
|
||||
height={32}
|
||||
className="h-full rotate-3"
|
||||
height={40}
|
||||
placeholder="blurred"
|
||||
alt="Mixpanel"
|
||||
/>
|
||||
),
|
||||
products: {
|
||||
ProductAnalytics: true,
|
||||
WebAnalytics: false,
|
||||
SessionReplay: true,
|
||||
FeatureFlags: false,
|
||||
AbTesting: false,
|
||||
'Product analytics': true,
|
||||
'Web analytics': false,
|
||||
'Session replay': true,
|
||||
'Feature flags': false,
|
||||
Experiments: false,
|
||||
Surveys: false,
|
||||
DataWarehouse: false,
|
||||
'Data warehouse': false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Pendo',
|
||||
logo: <StaticImage src={`./images/icon-pnd0.png`} className="" placeholder="blurred" alt="Mixpanel" />,
|
||||
logo: (
|
||||
<StaticImage src={`./images/icon-pnd0.png`} className="" height={32} placeholder="blurred" alt="Mixpanel" />
|
||||
),
|
||||
products: {
|
||||
ProductAnalytics: true,
|
||||
WebAnalytics: false,
|
||||
SessionReplay: true,
|
||||
FeatureFlags: false,
|
||||
AbTesting: false,
|
||||
'Product analytics': true,
|
||||
'Web analytics': false,
|
||||
'Session replay': true,
|
||||
'Feature flags': false,
|
||||
Experiments: false,
|
||||
Surveys: false,
|
||||
DataWarehouse: false,
|
||||
'Data warehouse': false,
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -73,171 +80,82 @@ const comparison = [
|
||||
<StaticImage src={`./images/icon-fs.png`} className="" height={32} placeholder="blurred" alt="Mixpanel" />
|
||||
),
|
||||
products: {
|
||||
ProductAnalytics: true,
|
||||
WebAnalytics: false,
|
||||
SessionReplay: true,
|
||||
FeatureFlags: false,
|
||||
AbTesting: false,
|
||||
'Product analytics': true,
|
||||
'Web analytics': false,
|
||||
'Session replay': true,
|
||||
'Feature flags': false,
|
||||
Experiments: false,
|
||||
Surveys: false,
|
||||
DataWarehouse: false,
|
||||
'Data warehouse': false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'PostHog',
|
||||
logo: (
|
||||
<div className="-ml-6">
|
||||
<Logo className="h-5" />
|
||||
<div className="">
|
||||
<Logo noText className="h-6 mx-auto" />
|
||||
</div>
|
||||
),
|
||||
products: {
|
||||
ProductAnalytics: true,
|
||||
WebAnalytics: true,
|
||||
SessionReplay: true,
|
||||
FeatureFlags: true,
|
||||
AbTesting: true,
|
||||
'Product analytics': true,
|
||||
'Web analytics': true,
|
||||
'Session replay': true,
|
||||
'Feature flags': true,
|
||||
Experiments: true,
|
||||
Surveys: true,
|
||||
DataWarehouse: true,
|
||||
'Data warehouse': true,
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
export const SimilarProducts = () => {
|
||||
return (
|
||||
<section className={`${section} mb-12 mt-8 md:px-4`}>
|
||||
<section className={`${section} my-8 md:px-4`}>
|
||||
<SectionHeader>
|
||||
<h3 className="mb-2">Compare to similar products</h3>
|
||||
</SectionHeader>
|
||||
<div className="mt-4 -mx-4 px-4 overflow-x-auto">
|
||||
<div className="grid grid-cols-8 min-w-[1200px]">
|
||||
<div className="grid grid-cols-7 min-w-[1000px]">
|
||||
<div className="col-span-1 pr-4"></div>
|
||||
<strong className="text-center py-2 px-4 whitespace-nowrap">Product analytics</strong>
|
||||
<strong className="text-center py-2 px-4 whitespace-nowrap">Web analytics</strong>
|
||||
<strong className="text-center py-2 px-4 whitespace-nowrap">Session replay</strong>
|
||||
<strong className="text-center py-2 px-4 whitespace-nowrap">Feature flags</strong>
|
||||
<strong className="text-center py-2 px-4 whitespace-nowrap">Experiments</strong>
|
||||
<strong className="text-center py-2 px-4 whitespace-nowrap">Surveys</strong>
|
||||
<strong className="text-center py-2 px-4 whitespace-nowrap">Data warehouse</strong>
|
||||
{comparison.map((company) => (
|
||||
<div
|
||||
key={company.name}
|
||||
className={`text-center py-2 px-4 whitespace-nowrap flex flex-col justify-end ${company.name === 'PostHog'
|
||||
? 'bg-white dark:bg-green/15 border-x-2 border-t-green border-x-green rounded-t-sm border-t-2'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<div className="max-h-9 text-center mb-2">{company.logo}</div>
|
||||
<strong>{company.name}</strong>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-8 min-w-[1200px]">
|
||||
{comparison.map((company, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div
|
||||
className={`col-span-1 flex items-center gap-2 py-2 pl-2 pr-4 border-x-2 ${
|
||||
company.name === 'PostHog'
|
||||
? 'border-y-2 border-l-2 border-green bg-white dark:bg-green/15 border-r-transparent'
|
||||
: company.name === 'Amplitude'
|
||||
? '!border-transparent'
|
||||
: 'border-x-transparent border-t first:border-t-0 border-y-light dark:border-y-dark'
|
||||
}`}
|
||||
>
|
||||
<div className="flex-[0_0_32px] max-h-9 text-center">{company.logo}</div>
|
||||
{company.name !== 'PostHog' && <strong>{company.name}</strong>}
|
||||
</div>
|
||||
<div
|
||||
className={`py-2 px-4 text-center ${
|
||||
company.name === 'PostHog'
|
||||
? 'border-y-2 border-green bg-white dark:bg-green/15'
|
||||
: company.name === 'Amplitude'
|
||||
? 'border-t-0'
|
||||
: 'border-x-transparent border-t first:border-t-0 border-light dark:border-dark'
|
||||
}`}
|
||||
>
|
||||
{company.products.ProductAnalytics ? (
|
||||
<IconCheck className="size-6 inline-block text-green" />
|
||||
) : (
|
||||
<IconX className="size-6 inline-block text-red" />
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`py-2 px-4 text-center ${
|
||||
company.name === 'PostHog'
|
||||
? 'border-y-2 border-green bg-white dark:bg-green/15'
|
||||
: company.name === 'Amplitude'
|
||||
? 'border-t-0'
|
||||
: 'border-x-transparent border-t first:border-t-0 border-light dark:border-dark'
|
||||
}`}
|
||||
>
|
||||
{company.products.WebAnalytics ? (
|
||||
<IconCheck className="size-6 inline-block text-green" />
|
||||
) : (
|
||||
<IconX className="size-6 inline-block text-red" />
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`py-2 px-4 text-center ${
|
||||
company.name === 'PostHog'
|
||||
? 'border-y-2 border-green bg-white dark:bg-green/15'
|
||||
: company.name === 'Amplitude'
|
||||
? 'border-t-0'
|
||||
: 'border-x-transparent border-t first:border-t-0 border-light dark:border-dark'
|
||||
}`}
|
||||
>
|
||||
{company.products.SessionReplay ? (
|
||||
<IconCheck className="size-6 inline-block text-green" />
|
||||
) : (
|
||||
<IconX className="size-6 inline-block text-red" />
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`py-2 px-4 text-center ${
|
||||
company.name === 'PostHog'
|
||||
? 'border-y-2 border-green bg-white dark:bg-green/15'
|
||||
: company.name === 'Amplitude'
|
||||
? 'border-t-0'
|
||||
: 'border-x-transparent border-t first:border-t-0 border-light dark:border-dark'
|
||||
}`}
|
||||
>
|
||||
{company.products.FeatureFlags ? (
|
||||
<IconCheck className="size-6 inline-block text-green" />
|
||||
) : (
|
||||
<IconX className="size-6 inline-block text-red" />
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`py-2 px-4 text-center ${
|
||||
company.name === 'PostHog'
|
||||
? 'border-y-2 border-green bg-white dark:bg-green/15'
|
||||
: company.name === 'Amplitude'
|
||||
? 'border-t-0'
|
||||
: 'border-x-transparent border-t first:border-t-0 border-light dark:border-dark'
|
||||
}`}
|
||||
>
|
||||
{company.products.AbTesting ? (
|
||||
<IconCheck className="size-6 inline-block text-green" />
|
||||
) : (
|
||||
<IconX className="size-6 inline-block text-red" />
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`py-2 px-4 text-center ${
|
||||
company.name === 'PostHog'
|
||||
? 'border-y-2 border-green bg-white dark:bg-green/15'
|
||||
: company.name === 'Amplitude'
|
||||
? 'border-t-0'
|
||||
: 'border-x-transparent border-t first:border-t-0 border-light dark:border-dark'
|
||||
}`}
|
||||
>
|
||||
{company.products.Surveys ? (
|
||||
<IconCheck className="size-6 inline-block text-green" />
|
||||
) : (
|
||||
<IconX className="size-6 inline-block text-red" />
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`py-2 px-4 text-center ${
|
||||
company.name === 'PostHog'
|
||||
? 'border-y-2 border-green bg-white dark:bg-green/15 border-r-2'
|
||||
: company.name === 'Amplitude'
|
||||
? 'border-t-0'
|
||||
: 'border-x-transparent border-t first:border-t-0 border-light dark:border-dark'
|
||||
}`}
|
||||
>
|
||||
{company.products.DataWarehouse ? (
|
||||
<IconCheck className="size-6 inline-block text-green" />
|
||||
) : (
|
||||
<IconX className="size-6 inline-block text-red" />
|
||||
)}
|
||||
<div className="grid grid-cols-7 min-w-[1000px] divide-y divide-light dark:divide-dark">
|
||||
{Object.keys(comparison[0].products).map((product) => (
|
||||
<React.Fragment key={product}>
|
||||
<div className="col-span-1 flex items-start gap-2 py-2 pl-2 pr-4 first:border-t border-light dark:border-dark">
|
||||
<strong className="whitespace-nowrap">{product}</strong>
|
||||
</div>
|
||||
{comparison.map((company) => (
|
||||
<div
|
||||
key={`${company.name}-${product}`}
|
||||
className={`py-2 px-4 text-center ${company.name === 'PostHog'
|
||||
? 'bg-white border-x-2 !border-x-green dark:bg-green/15 last:!border-b-2 last:!border-b-green last:rounded-b-sm last:pb-4 last:px-2'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
{company.products[product] ? (
|
||||
<IconCheck className="size-6 inline-block text-green" />
|
||||
) : (
|
||||
<IconX className="size-6 inline-block text-red" />
|
||||
)}
|
||||
{product === 'Data warehouse' && company.name === 'PostHog' && (
|
||||
<div className="pt-2">
|
||||
<CTA size="sm" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -2995,49 +2995,31 @@ export const docsMenu = {
|
||||
export const pricingMenu = {
|
||||
name: 'Pricing',
|
||||
url: '/pricing',
|
||||
icon: 'IconReceipt',
|
||||
icon: 'IconCdCase',
|
||||
children: [
|
||||
{
|
||||
name: 'All products',
|
||||
icon: 'IconReceipt',
|
||||
color: 'red',
|
||||
name: 'PostHog Cloud',
|
||||
icon: 'IconCloud',
|
||||
color: 'blue',
|
||||
url: '/pricing',
|
||||
},
|
||||
// {
|
||||
// name: 'Event types',
|
||||
// icon: 'IconCursorClick',
|
||||
// color: 'purple',
|
||||
// url: '/events',
|
||||
// },
|
||||
// {
|
||||
// name: 'Add-ons',
|
||||
// icon: 'IconPuzzle',
|
||||
// color: 'seagreen',
|
||||
// url: '/addons',
|
||||
// },
|
||||
{
|
||||
name: 'Product analytics',
|
||||
icon: 'IconGraph',
|
||||
color: 'blue',
|
||||
url: '/pricing?product=product-analytics',
|
||||
},
|
||||
{
|
||||
name: 'Session replay',
|
||||
url: '/pricing?product=session-replay',
|
||||
name: 'Pricing philosophy',
|
||||
icon: 'IconLightBulb',
|
||||
color: 'yellow',
|
||||
icon: 'IconRewindPlay',
|
||||
},
|
||||
{
|
||||
name: 'Feature flags',
|
||||
icon: 'IconToggle',
|
||||
color: 'seagreen',
|
||||
url: '/pricing?product=feature-flags',
|
||||
},
|
||||
{
|
||||
name: 'Experiments',
|
||||
icon: 'IconFlask',
|
||||
color: 'purple',
|
||||
url: '/pricing?product=experiments',
|
||||
},
|
||||
{
|
||||
name: 'Surveys',
|
||||
icon: 'IconMessage',
|
||||
color: 'red',
|
||||
url: '/pricing?product=surveys',
|
||||
},
|
||||
{
|
||||
name: 'Data warehouse',
|
||||
icon: 'IconDatabase',
|
||||
color: 'lilac',
|
||||
url: '/pricing?product=data-warehouse',
|
||||
url: '/pricing/philosophy',
|
||||
},
|
||||
{
|
||||
name: 'How we do "sales"',
|
||||
|
||||
15
src/pages/addons.tsx
Normal file
15
src/pages/addons.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { pricingMenu } from '../navs'
|
||||
import Layout from 'components/Layout'
|
||||
import { SectionHeader } from 'components/Pricing/Test/Sections'
|
||||
import Link from 'components/Link'
|
||||
import Tooltip from 'components/Tooltip'
|
||||
import { IconInfo } from '@posthog/icons'
|
||||
import { CTA as PlanCTA } from 'components/Pricing/Plans'
|
||||
import { StaticImage } from 'gatsby-plugin-image'
|
||||
|
||||
const Addons = (): JSX.Element => {
|
||||
return <Layout parent={pricingMenu}>Addons</Layout>
|
||||
}
|
||||
|
||||
export default Addons
|
||||
165
src/pages/events.tsx
Normal file
165
src/pages/events.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { pricingMenu } from '../navs'
|
||||
import Layout from 'components/Layout'
|
||||
import { SectionHeader } from 'components/Pricing/Test/Sections'
|
||||
import Link from 'components/Link'
|
||||
import Tooltip from 'components/Tooltip'
|
||||
import { CTA as PlanCTA } from 'components/Pricing/Plans'
|
||||
import { StaticImage } from 'gatsby-plugin-image'
|
||||
import { IconCheck } from '@posthog/icons'
|
||||
|
||||
const Events = (): JSX.Element => {
|
||||
return (
|
||||
<Layout parent={pricingMenu}>
|
||||
<p className="mb-8 text-[15px]">
|
||||
Events are billed at different rates based on volume and if you choose to send custom user properties
|
||||
with the event.
|
||||
</p>
|
||||
|
||||
<section className="grid md:grid-cols-5 gap-6 md:gap-12 pb-12">
|
||||
<div className="col-span-1 md:col-span-2 md:flex justify-center">
|
||||
<h3 className="mb-4 md:hidden">Anonymous events</h3>
|
||||
<div className="max-w-md">
|
||||
<StaticImage
|
||||
src="./event-anonymous.png"
|
||||
alt="Anonymous event example"
|
||||
className=""
|
||||
placeholder="blurred"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-1 md:col-span-3 max-w-xl">
|
||||
<h3 className="hidden md:block mb-1">Anonymous events</h3>
|
||||
<p className="opacity-70 mb-3">
|
||||
No individually-identifiable info, analyzed in aggregate, don't use person profiles
|
||||
</p>
|
||||
<p className="mb-2">
|
||||
By default, events are anonymous, meaning they don't have any personally-identifiable
|
||||
information attached to them.
|
||||
</p>
|
||||
<p className="mb-2">
|
||||
They come with info about the browser and device, visitor's location, and any UTM parameters.
|
||||
</p>
|
||||
|
||||
<h4 className="text-base">With anonymous events, you can:</h4>
|
||||
<ul className="list-none pl-0 mb-6 space-y-1">
|
||||
<li className="relative pl-8">
|
||||
<IconCheck className="size-5 inline-block text-green absolute top-1 left-1" />
|
||||
See a Google Analytics-style dashboard
|
||||
</li>
|
||||
<li className="relative pl-8">
|
||||
<IconCheck className="size-5 inline-block text-green absolute top-1 left-1" />
|
||||
Access properties like UTMs, location, referrer, page views
|
||||
</li>
|
||||
<li className="relative pl-8">
|
||||
<IconCheck className="size-5 inline-block text-green absolute top-1 left-1" />
|
||||
<p className="mb-0">
|
||||
Create{' '}
|
||||
<strong>
|
||||
<em>aggregate</em>
|
||||
</strong>{' '}
|
||||
insights in <strong>Product analytics</strong>
|
||||
</p>
|
||||
<ul className="[&_li]:text-sm opacity-70 pl-4 pt-1">
|
||||
<li>How many times users click an element on a page</li>
|
||||
<li>Group visitors by device type or location</li>
|
||||
<li>Filter to interactions on a specific page</li>
|
||||
<li>Track anonymous users across sessions</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p className="m-0 text-sm opacity-70">Pricing starts at </p>
|
||||
<p className="m-0">
|
||||
<strong>$0.00005</strong>
|
||||
<span className="opacity-70 text-sm">/event</span>
|
||||
</p>
|
||||
<p className="text-green m-0 text-sm font-semibold">First 1 million events/mo free</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="grid md:grid-cols-5 gap-6 md:gap-12 pb-4">
|
||||
<div className="col-span-1 md:col-span-2 md:flex justify-center">
|
||||
<h3 className="mb-4 md:hidden">Identified events</h3>
|
||||
<div className="max-w-md">
|
||||
<StaticImage
|
||||
src="./event-identified.png"
|
||||
alt="Identified event example"
|
||||
placeholder="blurred"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-1 md:col-span-3 max-w-xl">
|
||||
<h3 className="hidden md:block mb-1">Identified events</h3>
|
||||
<p className="opacity-70 mb-3">
|
||||
Track usage of specific, logged in users by using{' '}
|
||||
<Link to="/docs/data/persons" external>
|
||||
person profiles
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
<p className="mb-2">
|
||||
Identify users by their email address or other unique identifier, and attach custom properties
|
||||
to their person profiles.
|
||||
</p>
|
||||
|
||||
<h4 className="text-base">In addition to anonymous event capabilities, you can:</h4>
|
||||
<ul className="list-none pl-0 mb-6 space-y-1">
|
||||
<li className="relative pl-8">
|
||||
<IconCheck className="size-5 inline-block text-green absolute top-1 left-1" />
|
||||
<p className="mb-0">Merge anonymous users with their eventual identified user</p>
|
||||
<ul className="[&_li]:text-sm opacity-70 pl-2 pt-1 list-none">
|
||||
<li>
|
||||
Like when they sign up for your product or use different devices - enables analyzing
|
||||
the user's path
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="relative pl-8">
|
||||
<IconCheck className="size-5 inline-block text-green absolute top-1 left-1" />
|
||||
<p className="mb-0">Store custom properties on users</p>
|
||||
<ul className="[&_li]:text-sm opacity-70 pl-2 pt-1 list-none">
|
||||
<li>Use these properties in cohorts, session replay, experiments, and feature flags</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li className="relative pl-8">
|
||||
<IconCheck className="size-5 inline-block text-green absolute top-1 left-1" />
|
||||
<p className="mb-0">
|
||||
Create{' '}
|
||||
<strong>
|
||||
<em>user-specific</em>
|
||||
</strong>{' '}
|
||||
insights in <strong>Product analytics</strong>
|
||||
</p>
|
||||
<ul className="[&_li]:text-sm opacity-70 pl-4 pt-1">
|
||||
<li>
|
||||
How many times <em>specific users</em> click an element on a page
|
||||
</li>
|
||||
<li>
|
||||
Group <em>cohorts of users</em> by device type, location, or property
|
||||
</li>
|
||||
<li>
|
||||
Filter to interactions on a specific page <em>by specific users</em>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="flex gap-8">
|
||||
<div className="flex-1">
|
||||
<p className="m-0 text-sm opacity-70">Pricing starts at</p>
|
||||
<p className="m-0">
|
||||
<strong>$0.000248</strong>
|
||||
<span className="opacity-70 text-sm">/event</span>
|
||||
</p>
|
||||
<p className="text-green m-0 text-sm font-semibold">First 1 million events/mo free</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
export default Events
|
||||
@@ -5,76 +5,13 @@ import { pricingMenu } from '../../navs'
|
||||
import Layout from 'components/Layout'
|
||||
import PricingExperiment from 'components/Pricing/PricingExperiment'
|
||||
|
||||
const internalProductNames: {
|
||||
[key: string]: string
|
||||
} = {
|
||||
'product-analytics': 'product_analytics',
|
||||
'session-replay': 'session_replay',
|
||||
'feature-flags': 'feature_flags',
|
||||
experiments: 'experiments',
|
||||
surveys: 'surveys',
|
||||
'data-warehouse': 'data_warehouse',
|
||||
}
|
||||
|
||||
const pricingGroupsToShowOverride: {
|
||||
[key: keyof typeof internalProductNames]: string[]
|
||||
} = {
|
||||
experiments: ['feature_flags'],
|
||||
}
|
||||
|
||||
const Skeleton = () => {
|
||||
return (
|
||||
<div className="my-8 max-w-7xl mx-auto px-4">
|
||||
<div className=" grid md:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<div className="max-w-[300px] w-full h-[50px] animate-pulse bg-accent dark:bg-accent-dark rounded-md" />
|
||||
<div className="max-w-[500px] w-full h-[25px] animate-pulse bg-accent dark:bg-accent-dark rounded-md mt-6" />
|
||||
<div className="max-w-[290px] w-full h-[25px] animate-pulse bg-accent dark:bg-accent-dark rounded-md mt-2" />
|
||||
<div className="max-w-[150px] w-full h-[35px] animate-pulse bg-accent dark:bg-accent-dark rounded-md mt-6" />
|
||||
</div>
|
||||
<div className="w-full h-[300px] animate-pulse bg-accent dark:bg-accent-dark rounded-md" />
|
||||
</div>
|
||||
<div className="max-w-[180px] w-full h-[30px] animate-pulse bg-accent dark:bg-accent-dark rounded-md mt-8" />
|
||||
<div className="w-full h-[1px] animate-pulse bg-accent dark:bg-accent-dark rounded-md mt-3" />
|
||||
<div className="max-w-[320px] w-full h-[25px] animate-pulse bg-accent dark:bg-accent-dark rounded-md my-6" />
|
||||
<div className="grid sm:grid-cols-2 md:grid-cols-4 h-[800px] md:h-[400px] gap-4">
|
||||
<div className="w-full h-full animate-pulse bg-accent dark:bg-accent-dark rounded-md" />
|
||||
<div className="w-full h-full animate-pulse bg-accent dark:bg-accent-dark rounded-md" />
|
||||
<div className="w-full h-full animate-pulse bg-accent dark:bg-accent-dark rounded-md" />
|
||||
<div className="w-full h-full animate-pulse bg-accent dark:bg-accent-dark rounded-md" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const PricingPage = (): JSX.Element => {
|
||||
const posthog = usePostHog()
|
||||
const { search } = useLocation()
|
||||
const [groupsToShow, setGroupsToShow] = useState<undefined | string[]>()
|
||||
const [currentProduct, setCurrentProduct] = useState<string | null>()
|
||||
|
||||
const getGroupsToShow = (): string[] | undefined => {
|
||||
const product = new URLSearchParams(search).get('product')
|
||||
setCurrentProduct(product ? internalProductNames[product] : null)
|
||||
const defaultGroupsToShow = product ? [internalProductNames[product]] : undefined
|
||||
const groupsToShowOverride = product ? pricingGroupsToShowOverride[product] : undefined
|
||||
return groupsToShowOverride || defaultGroupsToShow
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setGroupsToShow(getGroupsToShow())
|
||||
}, [search])
|
||||
|
||||
return (
|
||||
<Layout
|
||||
parent={pricingMenu}
|
||||
activeInternalMenu={
|
||||
pricingMenu.children[
|
||||
Object.values(internalProductNames).findIndex((name) => name === currentProduct) + 1
|
||||
]
|
||||
}
|
||||
>
|
||||
<PricingExperiment currentProduct={currentProduct} groupsToShow={groupsToShow} />
|
||||
<Layout parent={pricingMenu}>
|
||||
<PricingExperiment />
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
112
src/pages/pricing/philosophy/index.tsx
Normal file
112
src/pages/pricing/philosophy/index.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { pricingMenu } from '../../../navs'
|
||||
import Layout from 'components/Layout'
|
||||
import { SectionHeader } from 'components/Pricing/Test/Sections'
|
||||
import Link from 'components/Link'
|
||||
import Tooltip from 'components/Tooltip'
|
||||
import { IconInfo } from '@posthog/icons'
|
||||
import { CTA as PlanCTA } from 'components/Pricing/Plans'
|
||||
import { StaticImage } from 'gatsby-plugin-image'
|
||||
|
||||
const PricingPhilosophy = (): JSX.Element => {
|
||||
return (
|
||||
<Layout parent={pricingMenu}>
|
||||
<section className="bg-white dark:bg-accent-dark text-primary dark:text-primary-dark shadow-xl rounded pt-6 pb-2 md:py-8 px-8 md:px-12 mx-6 md:mx-auto my-12 w-[calc(100%_-_3rem)] md:w-full max-w-3xl border border-transparent dark:border-dark">
|
||||
<SectionHeader>
|
||||
<p className="opacity-60 text-[15px] mb-2">A note from our co-founder</p>
|
||||
<h3>Our pricing is designed to make you happy</h3>
|
||||
</SectionHeader>
|
||||
|
||||
<p className="mt-4">Here's what you should know about our pricing:</p>
|
||||
<ul className="space-y-1 mb-4 [&_li]:leading-7 pl-4 md:pl-8">
|
||||
<li>
|
||||
<strong>We make a profit with every product.</strong> This means we don’t have loss-leader
|
||||
products that will go up in pricing later or get retired.
|
||||
</li>
|
||||
<li>
|
||||
<strong>We aim to be the cheapest for each product at every scale</strong> compared to every
|
||||
major competitor.{' '}
|
||||
<Link
|
||||
iconClasses="!text-dark dark:!text-light"
|
||||
href="https://twitter.com/intent/tweet?text=@posthog%20Your%20pricing%20is..."
|
||||
external
|
||||
>
|
||||
<em>Tell us if we're not!</em>
|
||||
</Link>{' '}
|
||||
(Note: This doesn't include your buddy's two-person startup.)
|
||||
</li>
|
||||
<li>
|
||||
The company in general has significant revenue, over 60,000 customers, runs{' '}
|
||||
<Link href="/newsletter/the-companies-that-shaped-posthog#our-takeaways-2">default alive</Link>,
|
||||
and aims to IPO rather than sell. This means{' '}
|
||||
<strong>we don’t rely on investors to grow, and we’re stable.</strong> Of course we aren’t
|
||||
perfect, but this goes a long way to avoiding the average dumb vc-backed company stuff in
|
||||
general - like running out of money or selling to a lame bigger company who just kills off our
|
||||
products.
|
||||
</li>
|
||||
<li>
|
||||
We have an open source product too - so if you must, you can self host. It is MIT licensed if
|
||||
you want to use it in a big organization that isn’t ready to move to PostHog Cloud yet.
|
||||
<Tooltip
|
||||
content={() => (
|
||||
<div className="max-w-sm">
|
||||
<strong className="block">A disclaimer about self-hosting</strong>
|
||||
<p className="mb-2 text-sm">
|
||||
Being upfront, self-hosting PostHog has limitations and is usually a worse
|
||||
experience (and more expensive) than PostHog Cloud.
|
||||
</p>
|
||||
<p className="mb-0 text-sm">
|
||||
Main benefits of PostHog Cloud include our large, shared infrastructure and lack
|
||||
of separate hosting costs, required maintenance, and upgrades that come with
|
||||
self-hosting.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<IconInfo className="size-4 inline-block relative left-0.5 -top-0.5" />
|
||||
</Tooltip>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="mb-4">If this makes you happy – like most people - just start here:</p>
|
||||
<p>
|
||||
<div className="flex flex-col md:flex-row gap-2 md:gap-4 items-center">
|
||||
<PlanCTA />
|
||||
<em className="opacity-75 text-sm">No credit card required</em>
|
||||
</div>
|
||||
</p>
|
||||
<p>
|
||||
Or if you need more info, <Link href="/pricing#faq">read our FAQ</Link>,{' '}
|
||||
<Link href="/questions/topic/pricing">ask a question</Link>, or{' '}
|
||||
<Link href="/talk-to-a-human">talk to a human</Link>.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-2 items-center">
|
||||
<Link
|
||||
href="/community/profiles/27732"
|
||||
className="rounded-full overflow-hidden size-12 border border-border hover:border-bg-dark/30 dark:border-dark dark:hover:border-light/50 p-0.5 bg-light dark:bg-dark"
|
||||
>
|
||||
<StaticImage
|
||||
src="https://res.cloudinary.com/dmukukwp6/image/upload/v1683655764/james_b841adce96.png"
|
||||
quality={100}
|
||||
alt="James Hawkins, CEO, Co-founder"
|
||||
placeholder="none"
|
||||
objectFit="contain"
|
||||
className="bg-yellow rounded-full"
|
||||
/>
|
||||
</Link>
|
||||
<p className="leading-tight mb-0">
|
||||
<Link href="/community/profiles/27732" className="flex">
|
||||
<strong>James Hawkins</strong>
|
||||
</Link>
|
||||
<span className="text-sm opacity-70">Co-founder</span>
|
||||
</p>
|
||||
</div>
|
||||
<p className="pl-14 text-sm opacity-75 italic">
|
||||
When James isn't thinking about how to cut prices (again), you'll likely find him changing a diaper.
|
||||
</p>
|
||||
</section>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
export default PricingPhilosophy
|
||||
50
vercel.json
50
vercel.json
@@ -292,7 +292,7 @@
|
||||
{ "source": "/product/collaboration", "destination": "/product-analytics" },
|
||||
{ "source": "/product/session-recording", "destination": "/session-replay" },
|
||||
{ "source": "/product/feature-flags", "destination": "/feature-flags" },
|
||||
{ "source": "/product/experimentation-suite", "destination": "/ab-testing" },
|
||||
{ "source": "/product/experimentation-suite", "destination": "/experiments" },
|
||||
{ "source": "/ab-testing", "destination": "/experiments" },
|
||||
{ "source": "/product/heatmaps", "destination": "/tutorials/toolbar", "statusCode": 301 },
|
||||
{ "source": "/heatmaps", "destination": "/tutorials/toolbar" },
|
||||
@@ -783,7 +783,7 @@
|
||||
{ "source": "/product-analytics/features", "destination": "/product-analytics" },
|
||||
{ "source": "/session-replay/features", "destination": "/session-replay" },
|
||||
{ "source": "/feature-flags/features", "destination": "/feature-flags" },
|
||||
{ "source": "/ab-testing/features", "destination": "/ab-testing" },
|
||||
{ "source": "/ab-testing/features", "destination": "/experiments" },
|
||||
{ "source": "/product-os/features", "destination": "/product-os" },
|
||||
{ "source": "/docs/integrate/webhooks", "destination": "/docs/webhooks" },
|
||||
{ "source": "/roadmap/changelog", "destination": "/changelog/2024" },
|
||||
@@ -946,11 +946,6 @@
|
||||
"source": "/handbook/growth/marketing/customer-personas",
|
||||
"destination": "/handbook/strategy/ideal-customer-persona"
|
||||
},
|
||||
{
|
||||
"source": "/pricing",
|
||||
"destination": "/pricing?product=ab-testing",
|
||||
"has": [{ "type": "query", "key": "product", "value": "experiments" }]
|
||||
},
|
||||
{ "source": "/tutorials/cohorts", "destination": "/docs/data/cohorts" },
|
||||
{ "source": "/tutorials/retention", "destination": "/tutorials/feature-retention" },
|
||||
{ "source": "/tutorials/metrics-tutorial", "destination": "/blog/b2b-saas-product-metrics" },
|
||||
@@ -1173,13 +1168,13 @@
|
||||
{ "source": "/feature-flags/roadmap", "destination": "/feature-flags#roadmap" },
|
||||
{ "source": "/feature-flags/questions", "destination": "/feature-flags#questions" },
|
||||
|
||||
{ "source": "/ab-testing/pricing", "destination": "/ab-testing#pricing" },
|
||||
{ "source": "/ab-testing/customers", "destination": "/ab-testing#customers" },
|
||||
{ "source": "/ab-testing/comparisons", "destination": "/ab-testing#posthog-vs" },
|
||||
{ "source": "/ab-testing/documentation", "destination": "/ab-testing#docs" },
|
||||
{ "source": "/ab-testing/tutorials", "destination": "/ab-testing#tutorials" },
|
||||
{ "source": "/ab-testing/roadmap", "destination": "/ab-testing#roadmap" },
|
||||
{ "source": "/ab-testing/questions", "destination": "/ab-testing#questions" },
|
||||
{ "source": "/ab-testing/pricing", "destination": "/experiments#pricing" },
|
||||
{ "source": "/ab-testing/customers", "destination": "/experiments#customers" },
|
||||
{ "source": "/ab-testing/comparisons", "destination": "/experiments#posthog-vs" },
|
||||
{ "source": "/ab-testing/documentation", "destination": "/experiments#docs" },
|
||||
{ "source": "/ab-testing/tutorials", "destination": "/experiments#tutorials" },
|
||||
{ "source": "/ab-testing/roadmap", "destination": "/experiments#roadmap" },
|
||||
{ "source": "/ab-testing/questions", "destination": "/experiments#questions" },
|
||||
{ "source": "/handbook/what-is-posthog", "destination": "/handbook/why-does-posthog-exist" },
|
||||
{ "source": "/handbook/finance/fundraising", "destination": "/handbook/finance" },
|
||||
{ "source": "/blog/guardrail-metrics", "destination": "/product-engineers/guardrail-metrics" },
|
||||
@@ -1318,6 +1313,31 @@
|
||||
{ "source": "/book-a-demo", "destination": "/demo" },
|
||||
{ "source": "/contact-sales", "destination": "/talk-to-a-human" },
|
||||
{ "source": "/teams/customer-success", "destination": "/teams/sales-cs" },
|
||||
{ "source": "/blog/posthog-vs-kubit", "destination": "/blog/tags/comparisons" }
|
||||
{ "source": "/blog/posthog-vs-kubit", "destination": "/blog/tags/comparisons" },
|
||||
{
|
||||
"source": "/pricing",
|
||||
"destination": "/product-analytics#pricing",
|
||||
"has": [{ "type": "query", "key": "product", "value": "product-analytics" }]
|
||||
},
|
||||
{
|
||||
"source": "/pricing",
|
||||
"destination": "/session-replay#pricing",
|
||||
"has": [{ "type": "query", "key": "product", "value": "session-replay" }]
|
||||
},
|
||||
{
|
||||
"source": "/pricing",
|
||||
"destination": "/feature-flags#pricing",
|
||||
"has": [{ "type": "query", "key": "product", "value": "feature-flags" }]
|
||||
},
|
||||
{
|
||||
"source": "/pricing",
|
||||
"destination": "/experiments#pricing",
|
||||
"has": [{ "type": "query", "key": "product", "value": "ab-testing" }]
|
||||
},
|
||||
{
|
||||
"source": "/pricing",
|
||||
"destination": "/surveys#pricing",
|
||||
"has": [{ "type": "query", "key": "product", "value": "surveys" }]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -2766,10 +2766,10 @@
|
||||
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
|
||||
integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
|
||||
|
||||
"@posthog/icons@0.7.3":
|
||||
version "0.7.3"
|
||||
resolved "https://registry.yarnpkg.com/@posthog/icons/-/icons-0.7.3.tgz#a0664f0aaae1003c45f21baed83a7ec52f83847c"
|
||||
integrity sha512-dw8qLS6aSBGGIjo/d24/yuLOgkFAov4C7yOhomMfhce/RwS+u96XXghVolioRHppnAn48pgGnBQIXEELGVEvPA==
|
||||
"@posthog/icons@0.8.2":
|
||||
version "0.8.2"
|
||||
resolved "https://registry.yarnpkg.com/@posthog/icons/-/icons-0.8.2.tgz#807514e9b8262d4491e5c5d8d0b4bb8a389e7a70"
|
||||
integrity sha512-n7189oRVGO5zxX7FeOvYwp3sebqJ1jBgZGur0f+YHhCLUDNkJrk3BJvtxhj2iBfbYJmtAn3vxsiBkUYeexcT2g==
|
||||
|
||||
"@preact/signals-core@^1.2.3":
|
||||
version "1.5.1"
|
||||
|
||||
Reference in New Issue
Block a user