Sledilni izrezek je majhen asinhroni skript — nekaj kilobajtov, ki se strežejo iz robno predpomnjenega poti prve stranke — ki identificira organizacijo za vsako sejo. Pravilno nameščenega ne boste opazili. Nepravilno nameščenega boste teden dni odpravljali napake, zakaj manjkajo identificirana podjetja, preden boste ugotovili, da je bil nalagalnik v leno naloženem razdelku. Ta vodnik vam bo pomagal prihraniti ta teden.
Tri načela, preden karkoli primete
- Nalaganje sodi v glavo HTML celotnega spletnega mesta. Ne v nogo, ne v določeno predlogo strani, ne v komponento, ki se pojavlja samo na marketinških straneh. V glavo, na vsaki strani.
- Nalaganje je privzeto asinhrono. Ne dodajajte prepisa defer/async, ki spreminja čas izvajanja; priloženi atributi so atributi, ki smo jih preizkusili.
- Namestite natanko enkrat. Dve kopiji nalagalnika na isti strani ne bosta podvojili vaših podatkov — podvojili bosta zahteve in otežili odpravljanje napak.
WordPress
Najčistejša namestitev na WordPressu se izogne urejanju tem. Uporabite vtičnik za skripte v glavi (kateri koli ugleden bo zadostoval), prilepite nalagalnik v polje »skripti v glavi«, shranite in počistite morebitni predpomnilnik strani. Če ne želite vtičnika, dodajte majhno datoteko mu-plugin, ki se priklopi na wp_head s prioriteto 5, tako da nalagalnik pristane pred analitičnimi oznakami. Ne prilepite ga v telo strani ali objave — WordPress bo filtriral oznako skripta.
Ena preverba, specifična za WordPress: če uporabljate predpomnilnik celotne strani (LiteSpeed, WP Rocket, W3 Total Cache), počistite predpomnilnik po namestitvi. Predpomnjeni HTML pred namestitvijo ne bo vseboval nalagalnika.
Shopify
Shopify postavi HTML teme v theme.liquid. V skrbniškem vmesniku Shopify pojdite na Spletna trgovina → Teme → Dejanja → Uredi kodo → theme.liquid in prilepite nalagalnik neposredno pred zaključno oznako </head>. Shrani. To je vse — ni potrebna nobena aplikacija, ni skripta za blagajno (blagajna je tako ali tako zunaj področja identifikacije na ravni podjetja).
Najprej podvojite temo
Preden uredite theme.liquid, uporabite Dejanja → Podvoji. Če gre kaj narobe, se lahko z enim klikom vrnete nazaj. To je navada petih sekund, ki je rešila vsako ekipo Shopify, ki smo ji jo priporočili.
Webflow
Webflow → Nastavitve spletnega mesta → Koda po meri → Koda glave. Prilepite nalagalnik. Shrani. Objavite spletno mesto. Koda glave se uporablja globalno na vseh straneh, kar je točno to, kar želite. Ne prilepite nalagalnika v vdelavo na ravni strani — potem boste sledili samo tej eni strani.
Google Tag Manager
GTM deluje, z dvema opozoriloma. Prvič: uporabite oznako HTML po meri, kjer je sprožilec nastavljen na »Vse strani«, tako da se nalagalnik izvede ob vsakem ogledu strani. Drugič: nastavite prioriteto oznake dovolj visoko, da se izvede pred drugimi analitičnimi oznakami, ki bi lahko upočasnile začetno obremenitev. Uporabniki GTM pogosto zložijo štiri ali pet oznak v glavo; nalagalnik je majhen, vendar je vrstni red sprožitve oznak pomemben, če želite identifikacijo ob prvi zahtevi.
Bodite pozorni na način privolitve: če uporabljate GTM za pasico za privolitev, ki sproži analitične oznake šele po privolitvi, ne postavljajte identifikacije na ravni podjetja za isto oviro — ne uporablja piškotkov in ne shranjuje podatkov na napravi obiskovalca, zato ne potrebuje enake ravni privolitve. Konfigurirajte oznako, da se sproži takoj, skupaj z vašimi strogo potrebnimi oznakami.
Navaden HTML / lastni skladi
Za samostojno zgrajeno spletno mesto ali ogrodje, ki ga nismo omenili, prilepite nalagalnik znotraj elementa <head> vaše osnovne predloge — datoteke, ki se prikaže na vsaki strani. Ponovno zgradite in ponovno namestite. Za generatorje statičnih spletnih mest nalagalnik sodi v datoteko postavitve celotnega spletnega mesta (v Next.js je to <Script> v postavitvi na ravni aplikacije s strategy="afterInteractive"; v Astru komponenta <BaseHead>; v 11ty osnovna predloga). Če ste ga dodali kot skript na ravni komponente, bodo poročale samo strani, ki vsebujejo to komponento.
Aplikacije z eno stranjo — ulov
V SPA se začetni ogled strani zabeleži z nalagalnikom, ko se stran prvič naloži. Zaporedne navigacije na strani odjemalca niso samodejni ogledi strani z vidika brskalnika. Naš nalagalnik privzeto posluša History API, zato se navigacije na podlagi nazaj/naprej in pushState registrirajo kot novi ogledi strani, ne da bi morali dodati kodo. Če vaša SPA uporablja nestandardni usmerjevalnik, ki obide History API (redko, a možno), pokličite majhno dokumentirano funkcijo pageview ob spremembi poti — tri vrstice, ki jih najdete v dokumentaciji.
Preverite namestitev v dveh minutah
Preverjanje ni neobvezno. Naredite to, preden zaprete zavihek, v katerem ste namestili nalagalnik; odkriti pokvarjeno namestitev pet minut po lepljenju je enostavno, pet dni kasneje pa ne.
- Odprite svoje spletno mesto v oknu brez beleženja zgodovine (tako da vas predpomnjene datoteke ne zmedejo).
- Odprite DevTools → zavihek Omrežje, filtrirajte po »l5e« ali poti nalagalnika.
- Osvežite stran. Videti bi morali eno zahtevo za nalagalnik, ki ji sledi en majhen identifikacijski svetilnik. Oba morata imeti status 200. Odzivne glave nalagalnika morajo vsebovati cache-control z s-maxage in stale-while-revalidate.
- Pojdite na drugo stran. Videti bi morali, da se sproži še en identifikacijski svetilnik, ne da bi se nalagalnik ponovno prenesel (ta bo dal 304).
- Vrnite se na nadzorno ploščo lead.box, odprite vir obiskovalcev v živo in potrdite, da se prikaže vaš testni obisk. Če je tako, je namestitev končana.
Pogoste napake — tabela, ki jo je treba najprej preveriti
| Simptom | Verjetni vzrok | Rešitev |
|---|---|---|
| Sploh ni obiskov v živo | Nalaganje manjka v glavi ali je v napačni predlogi | Premaknite nalagalnik v predlogo glave celotnega spletnega mesta |
| Obiski v živo samo iz enega razdelka | Nalaganje v vdelavi na ravni strani, ne globalno | Premaknite v globalno glavo / glavo teme |
| Nalaganje se naloži, vendar ni identifikacijskega svetilnika | Pasica za privolitev preveč agresivno blokira skripte tretjih oseb | Konfigurirajte pasico, da dovoli strogo potrebne; nalagalnik ne potrebuje privolitve |
| Podvojeni svetilniki na ogled strani | Nalaganje nameščeno dvakrat (tema + vtičnik/oznaka) | Odstranite enega |
| Počasno prvo prikazovanje po namestitvi | Nalaganje postavljeno pred kritični CSS | Potrdite, da je prisoten atribut async; postavite po prednalaganju kritičnega CSS |
| SPA poroča samo o prvi strani | Prilagojeni usmerjevalnik obide History API | Pokličite dokumentirano pageview() ob spremembi poti |
| Zastarel HTML strežen brez nalagalnika | Predpomnilnik celotne strani ni bil počiščen po namestitvi | Počistite predpomnilnik; preverite v inkognito |
Opomba o zmogljivosti — robno predpomnjen nalagalnik
Nalaganje se streže iz poti prve stranke, ki je posredovana v naš robni predpomnilnik z s-maxage=300 in stale-while-revalidate. V praksi to pomeni, da se nalagalnik pridobi enkrat na pet minut na robni PoP in se nato prikaže iz predpomnilnika vsakemu naslednjemu obiskovalcu. Vpliv na velikost datoteke in čas nalaganja je tako majhen, da odsvetujemo dodajanje dodatne logike nalaganja.
Kdaj prositi za pomoč
Če ste šli skozi korake preverjanja in še vedno nekaj ni v redu, bi to raje slišali po desetih minutah kot po desetih dneh. Posredujte tri stvari: URL spletnega mesta, posnetek zaslona zavihka Omrežje v DevTools, filtriran po poti nalagalnika, in ime platforme, na katero ste namestili. To je dovolj za diagnosticiranje skoraj vsake težave z namestitvijo ob prvem odgovoru.
Published by
lead.box Team
Več člankov
Oglejte si lead.box na lastnem prometu
Začnite brezplačno — brez kartice in brez prodajnega klica. Ali pa rezervirajte 20-minutno predstavitev, če želite voden ogled.