mirror of
https://github.com/BillyOutlast/posthog.com.git
synced 2026-02-04 03:11:21 +01:00
embedded analytics (#12519)
This commit is contained in:
Ian Vanagas
@@ -144,7 +144,7 @@ The biggest piece of BigQuery’s appeal is that it’s a general-purpose column
|
||||
|
||||
Meanwhile, ClickHouse is designed for companies that need to return aggregations ***quickly.*** For instance, ClickHouse was a fantastic fit for PostHog because we are an analytics platform – we need to return queries like “what is the median time to convert for users who saw a X feature?” in *real time* and *at the speed of click*. ClickHouse dramatically leveled-up our data warehouse from our old Postgres setup, enabling us to deliver billion-event insights efficiently.
|
||||
|
||||
Other ClickHouse users include Github, YouTube, Twitter, and Slack, with ClickHouse typically powering user-facing analytics panels in each product. To be clear, these are **ClickHouse** users, not **ClickHouse Cloud**. ClickHouse Cloud is a very early product, and it hasn’t publicized any customers just yet.
|
||||
Other ClickHouse users include Github, YouTube, Twitter, and Slack, with ClickHouse typically powering [user-facing analytics](/tutorials/embedded-analytics) panels in each product. To be clear, these are **ClickHouse** users, not **ClickHouse Cloud**. ClickHouse Cloud is a very early product, and it hasn’t publicized any customers just yet.
|
||||
|
||||
## Summary
|
||||
|
||||
|
||||
@@ -40,7 +40,7 @@ ClickHouse was engineered to number crunch big data, returning aggregates at sub
|
||||
|
||||
Like many open-source projects, ClickHouse can be optionally deployed via paid, managed solutions – including one by ClickHouse Inc. known as ClickHouse Cloud, and another Kubernetes-based solution by Altinity Inc. known as Altinity.Cloud.
|
||||
|
||||
ClickHouse has enjoyed considerable success since its founding in 2016, counting Cloudflare, Microsoft, GitLab, Clearbit, and even us at PostHog as users. Because [ClickHouse](/docs/how-posthog-works/clickhouse) is often employed to power user-facing analytics, it comes as no surprise that its users are traditional tech companies.
|
||||
ClickHouse has enjoyed considerable success since its founding in 2016, counting Cloudflare, Microsoft, GitLab, Clearbit, and even us at PostHog as users. Because [ClickHouse](/docs/how-posthog-works/clickhouse) is often employed to power [user-facing analytics](/tutorials/embedded-analytics), it comes as no surprise that its users are traditional tech companies.
|
||||
|
||||
## What is Amazon Redshift?
|
||||
|
||||
|
||||
@@ -57,8 +57,8 @@ Adding session replay increased the scope, but just three days later Mintlify ha
|
||||
|
||||
Best of all, because all data is already tracked in Mintlify’s own PostHog instance, there’s no need for setting up additional projects or reports — all user-facing data is simply segmented and pulled out of Mintlify’s existing instance.
|
||||
|
||||
Mintlify is also tracking engagement with its [user-facing analytics](/tutorials/customer-facing-analytics) in PostHog which, in turn, powers the user-facing analytics Mintlify has built. It’s a self-reinforcing product improvement loop!
|
||||
Mintlify is also tracking engagement with its [embedded analytics](/tutorials/embedded-analytics) in PostHog which, in turn, powers the user-facing analytics Mintlify has built. It’s a self-reinforcing product improvement loop!
|
||||
|
||||
“This is still only version 0.01,” says Han. “We have a lot more data points we want to add. What is the feedback ratio? Are people voting pages up or down? How many users scroll to the bottom of the page? These are all great things we’re tracking internally, we just need to build them out. But I’ve been amazed at how easy it is to build on top of PostHog in this way.”
|
||||
|
||||
> Ready to try this yourself? Follow our [tutorial about setting up user-facing analytics with PostHog, Next.js and Tremor](/tutorials/customer-facing-analytics)!
|
||||
> Ready to try this yourself? Follow our [tutorial about setting up embedded analytics with PostHog, Next.js and Recharts](/tutorials/embedded-analytics)!
|
||||
|
||||
@@ -5,7 +5,7 @@ sidebar: Docs
|
||||
showTitle: true
|
||||
---
|
||||
|
||||
PostHog has a powerful API that enables you to capture, evaluate, create, update, and delete nearly all of your information in PostHog. You can use it to [pull information into your app](/tutorials/customer-facing-analytics), update metadata programmatically, [capture events from any language that can send HTTP requests](/tutorials/api-capture-events), and more.
|
||||
PostHog has a powerful API that enables you to capture, evaluate, create, update, and delete nearly all of your information in PostHog. You can use it to [pull information into your app](/tutorials/embedded-analytics), update metadata programmatically, [capture events from any language that can send HTTP requests](/tutorials/api-capture-events), and more.
|
||||
|
||||
The API is available for all users and instances. It contains two types of endpoints:
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ import { CalloutBox } from 'components/Docs/CalloutBox'
|
||||
|
||||
API queries enable you to query your data in PostHog. This is useful for:
|
||||
|
||||
- Building user or [customer-facing analytics](/tutorials/customer-facing-analytics).
|
||||
- Building [embedded analytics](/tutorials/embedded-analytics).
|
||||
- Pulling aggregated PostHog data into your own or other apps.
|
||||
|
||||
> **When should you _not_ use API queries?**
|
||||
@@ -489,7 +489,7 @@ Some customers haven't been migrated to the above limit and are on an old limit
|
||||
|
||||
## Further reading
|
||||
|
||||
- [How to set up customer-facing analytics with PostHog, Next.js, and Tremor](/tutorials/customer-facing-analytics)
|
||||
- [How to set up embedded analytics with PostHog, Next.js, and Recharts](/tutorials/embedded-analytics)
|
||||
- [How to use Recharts to visualize analytics data (with examples)](/tutorials/recharts)
|
||||
- [How Mintlify launched user-facing analytics, powered by PostHog](/customers/mintlify)
|
||||
- [The query endpoint API reference](/docs/api/query/)
|
||||
|
||||
@@ -10,7 +10,7 @@ export const embedInsightDark = "https://res.cloudinary.com/dmukukwp6/image/uplo
|
||||
|
||||
For any dashboard or insight, you can share a public link and/or embed it using an iframe. This is useful if you want to share your data with customers or partners, but don't want to share your entire account.
|
||||
|
||||
> **Note:** When you share an insight or dashboard, anyone with the link can view it. To better control this data, consider setting up [customer-facing analytics](/tutorials/customer-facing-analytics).
|
||||
> **Note:** When you share an insight or dashboard, anyone with the link can view it. To better control this data, consider setting up [embedded analytics](/tutorials/embedded-analytics).
|
||||
|
||||
## Sharing an insight
|
||||
|
||||
|
||||
@@ -38,7 +38,7 @@ Got a question which isn't answered below? Head to [the community forum](/questi
|
||||
- [How to identify and analyze power users](/tutorials/power-users)
|
||||
- [How to use Recharts to visualize analytics data](/tutorials/recharts)
|
||||
- [How to use React Charts to visualize analytics data (with examples)](/tutorials/react-charts)
|
||||
- [How to set up customer-facing analytics](/tutorials/customer-facing-analytics)
|
||||
- [How to set up embedded analytics](/tutorials/embedded-analytics)
|
||||
|
||||
## How to use SQL
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ Product OS comprises things like:
|
||||
|
||||
- Our easy to implement [client and server SDKs](/docs/getting-started/install?tab=sdks) like `posthog-js` client library, which [autocaptures](/docs/product-analytics/autocapture) frontend events, so you don't have to waste time manually instrumenting every button and simple interaction
|
||||
|
||||
- Our [APIs](/docs/api), which enable you to capture, evaluate, create, update, and delete nearly all of your information in PostHog, and [pull information into your app](/tutorials/customer-facing-analytics)
|
||||
- Our [APIs](/docs/api), which enable you to capture, evaluate, create, update, and delete nearly all of your information in PostHog, and [pull information into your app](/tutorials/embedded-analytics)
|
||||
|
||||
- Collaboration features like [notebooks](/docs/notebooks), which enable you to analyze data from all PostHog products in a single document you can share and collaborate on with teammates
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: How to set up customer-facing analytics
|
||||
title: How to set up embedded analytics
|
||||
date: 2025-03-28
|
||||
author:
|
||||
- ian-vanagas
|
||||
@@ -9,16 +9,16 @@ tags:
|
||||
- sql
|
||||
---
|
||||
|
||||
If you're building a B2B2C product, *your users* might want analytics about *their users*. You can provide this with user- or customer-facing analytics, events you capture and then display for them.
|
||||
If you're building a B2B2C product, *your users* might want analytics about *their users*. You can provide this with embedded analytics (AKA customer-facing analytics), events you capture and then display for them.
|
||||
|
||||
This tutorial shows you how to set up customer-facing analytics by creating a basic Next.js app with PostHog, querying analytics data via PostHog’s API, and then displaying it with Recharts.
|
||||
This tutorial shows you how to set up embedded analytics by creating a basic Next.js app with PostHog, querying analytics data via PostHog’s [queries API](/docs/api/queries), and then displaying it with Recharts.
|
||||
|
||||
## Creating a Next.js app
|
||||
|
||||
First, ensure [Node.js is installed](https://nodejs.dev/en/learn/how-to-install-nodejs/) (version 18.0 or newer) then run the following to create a new Next.js app. Say **yes** to TypeScript, **yes** to Tailwind, **yes** to app router, and the defaults for all the other options.
|
||||
|
||||
```bash
|
||||
npx create-next-app@latest customer-facing-analytics
|
||||
npx create-next-app@latest embedded-analytics
|
||||
```
|
||||
|
||||
We’ll then update `page.tsx` to an input to select between two “teams” and a button. We’ll use this to capture data later.
|
||||
@@ -164,7 +164,7 @@ You can then run `npm run dev` to see the app in action. PostHog will autocaptur
|
||||
classes="rounded"
|
||||
/>
|
||||
|
||||
## Querying data from PostHog for our user-facing analytics
|
||||
## Querying data from PostHog for our embedded analytics
|
||||
|
||||
Now that we have data being captured, we can set up our queries to get this data from PostHog. We’ll create two:
|
||||
|
||||
@@ -409,7 +409,7 @@ When we run `npm run dev` again and go to `http://localhost:3000/analytics`, we
|
||||
|
||||
|
||||
|
||||
Toggling between the two team’s button clicks gives you an idea of how you can segment customer-facing analytics for multiple teams or users.
|
||||
Toggling between the two team’s button clicks gives you an idea of how you can segment embedded analytics for multiple teams or users.
|
||||
|
||||
The final problem we need to solve: making the pageview data look good. We’ll set up better visuals in the next step with Recharts.
|
||||
|
||||
@@ -449,6 +449,6 @@ This creates a stacked area chart like this:
|
||||
- [The basics of SQL for analytics](/product-engineers/sql-for-analytics)
|
||||
- [How Mintlify launched user-facing analytics, powered by PostHog](/customers/mintlify)
|
||||
- [How to use Recharts to visualize analytics data (with examples)](/tutorials/recharts)
|
||||
- [How to set up customer-facing analytics](/tutorials/customer-facing-analytics)
|
||||
- [How to set up embedded analytics](/tutorials/embedded-analytics)
|
||||
|
||||
<NewsletterForm />
|
||||
@@ -453,6 +453,6 @@ This creates a nice-looking pie chart with labels like this:
|
||||
- [The basics of SQL for analytics](/product-engineers/sql-for-analytics)
|
||||
- [How Mintlify launched user-facing analytics, powered by PostHog](/customers/mintlify)
|
||||
- [How to use React Charts to visualize analytics data (with examples)](/tutorials/react-charts)
|
||||
- [How to set up customer-facing analytics](/tutorials/customer-facing-analytics)
|
||||
- [How to set up embedded analytics](/tutorials/embedded-analytics)
|
||||
|
||||
<NewsletterForm />
|
||||
@@ -43,7 +43,7 @@ const WelderHog = () => {
|
||||
|
||||
const examples = [
|
||||
{
|
||||
title: 'User-facing analytics',
|
||||
title: 'Embedded analytics',
|
||||
endpoint: 'query',
|
||||
description:
|
||||
'Query data captured into PostHog to show analytics for your users. Create your own visualizations and let PostHog fill in the data.',
|
||||
|
||||
@@ -59,6 +59,8 @@ import {
|
||||
IconStack,
|
||||
IconQuestion,
|
||||
IconMagic,
|
||||
IconCodeInsert,
|
||||
IconBolt,
|
||||
} from '@posthog/icons'
|
||||
import CloudinaryImage from 'components/CloudinaryImage'
|
||||
import useProducts from 'hooks/useProducts'
|
||||
@@ -412,6 +414,38 @@ const products: Product[] = [
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Embedded analytics',
|
||||
color: '[#36C46F]',
|
||||
Icon: IconCodeInsert,
|
||||
description: 'Easily share a subset of data you capture with your customers so they can do analysis too.',
|
||||
types: ['Data'],
|
||||
features: [
|
||||
{ title: 'Query API', Icon: IconCode },
|
||||
{ title: 'Full SQL access', Icon: IconDatabase },
|
||||
{ title: 'Materialize views for speed', Icon: IconBolt },
|
||||
{ title: 'Visualize how you want', Icon: IconGraph },
|
||||
],
|
||||
Images: () => {
|
||||
return (
|
||||
<>
|
||||
<div className="block dark:hidden">
|
||||
<CloudinaryImage src="https://res.cloudinary.com/dmukukwp6/image/upload/Clean_Shot_2025_08_20_at_16_39_41_2x_9123ae5225.png" />
|
||||
</div>
|
||||
<div className="hidden dark:block">
|
||||
<CloudinaryImage src="https://res.cloudinary.com/dmukukwp6/image/upload/Clean_Shot_2025_08_20_at_16_40_01_2x_d24eae394d.png" />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
},
|
||||
status: 'WIP',
|
||||
pricing: {
|
||||
cta: {
|
||||
url: '/tutorials/embedded-analytics',
|
||||
text: 'Get started',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Messaging',
|
||||
color: 'blue',
|
||||
|
||||
@@ -864,6 +864,7 @@
|
||||
{ "source": "/tutorials/compare-aws-bedrock-foundational-models", "destination": "/docs/ai-engineering" },
|
||||
{ "source": "/tutorials/chatgpt-analytics", "destination": "/tutorials/openai-observability" },
|
||||
{ "source": "/tutorials/nextjs-app-directory-analytics", "destination": "/tutorials/nextjs-analytics" },
|
||||
{ "source": "/tutorials/customer-facing-analytics", "destination": "/tutorials/embedded-analytics" },
|
||||
{ "source": "/docs/cdp/shopify", "destination": "/docs/cdp" },
|
||||
{ "source": "/james", "destination": "/community/profiles/27732" },
|
||||
{ "source": "/tim", "destination": "/community/profiles/27730" },
|
||||
|
||||
Reference in New Issue
Block a user