Rakensit SaaS MVP:n Cursor-tekoälyllä parissa tunnissa. Sovellus on livenä, ja ensimmäiset käyttäjät saapuvat sivustolle. Tässä vaiheessa useimmat kehittäjät tekevät virheen: he odottavat palautetta sähköpostitse tai chatin kautta.

Todellisuudessa käyttäjät poistuvat hiljaa, jos jokin ei toimi. Ilman kunnollista tuoteanalytiikkaa rakennat sovellustasi sokkona.

Tämä opas näyttää, miten asennat PostHog-analytiikan ja istuntotallenteet (session recording) Cursor-projektiisi. Ei turhaa teoriaa, vaan suora toimintasuunnitelma nopeaan toteutukseen.

---

Miksi PostHog ja Cursor ovat täydellinen pari?

Vibe-koodaus (vibe-coding) perustuu nopeuteen ja tekoälyn ohjaamiseen. Cursor hoitaa koodin kirjoittamisen, mutta sinun tehtäväsi on toimia arkkitehtina ja antaa oikeat ohjeet.

PostHog on modernin SaaS-rakentajan sveitsiläinen armeijaveitsi. Se yhdistää samaan pakettiin:

  • Perusanalyysin (klikkaukset, sivukatselut, suppilot).
  • Istuntotallenteet (näet videolta, missä käyttäjä turhautuu).
  • Feature flags -ominaisuudet (voit ottaa toimintoja käyttöön valikoidusti).
  • Konversio-optimoinnin työkalut (A/B-testaus).

Kun yhdistät nämä kaksi, saat jatkuvan palautekierron. Katso tallenne, tunnista ongelma, pyydä Cursoria korjaamaan se, ja julkaise päivitys.

---

Arkkitehtuurisuunnitelma: Datan kulku

Ennen kuin pyydät Cursoria kirjoittamaan riviäkään, sinun on ymmärrettävä, miten integraatio rakentuu. Tyypillisessä Next.js- tai React-pohjaisessa SaaS MVP -sovelluksessa rakenne on seuraava:

[Käyttäjän selain] 
       │
       ├── (Sivukatselut & Klikkaukset) ──> [PostHog Client SDK] ──> [PostHog Cloud]
       ├── (Istuntotallenteet / HTML DOM) ──┘
       │
[Palvelin / API] 
       │
       └── (Feature Flags & Tunnistautuminen) ──> [PostHog Server SDK]

Suosittelemme tekemään alustuksen sovelluksen juuritasolla (Client-side Provider), jotta istuntotallenteet saadaan käyntiin heti ensimmäisestä sivulatauksesta alkaen.

---

Vaihe 1: Ohjeista Cursoria (Prompt-malli)

Älä asenna kirjastoja tai luo tiedostoja käsin. Avaa Cursor Composer (Cmd+I tai Ctrl+I) ja käytä alla olevaa promptia. Se antaa tekoälylle tarkan arkkitehtuurin ja estää yleisimmät Next.js-alustuksen virheet.

Cursor-prompti asennukseen:

>

"Asenna PostHog-asiakaskirjasto (posthog-js) tähän Next.js App Router -projektiin.

>

Tee asennus seuraavien ohjeiden mukaan:
1. Luo erillinen PostHog-palveluntarjoajakomponentti (Client Component), joka alustaa PostHogin vain selaimen puolella (window-tarkistus).
2. Käytä ympäristömuuttujia NEXT_PUBLIC_POSTHOG_KEY ja NEXT_PUBLIC_POSTHOG_HOST alustuksessa.
3. Kääri sovelluksen juuren layout (app/layout.tsx) tähän palveluntarjoajaan.
4. Varmista, että istuntotallennus (session recording) on käytössä alustuksessa.
5. Luo tyhjä .env.local-malli, johon lisätään tarvittavat avaimet."

Tämä prompti pakottaa Cursorin rakentamaan integraation ilman Next.js:n palvelinpuolen renderöintiongelmia (SSR-yhteensopivuus).

---

Vaihe 2: Istuntotallenteiden hienosäätö

