3. Liitä sivustosi ja lue ensimmäiset lukusi

Tässä oppaassa liität verkkosivustosi Lookuun. Sen jälkeen jokainen sivu, jonka joku avaa sivustollasi, näkyy kojelaudassasi. Lopuksi käymme läpi kojelaudan ja sen, mitä kukin osa kertoo.

Käytämme esimerkkinä Vercelissä toimivaa Next.js-sivustoa, joka on yleisin kokoonpano. Omalla palvelimella toimiva Next.js liitetään samalla tavalla; vain asetusten paikka on eri (vaihe 3). Jos sivustosi on tehty toisin (Node.js, Express tai Cloudflaren takana oleva staattinen sivusto), liittäminen on ohjeessa Node.js, Express, Cloudflare tai oma. Alla oleva kierros kojelaudassa koskee kaikkia sivustoja.

Tarvitset: asennuksen oppaasta 2. Ensimmäinen asennus kotipalvelimelle ja sen kolme asetusta, sivustosi koodin omalla tietokoneellasi ja pääsyn sivuston Vercel-projektiin. Aikaa kuluu noin 30 minuuttia.

Miten liittäminen toimii

Next.js voi ajaa pienen koodinpätkän ennen jokaista sivua. Sen nimi on proxy (Next.js 15:ssä ja vanhemmissa middleware). Lookun liitin sijoitetaan siihen. Kun kävijä avaa sivun, liitin kirjaa sivun, sen, mistä kävijä tuli, ja millaista laitetta hän käyttää, allekirjoittaa tiedot avaimellasi ja lähettää ne Lookun vastaanottimelle. Se tekee tämän vasta, kun sivu on jo lähetetty kävijälle, joten sivustosi ei hidastu. Sivuillesi ei lisätä mitään, eikä kävijän selaimeen tallenneta mitään.

Liitä

1. Kopioi liitin sivustoosi. Liitin on yksi tiedosto. Avaa packages/next/src/index.js GitHubissa ja valitse Download raw file (latauskuvake koodin yläpuolella). Tallenna se projektiisi nimellä lib/looku.js. Jos package.json-tiedoston vieressä ei ole lib-kansiota, luo se.

2. Lisää proxy-tiedosto. Tarkista Next.js-versiosi: avaa package.json ja katso numero sanan "next" jälkeen. Jos se alkaa numerolla 16 tai suuremmalla, käytä alla olevaa ensimmäistä välilehteä, muuten toista. Luo tiedosto samaan kansioon kuin package.json (jos sivusi ovat kansiossa src/app, laita tiedosto kansioon src/ ja kirjoita import-riville "../lib/looku.js").

   Next.js 16 ja uudemmat: proxy.js

   import { NextResponse } from "next/server";
   import { trackPageview } from "./lib/looku.js";
   
   export function proxy(request, event) {
     trackPageview(request, event);
     return NextResponse.next();
   }
   
   export const config = {
     matcher: [
       {
         source: "/((?!api|_next/static|_next/image|.*[.]).*)",
         missing: [
           { type: "header", key: "next-router-prefetch" },
           { type: "header", key: "purpose", value: "prefetch" },
           { type: "header", key: "sec-purpose", value: "(.*)prefetch(.*)" },
         ],
       },
     ],
   };

   Next.js 15 ja vanhemmat: middleware.js

   import { NextResponse } from "next/server";
   import { trackPageview } from "./lib/looku.js";
   
   export function middleware(request, event) {
     trackPageview(request, event);
     return NextResponse.next();
   }
   
   export const config = {
     matcher: [
       {
         source: "/((?!api|_next/static|_next/image|.*[.]).*)",
         missing: [
           { type: "header", key: "next-router-prefetch" },
           { type: "header", key: "purpose", value: "prefetch" },
           { type: "header", key: "sec-purpose", value: "(.*)prefetch(.*)" },
         ],
       },
     ],
   };

   Kopioi se täsmälleen sellaisenaan. matcher-osa varmistaa, että vain oikeat sivut lasketaan, eivät kuvat, Next.js:n omat tiedostot tai sivut, jotka selain lataa etukäteen. Jos sinulla on jo tämänniminen tiedosto, katso ohjeesta Liitä Next.js-sivusto, miten ne yhdistetään.

3. Lisää kolme asetusta Verceliin. Avaa projektisi osoitteessa vercel.com, siirry kohtaan Settings → Environment Variables ja lisää nämä kolme yksi kerrallaan omilla arvoillasi. Valitse jokaiselle ympäristöistä vain Production ja valitse Save:

   Nimi	Arvo
   LOOKU_ENDPOINT	https://looku.example.com
   LOOKU_SITE_ID	myblog
   LOOKU_SIGNING_KEY	allekirjoitusavaimesi

   Avain pysyy Vercelissä eikä koskaan päädy koodiisi.

   Etkö käytä Verceliä? Omalla palvelimella kirjoita kolme riviä package.json-tiedoston viereen tiedostoon .env.local samassa NIMI=arvo-muodossa. Muut tavat: Oma palvelin -välilehti ohjeessa Liitä Next.js-sivusto.

   Haluatko kokeilla ensin? Voit kokeilla omalla tietokoneellasi ennen julkaisua: kirjoita kolme riviä tiedostoon .env.local, aja npm run build ja sitten npm start ja avaa http://localhost:3000. Nämä ovat oikeita sivunäyttöjä omalta tietokoneeltasi; niitä on vähän, eikä niistä ole haittaa. (npm run dev ei tarkoituksella lähetä mitään. Jos portti 3000 on varattu, aja npm start -- -p 3001 ja avaa portti 3001.)

