Kom i gang med Posthog!

Ønsker du å forbedre produktet ditt ved å forstå hvordan brukerne interagerer med det? Da er PostHog verktøyet for deg! I denne artikkelen vil vi gå gjennom hvordan du kan komme i gang med PostHog, og hvordan vi kommer frem til å lagre vår første hendelse fra en brukerinteraksjon.

Hvorfor PostHog?

PostHog gir deg innsikt i brukeratferd, slik at du kan ta informerte beslutninger om produktutvikling. Enten du jobber med en nettside eller en mobilapp, kan PostHog hjelpe deg med å samle inn og analysere data.

Steg 1: Installering

Heldigvis er de ulike SDKene til Posthog svært godt dokumentert på dokumentasjonssidene deres. Vi skal ta utgangspunkt i biblioteket skrevet for React her.

Opprett en konto

Dersom du ikke installerer PostHog på egne servere, opprett en konto på posthog.com. Velg EU som tjenesteområde for å sikre at du overholder GDPR, spesielt hvis brukerne dine er innenfor EU, inkludert Norge.

Installer PostHog SDK

Legg til PostHog SDK i kildekoden din for å begynne å samle inn data. Dette er nødvendig for å koble applikasjonen din til PostHog-plattformen.

yarn add posthog-js
# or
npm install --save posthog-js

Konfigurer Posthog i kildekoden

Plasser PosthogProvider et strategisk sted i applikasjonen din. Dette kan være i komponenthierarkiet der du ønsker å måle brukeratferd, som innenfor ruter som krever autorisering. options tar mange forskjellige konfigurasjoner. Konfigurasjonen nedenfor er en forenklet utgave av den vi i teamet benytter oss av. Den er slik:

1. api_host - Tjenesteområdet er satt til EU
2. autocapture - Denne funksjonen lytter på alle brukerinteraksjoner i applikasjonen. Dette kan være nyttig, men vil lagre interaksjoner du ikke har behov for å føre analyse på. Vi har valgt å skru autocapture av, og heller sette opp interaksjonsmåling på spesielle steder.
3. session_idle_timeout_seconds - Hvis brukeren ikke gjør noe på 10min timer vi ut økten og påfølgende handliger vil i såfall bli en ny session.
4. opt_out_capturing_by_default - Vi ønsker ikke å analysere brukeren før brukeren har samtykket til dette. Dette flagget snur vi når brukeren har samtykket gjennom en cookie banner

root.render(
  <PostHogProvider
    apiKey="DIN_API_NØKKEL"
    options={{
      api_host: "https://eu.i.posthog.com",
      autocapture: false,
      capture_pageview: false,
      session_idle_timeout_seconds: 60 * 10,
      opt_out_capturing_by_default: true,
    }}
  >
      <App />
  </PostHogProvider>,
)

Steg 2: Sett opp et Posthog Dashboard

Etter at du har opprettet en konto, er det tid for å lage en organisasjon og prosjekter. Hvert team kan ha ett eller flere prosjekter, som typisk representerer en spesifikk applikasjon. Hvordan du setter opp prosjektet ditt og dashboardene dine er opp til deg, og ikke noe vi kommer til å gå noe inn på i denne artikkelen.

Gjær en vurdering rundt personvern og databehandling

GDPR fører strenge regler for hvordan du kan innsamle personopplysinger. Det følger alvorlige konsekvenser for brudd på GDPR dersom brukerne dine er EU-borgere. Dette omfatter også norske borgere gjennom EØS-avtalen. Det er med andre ord svært viktig at du har det juridiske på stell før du sender data til Posthog. Gjør deg kjent med hvordan du skal gå frem for å beskytte brukerne dines rettigheter i GDPR. Ta gjerne kontakt med en jurist dersom du har har muligheten.

Steg 4: Track ditt første event!

Events er den grunnleggende enheten for dataanalyse i PostHog. Den representerer en interaksjon en bruker har med appen eller nettstedet ditt. Alle eventer som blir sporet i Posthog ligger under Activity-fanen i prosjektet ditt på Posthog.

Dersom du ikke har autocapture på i konfigurasjonen din må du manuelt sette opp hvilke handlinger som skal måles. Dette gjøres med posthog.capture(eventName, Properties | null). Med eventName navngir du eventet og du kan legge ved et objekt med relevant metadata som kan være aktuelt for handlingen.

import { usePostHog } from "posthog-js/react"

const posthog = usePosthog()
...

<AccordionButton
	textAlign="left"
	pl="0"
	onClick={() => posthog.capture("Accordion åpnet")}
>
	Trykk på meg for å åpne accordion		
</AccordionButton>

Når brukeren trykker på accordionen vil eventet dukke opp i Posthog:

Nå er du klar til å bruke PostHog for å forstå brukeratferd og forbedre produktet ditt! Følg med videre i denne artikkelserien - i morgen skal går vi inn på hvordan du kan lage innsikt basert på målingene dine.