Files
posthog.com/contents/example-components.mdx
2025-11-04 10:27:24 +00:00

111 lines
4.5 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Example Components
showTitle: false
showSidebar: true
width: lg
noindex: true
---
import Table from './_includes/example-table.mdx'
import { ComparisonTable } from 'components/ComparisonTable'
import { ComparisonRow } from 'components/ComparisonTable/row'
import { ComparisonHeader } from 'components/ComparisonTable/header'
<Hero
title="Self-hosted alternative to Google Analytics"
subtitle="PostHogs self-hosted developer platform equips engineers with the dev tools they need to build successful products. Unlike Google Analytics, PostHog is open-source and can be deployed on your existing infrastructure."
ctas={[
<CallToAction href="https://app.posthog.com/signup">Get started - free</CallToAction>,
<CallToAction href="/demo" type="outline">
Schedule a demo
</CallToAction>,
]}
/>
<Section title="Why is it important to self-host your analytics?" titleSize="sm" cols={3}>
<div>
<h4>Privacy</h4>
<p>
Keeping data on your existing infrastructure means you never have to send user data to third parties,
minimising the risk of breaches.
</p>
</div>
<div>
<h4>Control</h4>
<p>
Self-hosting means you control everything, from when to deploy updates to where the servers are physically
located.
</p>
</div>
<div>
<h4>Security</h4>
<p>
With self-hosting theres no need for lengthy compliance or security audits. Just use your existing
infrastructure instead.
</p>
</div>
</Section>
<Section>
<h4>Comparison tables, from imported components</h4>
<ComparisonTable column1="Pendo" column2="PostHog">
<ComparisonRow column1={true} column2={true} feature="Product analytics" description="Track events and conversion; analyze user behavior" />
<ComparisonRow column1={false} column2={true} feature="Session replays" description="Watch real users use your product; diagnose bugs" />
<ComparisonRow column1={true} column2={true} feature="User surveys" description="Ask users for qualitative feedback and gather responses" />
<ComparisonRow column1={false} column2={true} feature="Feature flags" description="Roll out features safely; toggle features for cohorts or individuals" />
<ComparisonRow column1={false} column2={true} feature="A/B testing" description="Test changes and analyze impact" />
<ComparisonRow column1={true} column2={true} feature="In-app prompts and messages" description="Send messages to users in your app" />
<ComparisonRow column1={true} column2={true} feature="Apps/integrations" description="Push and pull data to other destinations" />
<ComparisonRow column1={false} column2={true} feature="Open source" description="Build your own apps and contribute code" />
</ComparisonTable>
</Section>
<Section title="Everything product-led teams need in one place" titleSize="sm" size="md">
<Table />
</Section>
<Section title="Built for product-led teams" titleSize="md" cols={3}>
<p>
<strong>Track events easily and retroactively,</strong> right back to the moment PostHog was deployed.
</p>
<p>
Monitor any product metric and <strong>group users into cohorts</strong> based on any variable.
</p>
<p>
<strong>Annotate data and mark new releases,</strong> so you can understand product impact later.
</p>
</Section>
<Section title="Test updates safely with feature flags" titleSize="md">
<FeatureSnapshot
features={[
<>
<strong>Roll-out new updates in stages,</strong> so you can effortlessly roll-back if an issue arises.
</>,
<>
<strong>Toggle features for specific cohorts</strong> or beta-testing groups before a full release.
</>,
<>
<strong>Run multivariate A/B tests</strong> to gather insights and launch new features successfully.
</>,
]}
/>
</Section>
<Section title="Session recording included as standard" titleSize="md">
<FeatureSnapshot
reverse
features={[
<>
<strong>Replay sessions</strong> to see every users actions without infringing on their privacy.
</>,
<>
<strong>Diagnose bugs, rage-clicks and more</strong> by seeing exactly how products are used.
</>,
<>
Use heatmaps to trace every click and <strong>visualize where users get lost.</strong>
</>,
]}
/>
</Section>