4. Julkaise. Tee commit tiedostoille lib/looku.js ja proxy-tiedosto ja pushaa ne haaraan, josta Vercel julkaisee (yleensä main), samalla tavalla kuin julkaiset muutkin muutokset. Vercel rakentaa uuden version asetusten kanssa. (Jos lisäsit asetukset vasta pushin jälkeen, avaa Deployments, valitse uusin julkaisu ja valitse Redeploy.)

5. Tarkista. Avaa julkaistu sivustosi puhelimella, napsauta paria sivua ja avaa kojelauta kotona (osoite oppaasta 2, esimerkiksi http://192.168.1.10:8788). Käyntisi näkyy siellä muutamassa sekunnissa; oletusjakso on viimeiset 24 tuntia.

Vain tuotannossa oleva sivusto lähettää sivunäyttöjä. Oma npm run dev ja Vercelin esikatseluversiot eivät lähetä mitään, joten sivustoa kehittäessäsi et näy kävijänä. Myös käynnit osoitteisiin, joita ei ole olemassa (404), lasketaan sivuiksi, joten oudot polut listassa ovat yleensä kirjoitusvirheellisiä tai vanhoja linkkejä; Sivut, joita ei ole siirtää ne omaan listaansa. Botteja ei lasketa.

Eikö mitään näy? Käy läpi Sivunäyttöjä ei näy. Se tarkistaa ketjun jokaisen lenkin.

Lue kojelautaasi

Muutaman päivän päästä sinulla on jo jotain katsottavaa. Nämä kuvat ovat pienestä verkkokaupasta, jolla on noin kolmen kuukauden tiedot.

Etusivu

Yläreunasta valitset ajanjakson: 24 h (oletus, kaavio tunneittain), 7 pv, 28 pv, 3 kk, 12 kk tai Oma eli omat päivämääräsi. Vertailu edelliseen näyttää muutoksen edelliseen samanpituiseen jaksoon verrattuna, sekä prosentteina että kaavion ohuena harmaana viivana. Pienillä luvuilla muutos näytetään kappaleina (+2) prosenttien sijaan, ja alle 5 %:n muutokset ovat harmaita, jotta hiljainen päivä ei näytä uutiselta.

Osoita kaaviota, tai napauta sitä puhelimella, niin näet kunkin tunnin tai päivän luvut. Viivan katkoviivainen pää tarkoittaa, että jakso on vielä kesken, joten matala viimeinen piste ei vielä ole pudotus. Valikon vieressä yläreunassa näkyy, milloin uusin sivunäyttö saapui. Sivusto, joka ei ole vielä lähettänyt yhtään, näyttää lukujen sijaan lyhyen tarkistuslistan.

• Sivunäytöt: kuinka monta sivua avattiin.
• Kävijät: kuinka monta eri ihmistä, sikäli kuin Looku pystyy sen päättelemään. Looku tunnistaa kävijän vain yhden päivän ajan, joten kolmena päivänä käyvä ihminen lasketaan kuukaudessa kolmesti. Tämä on hinta siitä, ettei ihmisiä tunnistavaa tietoa tallenneta. Usean päivän jaksolla kortti näyttää myös päivän keskiarvon, ja sen vieressä oleva ? selittää tämän.
• Istunnot: käynnit. Kun kävijä palaa 30 minuutin tauon jälkeen, alkaa uusi käynti.
• Sivua / istunto: kuinka monta sivua käynnillä katsotaan keskimäärin.

Napauta riviä suodattaaksesi sillä. Kun napautat sivua, koko kojelauta näyttää vain sen sivun näytöt, myös sen, mistä sen lukijat tulivat. Lähde, kampanja, laite ja maa toimivat samoin. Suodata-kohdan listoista valitset sivuryhmän, kampanjan tai laitetyypin. Voimassa olevat suodattimet näkyvät merkkeinä: × poistaa yhden, ja selaimen Takaisin-painike peruu viimeisimmän muutoksen. Osoite säilyttää ajanjakson ja suodattimet, joten näkymän voi tallentaa kirjanmerkiksi. Verkkokaupan ja sisällön kortteja ei suodateta, ja ne himmennetään suodatuksen ajaksi.

Kortin lopussa oleva Näytä kaikki avaa koko listan hakuineen ja lajitteluineen. Tunneittain näyttää kaavion tunneittain, ja Vie CSV lataa luvut taulukkolaskentaa varten. Kun käytössä on useampi moduuli, kunkin kortin oikeassa yläkulmassa oleva pieni merkintä (PERUS, VERKKOKAUPPA…) kertoo, mihin moduuliin kortti kuuluu. Kortit, joissa ei ole valitulla jaksolla mitään, luetellaan yhdellä rivillä alareunassa.

Sivut ja se, mistä kävijät tulevat

Suosituimmat sivut on lista, jota useimmat katsovat ensimmäisenä, ja prosenttiluku on muutos edelliseen jaksoon. Aloitussivut kertoo, mistä käynnit alkavat. Usein se on blogikirjoitus, jonka joku löysi hakukoneella. Poistumissivut kertoo, mihin käynnit päättyvät.

Mistä tultiin luettelee sivustot, jotka lähettivät kävijöitä: hakukoneet, sosiaalisen median ja muut sivustot, jotka linkittävät sinuun. Suora / ei tiedossa tarkoittaa, että kävijä kirjoitti osoitteesi, käytti kirjanmerkkiä tai tuli sovelluksesta, joka ei kerro, mistä kävijä tuli.

Laitteet ja maat

Kortit Laitteet, Selaimet ja järjestelmät ja Maat näyttävät, millä laitteilla, selaimilla ja mistä maista sivustollasi käydään. Jos suurin osa kävijöistäsi käyttää puhelinta, sivustosi on toimittava parhaiten juuri siinä.

Kampanjat

Kun jaat linkin uutiskirjeessä tai julkaisussa, lisää siihen kampanjatunniste, esimerkiksi:

https://example.com/products/?utm_source=newsletter&utm_campaign=autumn-sale

Kampanjoiden nimet näkyvät heti perusluvuissa, Kampanjat (UTM) -listassa. Kampanjamoduuli lisää alla olevan Kampanjat-kortin, jossa näkyvät kunkin kampanjan käynnit, se, onko kampanja uusi vai päättynyt (Muutos-sarakkeessa, joka muuten näyttää muutoksen), ja verkkokaupassa sen tilaukset. Käyttöönotto: Mitä Lookulla voi tehdä?.

Kuukausikatsaus

Kojelaudan yläreunan Kuukausikatsaus kertoo kuukauden kokonaisin lausein: kuinka monta kävijää oli ja mistä he tulivat, ja sivulla alempana, mitkä sivut nousivat. Saman katsauksen voi saada sähköpostiisi jokaisen kuukauden ensimmäisenä päivänä.

Oma näkymä

Ensimmäisellä käynnillä kojelauta tarjoaa aloitusnäkymiä: Kaikki, Yksinkertainen (sivut, lähteet ja laitteet), Blogi (sivut, lukeminen ja lähteet) ja verkkokauppamoduulin kanssa Kauppa (myynti, konversio ja ostopolku ensin). Valitse yksi tai ohita valinta valitsemalla Kaikki. Muuta ei tarvitse asettaa.

Kojelaudan Muokkaa näkymää muuttaa näkymää paikan päällä, ja näet luvut muokatessasi:

• raahaa korttia kahvasta ⠿ tai siirrä sitä nuolilla,
• piilota kortti merkillä × ja palauta se kohdasta Piilotetut,
• valitse rivien määrä, taulukko tai palkit, järjestys (näytöt, kävijät tai istunnot) ja se, onko kortti leveä,
• valitse ylärivin luvut, esimerkiksi tilaukset ja konversio kävijöiden rinnalle.

Tallenna näkymä säilyttää näkymän kaikille ja kaikilla laitteilla, ja Palauta oletukset palaa alkuun. Verkkokaupan Konversio, 7 pv liukuva -kortti näyttää jokaisena päivänä edellisten seitsemän päivän tilaukset jaettuna saman ajan istunnoilla, joten yksittäinen tilaus hiljaisena päivänä ei heilauta käyrää. Istuntojen ensimmäisinä päivinä jakso on lyhyempi: ensin yksi päivä, sitten kaksi ja niin edelleen seitsemään asti.

Asetukset

Asetuksissa kohta Tämä selain asettaa teeman ja kielen vain tälle selaimelle, ja ne vaihtuvat heti. Sivuston mukaan käyttää sivuston oletuskieltä, joka asetetaan alempana kaikille. Voit ryhmitellä sivuja, esimerkiksi kaikki /products/-sivut ryhmään “Tuotteet”, jotta näet, miten kukin sivuston osa pärjää. Verkkokaupassa asetat täällä myös ostopolun sivut ja valuutan. Kun muutat sivuston asetusta, näytön alareunaan tulee palkki, jossa on Tallenna, ja sivulta poistuminen tallentamattomin muutoksin kysyy ensin.

Mihin seuraavaksi

• Mitä Lookulla voi tehdä?: ota käyttöön kampanjat, verkkokaupan tilaukset, lukuaika tai kuukausisähköposti.
• Varmuuskopiointi ja päivitys: ota päivittäinen varmuuskopio käyttöön nyt, kun asia on vielä mielessä.
• Tietosuoja ja laki: päivitä sivustosi tietosuojaseloste. Sivulla on siihen pohja.