Differences
This shows you the differences between two versions of the page.
|
se:labs:06 [2024/11/19 15:14] cosmin.dumitrache |
se:labs:06 [2024/11/21 16:07] (current) cosmin.dumitrache [Tasks] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Lab 06 - Analytics ====== | ====== Lab 06 - Analytics ====== | ||
| - | <hidden> | + | |
| ==== Introduction ==== | ==== Introduction ==== | ||
| Line 19: | Line 19: | ||
| ==== Configuring PostHog ==== | ==== Configuring PostHog ==== | ||
| - | First, create a PostHog account (it's free within generous limits) on their website. | + | First, create a PostHog account (it's free within generous limits). Go to the [[https://posthog.com/|PostHog website here]]. |
| {{:se:labs:posthog-signup.png?400|}} | {{:se:labs:posthog-signup.png?400|}} | ||
| Line 85: | Line 85: | ||
| ==== 2. Web analytics ==== | ==== 2. Web analytics ==== | ||
| - | Have a look over the **Web analytics** section. If you have have configured PostHog in the previous step you do not have to do anything else. This section will show you standard web analytics that are collected automatically. | + | 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|}} | {{:se:labs:posthog-web.png?700|}} | ||
| Line 91: | Line 93: | ||
| ==== 3. Session replay ==== | ==== 3. Session replay ==== | ||
| - | Now have a look at the **Session replay** section. 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. This section shows you screen captures of user sessions so that you can more easily figure out how users actually use your product. | + | 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|}} | {{:se:labs:posthog-session-replay.png?700|}} | ||
| Line 99: | Line 103: | ||
| ====== 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. Add Track and Identify events and make sure your see them in the Segment debugger for your source. | + | 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> | <note important> | ||
| To avoid some common pitfalls please please consider: | 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 Segment. | + | 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. Try doing a shift+refresh to force a hard page refresh of your app (no use of cached JS files). In some cases, after you make some changes to the Segment config, this might be needed. | + | 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> | </note> | ||
| ====== Feedback ====== | ====== Feedback ====== | ||
| Please take a minute to fill in the **[[https://forms.gle/PNZYNNZFrVChLjag8 | feedback form]]** for this lab. | Please take a minute to fill in the **[[https://forms.gle/PNZYNNZFrVChLjag8 | feedback form]]** for this lab. | ||
| - | </hidden> | + | |
