Differences
This shows you the differences between two versions of the page.
|
se:labs:06 [2022/11/17 19:33] cosmin.dumitrache [3. Fullstory] |
se:labs:06 [2024/11/21 16:07] (current) cosmin.dumitrache [Tasks] |
||
|---|---|---|---|
| Line 6: | Line 6: | ||
| 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. | 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 two excellent tools as well as a data platform to help you manage the data you send to these tools. | + | In this lab we are going to look at [[https://posthog.com/|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: |
| + | - Product analytics | ||
| + | - Web abalytics | ||
| + | - Session replay | ||
| - | First, we are going record some events using [[https://segment.com/|Segment]]. This will act as a central hub for our user event data. | + | {{:se:labs:posthog-intro.png?700|}} |
| - | Then we are going to hook up [[https://amplitude.com/|Amplitude]] for quantitative analytics and [[https://www.fullstory.com/|Fullstory]] for screen recordings. | + | 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. |
| - | {{:se:labs:segment-diagram.png?700|}} | + | {{:se:labs:posthog-integration-diagram.png?700|}} |
| - | ==== 1. Segment ==== | + | ==== Configuring PostHog ==== |
| - | Segment is a tool that collects events from your app and provides a complete data toolkit. It gives you a uniform API to send event data to all the other tools we'll be using. This way you only have to integrate the data collection once, and Segment will then forward that data to all the other analytics tools you want to use. | + | First, create a PostHog account (it's free within generous limits). Go to the [[https://posthog.com/|PostHog website here]]. |
| - | {{:se:labs:segment-dash.png?700|}} | + | {{:se:labs:posthog-signup.png?400|}} |
| - | For the purposes of this lab you will need to add a JS source to segment which will be represented by our Next.js app. The most elegant way to do this for Next.js is via the @segment/snippet npm plugin. | + | Now let's go through the setup instructions. We can start with Product analytics first. |
| - | Add the package to your project. | + | {{:se:labs:posthog-setup.png?600|}} |
| - | <code> | + | 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. |
| - | npm install --save @segment/snippet | + | |
| - | </code> | + | |
| - | Then include the script in our Next.js app by creating _document.jsx under your pages directory. | + | Check the bottom of this section for a status indicator to confirm events are being received from your app. |
| - | <code> | + | {{:se:labs:posthog-install.png?600|}} |
| - | import Document, { Html, Head, Main, NextScript } from 'next/document' | + | |
| - | // import Segment Snippet | + | Then at the **Configure** step make sure to activate all options (including session recordings). |
| - | import * as snippet from '@segment/snippet'; | + | |
| - | class MyDocument extends Document { | + | {{:se:labs:posthog-options.png?600|}} |
| - | renderSnippet() { | + | Click next to finish the onboarding. You should be all setup now. |
| - | const opts = { | + | |
| - | apiKey: 'YOUR-SEGMENT-API-KEY', | + | |
| - | page: true | + | |
| - | } | + | |
| - | return snippet.max(opts); | + | |
| - | } | + | |
| - | static async getInitialProps(ctx) { | + | ==== 1. Product analytics ==== |
| - | const initialProps = await Document.getInitialProps(ctx) | + | |
| - | return { ...initialProps } | + | |
| - | } | + | |
| - | render() { | + | 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. |
| - | return ( | + | |
| - | <Html> | + | |
| - | <Head> | + | |
| - | {/* Inject the Segment snippet into the head of the document */} | + | |
| - | <script dangerouslySetInnerHTML={{ __html: this.renderSnippet() }} /> | + | |
| - | </Head> | + | |
| - | <body> | + | |
| - | <Main /> | + | |
| - | <NextScript /> | + | |
| - | </body> | + | |
| - | </Html> | + | |
| - | ) | + | |
| - | } | + | |
| - | } | + | |
| - | export default MyDocument | + | 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: |
| - | </code> | + | - LandingPage - when a user loads the the landing page (/) |
| + | - Login - when a user clicks the **Get started for free** button and gets sent to the login screen (/login) | ||
| + | - Dashboard - when a user clicks the **Sign in** button and gets sent to the dashboard (todo list) screen (/dashboard) | ||
| + | - AddTodo - when a user clicks the **Add** button and adds a new todo item to the list | ||
| - | Use the Segment debugger to know if your app actually connects to Segment. | + | This is what our product funnels should look like at the end. It shows how many users got to each stage of the funnel. |
| - | {{:se:labs:segment-debugger.png?700|}} | + | {{:se:labs:posthog-funnel.png?700|}} |
| - | Your will now be able to call Segment functions like global.analytics.track(). Check out the [[https://segment.com/docs/connections/spec/|Segment docs for details here]]. | + | 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. |
| - | For this lab we will want to use Track to know when a user clicked on a task and Identify to associated some user details to the tracked events in order to know who did what. | + | In order to build this funnel we need to send some additional information to PostHog. |
| - | ==== 2. Amplitude ==== | + | First let's **capture** the custom events in our funnel. Check out [[https://posthog.com/docs/product-analytics/capture-events|Capturing events]] documentation. |
| - | Amplitude is a great tool for understanding user event data in a quantitative way. You can easily build many types of charts like product funnels, retention charts, or north star metrics charts. | + | Add capture events for all the steps in the funnel: LandingPage, Login, Dashboard, AddTodo. |
| - | {{:se:labs:amplitude-dash.png?700|}} | + | <code> |
| + | posthog.capture('LandingPage'); | ||
| + | </code> | ||
| - | <note important> | + | Then let's also **identify** the users making the event. Check out [[https://posthog.com/docs/product-analytics/identify|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. |
| - | When adding the Amplitude destination to Segment use Classic mode. It's easier to configure for the purposes of this lab. | + | |
| - | {{:se:labs:amplitude-hint.png?600|}} | + | Add an identify event when the user logs in. |
| - | </note> | + | |
| - | ==== 3. Fullstory ==== | + | |
| - | Fullstory is a great tool to understand your user event data in a more qualitative way via its screen recording feature. This can be used to understand exactly how users interact with your user interface every step of the way. | + | <code> |
| + | posthog.identify(name, {name: name}); // using name in palace of an actual user ID for simplicity in this lab | ||
| + | </code> | ||
| - | {{:se:labs:fullstory-dash.png?700|}} | + | 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. |
| <note important> | <note important> | ||
| - | When adding the Amplitude destination to Segment use Classic mode. It's easier to configure for the purposes of this lab. | ||
| - | {{:se:labs:fullstory-hint.png?600|}} | + | You can use the **Activity**, **People** and **Data** sections to make sure data is being received correctly. Note that there might some some small delays sometimes (minutes) between your app sending the data and it showing in PostHog. |
| + | |||
| + | {{:se:labs:posthog-activity.png?600|}} | ||
| </note> | </note> | ||
| + | |||
| + | ==== 2. Web analytics ==== | ||
| + | |||
| + | 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. | ||
| + | |||
| + | {{:se:labs:posthog-web.png?700|}} | ||
| + | |||
| + | ==== 3. Session replay ==== | ||
| + | |||
| + | 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. | ||
| + | |||
| + | {{:se:labs:posthog-session-replay.png?700|}} | ||
| + | |||
| + | 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). | ||
| + | |||
| ====== Tasks ====== | ====== Tasks ====== | ||
| - | Use the app you built in the previous lab as a starting point: {{:se:labs:se-lab5-slutions.zip|}} | + | Use this Todo List App built with Next.js as a starting point: {{:se:labs:se-analytics-lab-starter.zip|}} |
| - | 1. Configure the app so that it sends data to Segment. | + | 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. |
| - | 2. Connect Segment to Amplitude and create some charts for task click events. Then try to creare a funnel: main page > tasks page > task click. | + | 1. Configure the app so that it sends data to PostHog succesfully. |
| - | 3. Connect Segment to Fullstory and view a screen recording. | + | 2. Add **posthog.capture()** and **posthog.identify()** so that you can track our custom events: LandingPage, Login, Dashboard, AddTodo. |
| - | 4. [Bonus] Install Google Analytics without using Segment | + | 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). | ||
| + | |||
| + | <note important> | ||
| + | To avoid some common pitfalls please please consider: | ||
| + | |||
| + | 1. Run your app in incognito mode to avoid any interference from browser plugins like ad blockers that might prevent event data from being sent to PostHog. | ||
| + | |||
| + | 2. If you don't see data in PostHog immediately (when trying to build charts) please allow a few minutes for PostHog to do some post-processing. Also, the EU region seems to be faster than the US region. Consider selecting EU when you create your account. | ||
| + | |||
| + | 3. Try doing a shift+refresh to force a hard page refresh of your app. In some cases, after you make some changes, this might be needed. | ||
| + | </note> | ||
| ====== Feedback ====== | ====== Feedback ====== | ||
| - | Please take a minute to fill in the **[[https://forms.gle/NuXCJktudGzf4rLg6 | feedback form]]** for this lab. | + | Please take a minute to fill in the **[[https://forms.gle/PNZYNNZFrVChLjag8 | feedback form]]** for this lab. |
