After you manage to bring the first users to your product it becomes very important to look at how they are using it in order to gain insights about how to improve it. This is where analytics tools come in. With these modern tools you can track everything your users do in both a quantitative and a qualitative way so that you can then use this data to improve your product.

In this lab we are going to look at PostHog, which is an excellent all-in-one tool that allows you to analyze, test, observe, and deploy new features. PostHog has a full suite of tools as you can see, but in this lab we are only focusing on three of them:

1. Product analytics
2. Web abalytics
3. Session replay

You are going to take the Todo List App built with Next.js in one of the previous labs and hook it up to PostHog via the tool's Javascript SDK in order to send analytics data. You will then be able to examine this data in PostHog.

First, create a PostHog account (it's free within generous limits). Go to the PostHog website here.

Now let's go through the setup instructions. We can start with Product analytics first.

Note the installation instructions for Next.js. You will need to install the SDK, configure the key and host environment variables, and then use the posthog-js package to initialize PostHog with the app router. This allows data to flow from your app to PostHog.

Check the bottom of this section for a status indicator to confirm events are being received from your app.

Then at the Configure step make sure to activate all options (including session recordings).

Click next to finish the onboarding. You should be all setup now.

The Product analytics tool allows you to get insights into how users use your product. You can build things like: funnels, graphs & trends, user paths, retention diagrams etc.

In this lab we are going to build a conversion funnel for our Todo List App (which has been augmented for this lab to include a landing page and a login screen). The steps in funnel are as follows:

1. LandingPage - when a user loads the the landing page (/)
2. Login - when a user clicks the Get started for free button and gets sent to the login screen (/login)
3. Dashboard - when a user clicks the Sign in button and gets sent to the dashboard (todo list) screen (/dashboard)
4. AddTodo - when a user clicks the Add button and adds a new todo item to the list

This is what our product funnels should look like at the end. It shows how many users got to each stage of the funnel.

Notice that the deeper we go into the funnel, the less users we have that make it to that step. This allows us to identify bottlenecks in our product experience and then focus on the step where most users drop off.

In order to build this funnel we need to send some additional information to PostHog.

First let's capture the custom events in our funnel. Check out Capturing events documentation.

Add capture events for all the steps in the funnel: LandingPage, Login, Dashboard, AddTodo.

posthog.capture('LandingPage');

Then let's also identify the users making the event. Check out Identifying users documentation. By default PostHog will track users by browser session but we can send additional information like a user id when a user logs in to help track users across multiple browsers/devices.

Add an identify event when the user logs in.

posthog.identify(name, {name: name}); // using name in palace of an actual user ID for simplicity in this lab

You can simulate multiple users by using incognito windows and different usernames. Generate some events for each users such that some user go through the funnel deeper than others. This should produce a funnel like in the diagram above.

The Web analytics tool allows you to automatically collect standard web analytics. You can view things like: pageviews, sessions, unique visitors, top pages & payhs, device & location and channels.

If you have configured PostHog in the previous step you do not have to do anything else. Have a look around after you've generated some activity in the app.

The section Session replay tool shows you screen captures of user sessions so that you can more easily figure out how users actually use your product. You can also see things like: event timeline, console logs and network requests.

If you have have configured PostHog in the previous step (and enabled session replay at the configure step) you do not have to do anything else.

Try viewing some user sessions. Notice that the user session is labeled with the username you supplied via posthog.identify(). And also notice in the timeline bar below the session that you have indicators showing when the user triggered one of your custom events via posthog.capture() (such as the Login event in the picture above).

Use this Todo List App built with Next.js as a starting point: se-analytics-lab-starter.zip

It's essentially the same Todo List App you built in the backend lab but we've added a couple more screens: a landing page and a login page.

1. Configure the app so that it sends data to PostHog succesfully.

2. Add posthog.capture() and posthog.identify() so that you can track our custom events: LandingPage, Login, Dashboard, AddTodo.

3. Simulate some user sessions (at least 3) to get some data into PostHog. You can use incognito windows to achieve this. Make sure that data is being received in the Activity section.

4. Build a funnel with our steps (LandingPage, Login, Dashboard, AddTodo) in the Product analytics tool.

5. Have a look at Web abalytics. There should be some data in there.

6. Have a look at Session recording. You should see some recordings.

7. [Bonus] Create some other types of charts in Product analytics and/or add some more custom events on the todo list (editing item, deleting item, marking done, marking undone).

Please take a minute to fill in the feedback form for this lab.