Kun Cursor on luonut tiedostot, sinun on määritettävä, mitä tietoja keräät. Käyttäjäseuranta on tehokasta, mutta tietosuoja on otettava huomioon heti alusta alkaen.

Määritä PostHog-alustuksen asetukset Cursorissa seuraavasti:

  • Maskaa herkkä data: Varmista, että salasanakentät, luottokorttitiedot ja henkilötiedot maskataan automaattisesti tallenteissa.
  • Rage click -seuranta: Ota käyttöön automaattinen tunnistus tilanteille, joissa käyttäjä klikkaa samaa elementtiä useasti peräkkäin turhautuneena.
  • Näytteenotto (Sampling): Jos MVP:si saa paljon liikennettä, rajoita tallennettavien istuntojen määrää (esim. 50 % istunnoista), jotta ilmainen kuukausikiintiösi ei täyty heti.

Pyydä Cursoria lisäämään nämä säännöt alustustiedostoon. Voit ohjeistaa sitä esimerkiksi näin: "Päivitä PostHog-alustus maskaamaan kaikki syötekentät (maskAllInputs: true) ja ottamaan käyttöön rage click -tunnistuksen."

---

Vaihe 3: Konversio-optimointi ja Feature Flags

Kun perusseuranta toimii, voit aloittaa konversio-optimoinnin. Haluat ehkä testata, toimiiko "Aloita ilmaiseksi" -nappi paremmin kuin "Kokeile nyt".

Feature flags (ominaisuusliput) mahdollistavat tämän ilman uutta koodin julkaisua. Voit ohjata Cursoria hyödyntämään lippuja näin:

1. Luo PostHog-hallintapaneelissa uusi Feature Flag nimellä hero-button-test.

2. Pyydä Cursoria muokkaamaan etusivun komponenttia:

  • Lue hero-button-test-lipun tila PostHogin SDK:n avulla.
  • Jos lippu on päällä (variantti A), näytä vihreä nappi tekstillä "Aloita ilmaiseksi".
  • Jos lippu on pois päältä (variantti B), näytä sininen nappi tekstillä "Kokeile nyt".

3. PostHog mittaa automaattisesti, kumpi nappi johtaa useammin rekisteröitymiseen.

Tämä tekee MVP:n kehittämisestä aidosti datalähtöistä. Sinun ei tarvitse arvailla, mikä toimii.

---

Vaihe 4: Testaus ja vianmääritys

Ennen kuin juhlit onnistunutta asennusta, varmista, että data todella liikkuu. Seuraa tätä tarkistuslistaa:

1. Tarkista selaimen konsoli: Avaa sovelluksesi paikallisesti (localhost) ja tarkista, ettei konsolissa näy PostHogiin liittyviä virheilmoituksia.

2. Network-välilehti: Avaa selaimen kehittäjätyökalut, siirry Network-välilehdelle ja tee sivustolla haku sanalla /ingest. Jos näet onnistuneita (HTTP 200) pyyntöjä PostHogin osoitteeseen, yhteys toimii.

3. PostHog Live Events: Kirjaudu PostHogiin ja avaa "Live Events" -näkymä. Klikkaile sovellustasi ja katso, ilmestyvätkö tapahtumat näytölle reaaliajassa.

---

Siirry arvailusta dataan

Vibe-koodaus tekee sovellusten rakentamisesta helpompaa kuin koskaan, mutta se myös madaltaa kynnystä rakentaa asioita, joita kukaan ei halua. PostHogin asentaminen varmistaa, että pysyt kartalla siitä, mitä sovelluksessasi todella tapahtuu.

Kun näet ensimmäisen istuntotallenteen, jossa käyttäjä pysähtyy hämmentyneenä lomakkeen kohdalle, tiedät tarkalleen, mitä sinun pitää korjata seuraavaksi. Avaa Cursor, anna sille tallenteesta tekemäsi havainnot ja anna tekoälyn hoitaa korjaus.

Oletko jo kokeillut istuntotallenteiden käyttöä kehityksen tukena? Mikä on ollut suurin yllätys, jonka olet oppinut käyttäjiesi käyttäytymisestä?