Lab 06 - Analytics

Introduction

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 Segment. This will act as a central hub for our user event data.

Then we are going to hook up Amplitude for quantitative analytics and Fullstory for screen recordings.

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 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.

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.

npm install --save @segment/snippet

Then include the script in our Next.js app by creating _document.jsx under your pages directory.

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

Use the Segment debugger to know if your app actually connects to Segment.

Your will now be able to call Segment functions like global.analytics.track(). Check out the 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

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.

When adding the Amplitude destination to Segment use Actions mode. It's easier to configure for the purposes of this lab.

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.

When adding the Amplitude destination to Segment use Classic mode. It's easier to configure for the purposes of this lab.

Tasks

Use the app you built in the previous lab as a starting point: se-lab5-slutions.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.

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.

3. Connect Segment to Fullstory and view a screen recording.

4. [Bonus] Install Google Analytics without using Segment

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.

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.

Feedback

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

Table of Contents