Show page

Differences

This shows you the differences between two versions of the page.

--- se:labs:06 [2022/11/15 19:31]
cosmin.dumitrache
+++ se:labs:06 [2023/11/16 21:20] (current)
cosmin.dumitrache [2. Amplitude]
@@ Line 4: / Line 4: @@
 ==== Introduction ====
-After you get manage to bring the first users to your product it becomes very important to look at how they are using 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.
-First, we are going record some events using [[https://segment.com/|Segment]]. This will act as a central hub for our user data.
+First, we are going record some events using [[https://segment.com/|Segment]]. This will act as a central hub for our user event data.
 Then we are going to hook up [[https://amplitude.com/|Amplitude]] for quantitative analytics and [[https://www.fullstory.com/|Fullstory]] for screen recordings.
@@ Line 16: / Line 16: @@
 ==== 1. Segment ====
-Segment is a tool that collects events from your app and provides a complete data toolkit. It gives you a uniform API to send all user 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.
+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.
 {{:se:labs:segment-dash.png?700|}}
+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.
+Add the package to your project.
+<code>
+npm install --save @segment/snippet
+</code>
+Then include the script in our Next.js app by creating _document.jsx under your pages directory.
+<code>
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+// import Segment Snippet
+import * as snippet from '@segment/snippet';
+class MyDocument extends Document {
+  renderSnippet() {
+    const opts = {
+        apiKey: 'YOUR-SEGMENT-API-KEY',
+        page: true
+    }
+    return snippet.max(opts);
+  }
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+  render() {
+    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
+</code>
+Use the Segment debugger to know if your app actually connects to Segment.
+{{:se:labs:segment-debugger.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]].
+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.
 ==== 2. Amplitude ====
@@ Line 26: / Line 84: @@
 {{:se:labs:amplitude-dash.png?700|}}
+<note important>
+When adding the Amplitude destination to Segment use Actions mode. It's easier to configure for the purposes of this lab.
+{{:se:labs:amplitude-hint.png?600|}}
+</note>
 ==== 3. Fullstory ====
@@ Line 33: / Line 95: @@
 {{:se:labs:fullstory-dash.png?700|}}
+<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|}}
+</note>
 ====== Tasks ======
 Use the app you built in the previous lab as a starting point: {{:se:labs:se-lab5-slutions.zip|}}
-. Configure Segment
+. 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.
-. Connect Segment to Amplitude and create some charts for task click events. Then try to creare a funnle: main page > tasks page > task click.
+. Connect Segment to Amplitude and create some charts for task click events. Then try to creare a funnel: main page > tasks page > task click.
 . Connect Segment to Fullstory and view a screen recording.
@@ Line 45: / Line 112: @@
 . [Bonus] Install Google Analytics without using Segment
+<note important>
+To avoid some common pitfalls please please consider:
+. 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.
+. 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.
+</note>
 ====== 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.

General Information

Lectures

Labs

Resources

Assignment

Project

se/labs/06.1668533479.txt.gz · Last modified: 2022/11/15 19:31 by cosmin.dumitrache

Show page Old revisions

Media Manager Back to top