Jos lause 'liitä tämä koodinpätkä <head>-osioon' saa hartiasi jumiin, et ole yksin – eikä tästä tule sellaista. Seuraavaksi käymme läpi ne viisitoista minuuttia, jotka tarvitset, kielellä, joka muistuttaa enemmän isoäidin ruokareseptiä kuin koodarifoorumia.
Mitä olemme oikeastaan asentamassa
Pieni pätkä koodia – ajattele sitä pienenä tarrana – joka laitetaan verkkosivustosi jokaiselle sivulle ja jonka avulla voimme laskea, kuka siellä vierailee. Siinä kaikki. Se ei muuta sivustosi ulkonäköä, se ei hidasta sitä huomattavasti, ja jos ensi viikolla päätät, ettei se ole sinua varten, kuorit tarran pois ja kaikki on ennallaan.
Selkokielellä
’Snippet’ eli koodinpätkä on vain hieno sana pienelle palaselle koodia. Sinun ei tarvitse lukea tai ymmärtää sitä. Sinun tarvitsee vain liittää se kerran.
Yleisin no-code-reitti (toimii useimmilla sivustoilla)
- Kirjaudu sisään kotisivukoneeseesi (WordPress, Shopify, Webflow, Wix, Squarespace).
- Etsi ’asetukset’ (Settings) -valikko – yleensä hammasrataskuvake, usein alhaalla vasemmalla.
- Etsi osio nimeltä ’custom code’, ’head code’, ’tracking’ tai ’integrations’.
- Kopioi koodinpätkämme asetussivulta ja liitä se ’head’- tai ’header’-laatikkoon.
- Tallenna. Päivitä etusivusi. Olet valmis.
Jos käytät WordPressiä
Kaksi helppoa tapaa. Jos sinulla on lisäosa kuten WPCode, HeadFooterCode tai teemasi asetuksista löytyy ’header scripts’ -kenttä, liitä se sinne. Jos ei, asenna jokin näistä ilmaisista lisäosista – se vie kaksi minuuttia. Ei tiedostojen muokkausta. Ei FTP:tä. Ei paniikkia.
Jos käytät Shopifyta
Mene Online Store → Themes → Actions → Edit code. Etsi layout-kansioista ’theme.liquid’. Jossain lähellä yläreunaa on rivi, jossa lukee </head>. Liitä koodinpätkä suoraan kyseisen rivin yläpuolelle. Tallenna. Se kuulostaa pelottavammalta kuin se on – se vie 12 sekuntia ja yhden oikean hiiren napsautuksen.
Jos käytät Webflow’ta, Wixiä tai Squarespacea
Jokaisessa näistä on virallinen ’custom code’ -alue sivuston asetuksissa. Se on suunniteltu juuri tätä varten. Webflow: Project Settings → Custom Code → Head. Wix: Settings → Advanced → Custom Code. Squarespace: Settings → Advanced → Code Injection → Header.
Miten tarkistaa, että se toimii
| Vaihe | Mistä katsoa |
|---|---|
| 1. Päivitä etusivusi | Tavallisessa selainvälilehdessä |
| 2. Avaa seurannan tarkistussivu | lead.box-hallintapaneelista |
| 3. Näet vihreän ’installed’-merkin | Muutaman sekunnin kuluessa |
| 4. Jos se on punainen – tarkista vaihe 5 alta | |
| 5. Varmista, että liitit ’head’-osioon, et ’bodyyn’ tai ’footeriin’ | Samalla asetussivulla |
Kun jokin menee pieleen (yleensä ei mene)
Jos tarkistus pysyy punaisena, koodinpätkä on lähes varmasti päätynyt väärään laatikkoon tai kotisivukoneesi vaatii ’julkaise’ (publish) -painikkeen klikkaamista, jotta muutos tulee voimaan. Julkaise uudelleen. Päivitä sivu. Jos se on viiden minuutin kuluttua yhä punainen, tukemme vastaa tunnin sisällä – ei jargonia, ei loputonta tukipyyntölabyrinttia.
Rehellinen totuus ’tekniikka-ahdistuksesta’
Syy, miksi asennukset tuntuvat pelottavilta, ei ole vaikeusaste – se on kieli. ’Head’, ’snippet’, ’custom code’, ’injection’ ja ’tag manager’ ovat kaikki vain sanoja sille, että ’liitä tämä juttu tähän’. Kun olet tehnyt sen kerran, kaikki tulevat asennukset (analytiikka, chat-ikkunat, suosittelutyökalut) muuttuvat 15 minuutin hommiksi. Tulet miettimään, miksi edes odotit.
- Lue myös: [Seurantakoodin asentaminen oikealla tavalla](/blog/install-tracking-snippet-wordpress-shopify-gtm)
- Lue myös: [Server-side vs client-side -seuranta](/blog/server-side-vs-client-side-tracking-what-matters-for-b2b)
- Lue myös: [B2B-seuranta usealla verkkotunnuksella](/blog/multi-domain-b2b-tracking-workspaces-consolidated-view)
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.