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.

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:

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.

Configure user interaction event tracking

While the above component will automatically capture pageviews using a default event name, PostHog can also capture custom events associated to your users:

The CreateTaskInput.tsx is what renders the input at the bottom of a task list:

To instrument this component, you only need to add the usePostHog hook and insert a line in the function that hands the form submission:

From that point forward, any time a user creates a task, PostHog will have an event logged that can be used for product analytics:

Conclusion

Using PostHog with Clerk can unlock powerful user engagement insights that drive your product's growth. Tracking standard events like page views and custom events tailored to your application, you can identify usage trends that might otherwise go unnoticed, allowing you to confidently iterate on your product.