Seurantakoodi on pieni asynkroninen skripti — muutaman kilotavun kokoinen ja jaeltu reunavälimuistillisesta polusta — joka tunnistaa jokaisen istunnon taustalla olevan organisaation. Oikein asennettuna et edes huomaa sitä. Väärin asennettuna vietät viikon debuggaamalla, miksi tunnistetut yritykset puuttuvat, ennen kuin huomaat latauskoodin olleen laiskan ladatun (lazy-loaded) osion sisällä. Tämä opas auttaa välttämään tuon viikon.
Kolme periaatetta ennen kuin liität mitään
- Latauskoodi kuuluu sivuston laajuiseen HTML head -osioon. Ei footeriin, ei tiettyyn sivupohjaan, eikä komponenttiin, joka näkyy vain markkinointisivuilla. Head-osioon, jokaiselle sivulle.
- Latauskoodi on oletusarvoisesti async. Älä lisää defer/async-ohituksia, jotka muuttavat sen suoritusaikaa; toimitetut attribuutit ovat ne, jotka olemme testanneet.
- Asenna kerran, täsmällisesti. Kaksi kopiota koodista samalla sivulla ei tuplaa dataasi — ne tuplaavat pyynnöt ja sekoittavat debuggauksen.
WordPress
Siistein asennus WordPressissä välttää teeman muokkaamista. Käytä header-scripts-lisäosaa (mikä tahansa tunnettu käy), liitä latauskoodi "scripts in head" -kenttään, tallenna ja tyhjennä sivuston välimuisti. Jos et halua lisäosaa, lisää pieni mu-plugin-tiedosto, joka kytkeytyy wp_head-funktioon prioriteetilla 5, jotta latauskoodi päätyy ennen analytiikkatageja. Älä liitä sitä sivun tai postauksen tekstikenttään — WordPress siivoaa skriptitagit pois.
Yksi WordPress-kohtainen tarkistus: jos käytät koko sivun välimuistia (LiteSpeed, WP Rocket, W3 Total Cache), tyhjennä välimuisti asennuksen jälkeen. Välimuistissa oleva HTML, joka on luotu ennen asennusta, ei sisällä latauskoodia.
Shopify
Shopify sijoittaa teeman HTML-koodin tiedostoon theme.liquid. Avaa Shopifyn hallinnassa Online Store → Themes → Actions → Edit code → theme.liquid ja liitä latauskoodi välittömästi ennen sulkevaa </head>-tagia. Tallenna. Siinä kaikki — sovellusta ei tarvita, eikä koodia tarvitse lisätä kassasivulle (checkout on muutenkin yritystason tunnistuksen ulkopuolella).
Monista teema ensin
Ennen kuin muokkaat theme.liquid-tiedostoa, käytä Actions → Duplicate. Jos jokin menee vikaan, voit palauttaa tilanteen yhdellä klikkauksella. Tämä on viiden sekunnin rutiini, joka on pelastanut jokaisen Shopify-tiimin, jolle sitä on ehdotettu.
Webflow
Webflow → Site Settings → Custom Code → Head Code. Liitä latauskoodi. Tallenna. Julkaise sivusto. Head-koodi pätee globaalisti kaikille sivuille, mikä on juuri se mitä haluamme. Älä liitä koodia sivukohtaiseen upotukseen (embed) — silloin seuraat vain kyseistä yhtä sivua.
Google Tag Manager
GTM toimii, mutta siinä on kaksi huomioitavaa asiaa. Käytä ensinnäkin Custom HTML -tagia, jonka triggerinä on "All Pages", jotta latauskoodi suoritetaan jokaisella sivulatauksella. Toiseksi, aseta tagin prioriteetti riittävän korkeaksi, jotta se laukeaa ennen muita analytiikkatageja, jotka saattavat hidastaa alkuperäistä latausta. GTM-käyttäjillä on usein head-osiossa monta tagia päällekkäin; latauskoodi on pieni, mutta tagien suoritusjärjestyksellä on merkitystä, jos haluat tunnistuksen heti ensimmäisellä pyynnöllä.
Huomio evästehallinnasta (consent-mode): jos käytät GTM-hallintaa evästebannerin kautta, joka sallii analytiikan vasta hyväksynnän jälkeen, älä aseta yritystason tunnistusta saman rajoituksen taakse. Se ei käytä evästeitä tai tallenna tietoja vierailijan laitteelle, joten se ei vaadi samanlaista suostumusta. Määritä tagi laukeamaan välittömästi muiden välttämättömien tagien rinnalla.
Puhdas HTML / räätälöidyt ratkaisut
Käsin tehdyillä sivuilla tai sovelluskehyksissä, joita emme maininneet, liitä latauskoodi peruspohjan <head>-elementin sisään — siis tiedostoon, joka renderöidään jokaisella sivulla. Rakenna ja julkaise uudelleen. Staattisten sivustojen generaattoreissa (SSG) latauskoodi kuuluu sivuston laajuiseen layout-tiedostoon (Next.js:ssä se on <Script> moduulissa app-level layoutissa strategy="afterInteractive"; Astrossa <BaseHead>-komponentti; 11ty:ssä peruspohjan osio). Jos lisäsit sen komponenttitason skriptinä, vain ne sivut, joissa kyseinen komponentti on, raportoivat tiedot.
Single-page applicationit (SPA) — se yksi sudenkuoppa
SPA-sovelluksissa latauskoodi tallentaa ensimmäisen sivulatauksen, kun sivu ladataan selaimessa. Tämän jälkeiset asiakaspuolen navigoinnit eivät ole selaimen näkökulmasta automaattisia sivunlatauksia. Meidän latauskoodimme kuuntelee History API:a oletuksena, eli takaisin/eteenpäin-navigointi ja pushState-pohjainen siirtyminen rekisteröidään uusina sivulatauksina ilman lisäkoodia. Jos SPA-sovelluksesi käyttää epätavallista reititintä, joka ohittaa History API:n, kutsu pientä dokumentoitua pageview-funktiota reitityksen muuttuessa — kyseessä on kolme riviä koodia ohjeidemme mukaisesti.
Varmista asennus kahdessa minuutissa
Todentaminen ei ole vapaaehtoista. Tee se ennen kuin suljet välilehden, jossa asensit koodin; rikkinäisen asennuksen korjaaminen viisi minuuttia asennuksen jälkeen on helppoa, viisi päivää myöhemmin ei.
- Avaa sivustosi yksityisessä (incognito) ikkunassa (jotta välimuisti ei sekota tuloksia).
- Avaa DevTools → Network-välilehti, suodata hakusanalla "l5e" tai latauskoodin polulla.
- Päivitä sivu. Sinun pitäisi nähdä yksi pyyntö latauskoodille ja sen jälkeen yksi pieni identify-majakka (beacon). Molempien tilakoodin (status) tulee olla 200. Latauskoodin vastauksen otsikoissa (headers) tulisi näkyä cache-control, jossa on s-maxage ja stale-while-revalidate.
- Siirry toiselle sivulle. Sinun pitäisi nähdä toinen identify-majakka, mutta ei latauskoodin uudelleenlatausta (sen pitäisi palauttaa 304).
- Palaa lead.box-hallintapaneeliin, avaa live-vierailijasyöte ja vahvista, että testivierailusi näkyy. Jos näkyy, asennus on valmis.
Yleisimmät virheet — tarkista tämä taulukko ensin
| Oire | Todennäköinen syy | Korjaus |
|---|---|---|
| Ei live-vierailuja lainkaan | Latauskoodi puuttuu head-osiosta tai on väärässä pohjassa | Siirrä koodi sivuston laajuiseen head-pohjaan |
| Live-vierailuja vain yhdestä osiosta | Latauskoodi on sivukohtaisessa upotuksessa, ei globaalisti | Siirrä globaaliin head-osioon / teeman headeriin |
| Koodi latautuu, mutta ei identify-majakkaa | Evästebanneri blokkaa kolmannen osapuolen skriptit liian aggressiivisesti | Määritä banneri sallimaan koodi välttämättömänä; koodi ei tarvitse suostumusta |
| Kaksi majakkaa per sivulataus | Latauskoodi asennettu kahdesti (teema + lisäosa/tagi) | Poista toinen |
| Sivu latautuu hitaasti asennuksen jälkeen | Latauskoodi sijoitettu ennen kriittistä CSS:ää | Varmista async-attribuutti; sijoita kriittisen CSS:n esilatauksen jälkeen |
| SPA raportoi vain ensimmäisen sivun | Räätälöity reititin ohittaa History API:n | Kutsu dokumentoitua pageview()-funktiota reitityksen muuttuessa |
| Vanha HTML-versio ilman koodia | Koko sivun välimuistia ei tyhjennetty asennuksen jälkeen | Tyhjennä välimuisti; varmista incognito-tilassa |
Suorituskykyhuomio — reunavälimuistissa oleva koodi
Latauskoodi tarjoillaan ensisijaisen osapuolen polusta, joka on välitetty reunavälimuistiimme (edge cache) arvoilla s-maxage=300 ja stale-while-revalidate. Käytännössä tämä tarkoittaa, että koodi noudetaan kerran viidessä minuutissa per edge PoP ja tarjoillaan sitten välimuistista seuraaville vierailijoille. Tavukoko ja vaikutus latausnopeuteen ovat niin pieniä, ettemme suosittele minkään ylimääräisen latauslogiikan lisäämistä sen päälle.
Milloin pyytää apua
Jos olet käynyt läpi todentamisvaiheet ja jokin ei vieläkään täsmää, kuulemme sinusta mieluummin kymmenen minuutin kuin kymmenen päivän kohdalla. Ota mukaan kolme asiaa: sivuston URL, kuvakaappaus DevTools Network-välilehdestä suodatettuna latauskoodin polulla sekä alustan nimi, jolle asensit koodin. Nämä riittävät lähes jokaisen asennusongelman ratkaisemiseen heti ensimmäisellä vastauksella.
Julkaisija
lead.box Team
Lisää artikkeleita
Näe lead.box omassa liikenteessäsi
Aloita ilmaiseksi — ei korttia, ei myyntipuhelua. Tai varaa 20 minuutin esittely, jos haluat opastetun kierroksen.