![[The AI Show Episode 142]: ChatGPT’s New Image Generator, Studio Ghibli Craze and Backlash, Gemini 2.5, OpenAI Academy, 4o Updates, Vibe Marketing & xAI Acquires X](https://www.marketingaiinstitute.com/hubfs/ep%20142%20cover.png)
![[DEALS] The Premium Learn to Code Certification Bundle (97% off) & Other Deals Up To 98% Off – Offers End Soon!](https://www.javacodegeeks.com/wp-content/uploads/2012/12/jcg-logo.jpg){kind=logo}
![From drop-out to software architect with Jason Lengstorf [Podcast #167]](https://cdn.hashnode.com/res/hashnode/image/upload/v1743796461357/f3d19cd7-e6f5-4d7c-8bfc-eb974bc8da68.png?#)
.png?#)
_Christophe_Coat_Alamy.jpg?#)
 (1).webp?#)
![Apple Considers Delaying Smart Home Hub Until 2026 [Gurman]](https://www.iclarified.com/images/news/96946/96946/96946-640.jpg)
![iPhone 17 Pro Won't Feature Two-Toned Back [Gurman]](https://www.iclarified.com/images/news/96944/96944/96944-640.jpg)
![Tariffs Threaten Apple's $999 iPhone Price Point in the U.S. [Gurman]](https://www.iclarified.com/images/news/96943/96943/96943-640.jpg)
How to enrich PostHog events with Clerk user data
Data-driven decisions are critical for teams building SaaS products due to their ability to optimize processes, improve customer satisfaction, and drive growth. Attributing those data points to individual users can significantly enhance this process by providing more targeted insights about user groups and behaviors. In this article, you’ll learn how events gathered by PostHog can be directly associated to individual users in applications using Clerk. This is the third article in the Kozi series, which walks you through building a project/knowledge management SaaS from the ground up using Clerk, Neon, Next.js, and more. Learn more What is PostHog? PostHog is an open-source product analytics platform that allows developers to gain a deeper understanding of how their product is used with tools like event tracking, session replay, feature flags, and more. Using one of the PostHog SDKs, web applications can be configured to automatically collect data and transmit it to the platform. This data can fuel dashboards to help you make data-driven decisions on how to optimize their product. When configured properly, the event data in PostHog can be attributed directly to your users and identify which features they're utilizing. Enriching event data with user information The PostHog SDK provides the identify function as a means to attribute a session to a specific user. This function also supports including arbitrary data about the current user to further enrich the data sent back to its platform. Furthermore, PostHog will proactively enrich past events once a session has been associated with a user so that you have the most accurate view of how your product is being used. Clerk SDKs provide helper functions to easily gather information about the user currently using your product. The following snippet demonstrates how the current Clerk user data can be used with identify to enrich the event data sent to PostHog within a Next.js application: // The `useUser` hook returns information about the current user. const { user } = useUser() // That information can be used with the `posthog.identify` function to associate the data with the user. posthog.identify(userId, { email: user.primaryEmailAddress?.emailAddress, username: user.username, }) Read on to see how this code is implemented. If you want to learn more about integrating PostHog with Clerk, let us know in our feedback portal. How to configure PostHog to use Clerk user data in Next.js Let’s explore how to implement this in a real-world scenario by configuring this integration into Kozi. Kozi is an open-source project/knowledge management web application built with Next.js, Neon, and Clerk. If you want to follow along on your computer, clone the article-2ph-start branch of the Kozi repository and run the follow the instructions in the README to configure the project before proceeding. Configure the PostHogPageView.tsx component The following client-side component has two useEffects that perform the following operations: The first will use the posthog.capture function with the $pageview event passing in the current URL. The second will run the posthog.identify function if the user is not already identified, passing in information from the useAuth and useUser Clerk hooks. This function will also clear the user information from PostHog in the current session if user is no longer logged in using the isSignedIn boolean from the useAuth Clerk hook. // src/app/PostHogPageView.tsx 'use client' import { usePathname, useSearchParams } from 'next/navigation' import { useEffect } from 'react' import { usePostHog } from 'posthog-js/react' //
Data-driven decisions are critical for teams building SaaS products due to their ability to optimize processes, improve customer satisfaction, and drive growth. Attributing those data points to individual users can significantly enhance this process by providing more targeted insights about user groups and behaviors.
In this article, you’ll learn how events gathered by PostHog can be directly associated to individual users in applications using Clerk.
This is the third article in the Kozi series, which walks you through building a project/knowledge management SaaS from the ground up using Clerk, Neon, Next.js, and more.
What is PostHog?
PostHog is an open-source product analytics platform that allows developers to gain a deeper understanding of how their product is used with tools like event tracking, session replay, feature flags, and more. Using one of the PostHog SDKs, web applications can be configured to automatically collect data and transmit it to the platform. This data can fuel dashboards to help you make data-driven decisions on how to optimize their product.
When configured properly, the event data in PostHog can be attributed directly to your users and identify which features they're utilizing.
Enriching event data with user information
The PostHog SDK provides the identify function as a means to attribute a session to a specific user. This function also supports including arbitrary data about the current user to further enrich the data sent back to its platform. Furthermore, PostHog will proactively enrich past events once a session has been associated with a user so that you have the most accurate view of how your product is being used.
Clerk SDKs provide helper functions to easily gather information about the user currently using your product. The following snippet demonstrates how the current Clerk user data can be used with identify to enrich the event data sent to PostHog within a Next.js application:
// The `useUser` hook returns information about the current user.
const { user } = useUser()
// That information can be used with the `posthog.identify` function to associate the data with the user.
posthog.identify(userId, {
email: user.primaryEmailAddress?.emailAddress,
username: user.username,
})
Read on to see how this code is implemented.
If you want to learn more about integrating PostHog with Clerk, let us know in our feedback portal.
How to configure PostHog to use Clerk user data in Next.js
Let’s explore how to implement this in a real-world scenario by configuring this integration into Kozi. Kozi is an open-source project/knowledge management web application built with Next.js, Neon, and Clerk.
If you want to follow along on your computer, clone the article-2ph-start branch of the Kozi repository and run the follow the instructions in the README to configure the project before proceeding.
Configure the PostHogPageView.tsx component
The following client-side component has two useEffects that perform the following operations:
- The first will use the
posthog.capturefunction with the$pageviewevent passing in the current URL. - The second will run the
posthog.identifyfunction if the user is not already identified, passing in information from theuseAuthanduseUserClerk hooks.- This function will also clear the user information from PostHog in the current session if user is no longer logged in using the
isSignedInboolean from theuseAuthClerk hook.
- This function will also clear the user information from PostHog in the current session if user is no longer logged in using the
// src/app/PostHogPageView.tsx
'use client'
import { usePathname, useSearchParams } from 'next/navigation'
import { useEffect } from 'react'
import { usePostHog } from 'posthog-js/react'
// 
