Differences
This shows you the differences between two versions of the page.
|
se:labs:06 [2024/11/19 15:21] 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 87: | Line 87: | ||
| 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. | 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 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. | + | 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 103: | 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> | + | |
