Isječak za praćenje je mali asinkroni skript — nekoliko kilobajta posluženih s rubno keširane putanje prve strane — koji identificira organizaciju iza svake sesije. Ispravno instaliran, nećete ga primijetiti. Neispravno instaliran, provest ćete tjedan dana otklanjajući pogreške zašto nedostaju identificirane tvrtke, prije nego što otkrijete da je učitavač bio u lijeno učitanom odjeljku. Ovaj vodič će vam pomoći uštedjeti taj tjedan.
Tri principa prije nego što išta dodirnete
- Učitavač pripada u HTML zaglavlje cijele stranice. Ne u podnožje, ne u specifični predložak stranice, ne u komponentu koja se pojavljuje samo na marketinškim stranicama. U zaglavlje, na svaku stranicu.
- Učitavač je asinkron po zadanim postavkama. Nemojte dodavati defer/async premošćivanje koje mijenja vrijeme izvršavanja; priloženi atributi su atributi koje smo testirali.
- Instalirajte točno jednom. Dvije kopije učitavača na istoj stranici neće udvostručiti vaše podatke — udvostručit će zahtjeve i učiniti otklanjanje pogrešaka zbunjujućim.
WordPress
Najčišća instalacija na WordPressu izbjegava uređivanje tema. Koristite dodatak za skripte zaglavlja (bilo koji poznati će poslužiti), zalijepite učitavač u polje "skripte u zaglavlju", spremite i obrišite sve predmemorije stranica. Ako ne želite dodatak, dodajte malu mu-plugin datoteku koja se povezuje s wp_head s prioritetom 5, tako da učitavač sleti prije analitičkih oznaka. Nemojte ga lijepiti u tijelo stranice ili objave — WordPress će filtrirati oznaku skripte.
Jedna provjera specifična za WordPress: ako koristite predmemoriju cijele stranice (LiteSpeed, WP Rocket, W3 Total Cache), ispraznite predmemoriju nakon instalacije. Keširani HTML prije instalacije neće sadržavati učitavač.
Shopify
Shopify postavlja HTML teme u theme.liquid. U vašem Shopify administratorskom sučelju idite na Online Store → Themes → Actions → Edit code → theme.liquid i zalijepite učitavač izravno prije završne oznake </head>. Spremite. To je sve — nije potrebna aplikacija, nema skripte za naplatu (naplata je ionako izvan dosega identifikacije na razini tvrtke).
Prvo duplicirajte temu
Prije uređivanja theme.liquid, koristite Actions → Duplicate. Ako nešto pođe po zlu, možete se vratiti jednim klikom. Ovo je navika od pet sekundi koja je spasila svaki Shopify tim kojem smo je preporučili.
Webflow
Webflow → Site Settings → Custom Code → Head Code. Zalijepite učitavač. Spremite. Objavite stranicu. Kod zaglavlja primjenjuje se globalno na svim stranicama, što je upravo ono što želite. Nemojte lijepiti učitavač u ugrađeni element na razini stranice — tada ćete pratiti samo tu jednu stranicu.
Google Tag Manager
GTM radi, s dvije napomene. Prvo: koristite prilagođenu HTML oznaku s okidačem postavljenim na "Sve stranice", tako da se učitavač pokreće pri svakom prikazu stranice. Drugo: postavite prioritet oznake dovoljno visoko da se izvrši prije drugih analitičkih oznaka koje mogu usporiti početni teret. Korisnici GTM-a često slažu četiri ili pet oznaka u zaglavlje; učitavač je mali, ali redoslijed kojim se oznake pokreću važan je ako želite identifikaciju pri prvom zahtjevu.
Obratite pažnju na način pristanka: ako koristite GTM iza bannera za pristanak koji pokreće analitičke oznake tek nakon pristanka, nemojte stavljati identifikaciju na razini tvrtke iza iste barijere — ne koristi kolačiće i ne pohranjuje podatke na uređaju posjetitelja, tako da ne zahtijeva istu razinu pristanka. Konfigurirajte oznaku da se pokrene odmah, zajedno s vašim strogo potrebnim oznakama.
Običan HTML / vlastiti stackovi
Za samostalno izgrađenu stranicu ili okvir koji nismo spomenuli, zalijepite učitavač unutar <head> elementa vašeg osnovnog predloška — datoteke koja se renderira na svakoj stranici. Ponovno izgradite i ponovno postavite. Za generatore statičkih stranica, učitavač pripada u datoteku izgleda cijele stranice (u Next.js to je <Script> u izgledu na razini aplikacije s strategy="afterInteractive"; u Astru komponenta <BaseHead>; u 11ty osnovni predložak). Ako ste ga dodali kao skriptu na razini komponente, samo će stranice koje sadrže tu komponentu izvještavati.
Aplikacije s jednom stranicom — kvaka
U SPA-u, početni prikaz stranice bilježi učitavač kada se stranica prvi put učita. Naknadne navigacije na strani klijenta nisu automatski prikazi stranica iz perspektive preglednika. Naš učitavač po zadanim postavkama sluša History API, tako da se navigacije temeljene na natrag/naprijed i pushState bilježe kao novi prikazi stranica bez potrebe za dodavanjem koda. Ako vaša SPA koristi nekonvencionalni usmjerivač koji zaobilazi History API (rijetko, ali moguće), pozovite malu dokumentiranu funkciju pageview pri promjeni rute — tri retka, pronađena u dokumentaciji.
Provjerite instalaciju u dvije minute
Provjera nije opcija. Učinite to prije nego što zatvorite karticu u kojoj ste instalirali učitavač; otkrivanje pokvarene instalacije pet minuta nakon lijepljenja je jednostavno, pet dana kasnije nije.
- Otvorite svoju stranicu u anonimnom prozoru (tako da vas keširane datoteke ne zbunjuju).
- Otvorite DevTools → kartica Network, filtrirajte po "l5e" ili putanji učitavača.
- Osvježite stranicu. Trebali biste vidjeti jedan zahtjev za učitavač, nakon čega slijedi jedan mali identify-beacon. Oba bi trebala imati status 200. Zaglavlja odgovora učitavača trebala bi sadržavati cache-control s s-maxage i stale-while-revalidate.
- Navigirajte na drugu stranicu. Trebali biste vidjeti još jedan identify-beacon kako se pokreće, bez ponovnog preuzimanja učitavača (ovo će dati 304).
- Vratite se na nadzornu ploču lead.box, otvorite feed posjetitelja uživo i potvrdite da se vaš testni posjet pojavljuje. Ako je tako, instalacija je dovršena.
Česte pogreške — tablica koju treba prvo provjeriti
| Simptom | Vjerojatni uzrok | Rješenje |
|---|---|---|
| Uopće nema posjeta uživo | Učitavač nedostaje u zaglavlju, ili je u pogrešnom predlošku | Premjestite učitavač u predložak zaglavlja cijele stranice |
| Posjeti uživo samo iz jednog odjeljka | Učitavač u ugrađenom elementu na razini stranice, nije globalan | Premjestite u globalno zaglavlje / zaglavlje teme |
| Učitavač se učitava, ali nema identify-beacona | Banner za pristanak preagresivno blokira skripte trećih strana | Konfigurirajte banner da dopusti strogo potrebne; učitavač ne treba pristanak |
| Dvostruki beaconi po prikazu stranice | Učitavač instaliran dvaput (tema + dodatak/oznaka) | Uklonite jedan |
| Sporo prvo iscrtavanje nakon instalacije | Učitavač postavljen prije kritičnog CSS-a | Potvrdite da je prisutan async atribut; postavite nakon predopterećenja kritičnog CSS-a |
| SPA izvještava samo prvu stranicu | Prilagođeni usmjerivač zaobilazi History API | Pozovite dokumentiranu pageview() pri promjeni rute |
| Zastarjeli HTML poslužen bez učitavača | Predmemorija cijele stranice nije ispražnjena nakon instalacije | Ispraznite predmemoriju; provjerite u anonimnom načinu |
Napomena o performansama — rubno keširani učitavač
Učitavač se poslužuje s putanje prve strane koja je proxyjem preusmjerena na našu rubnu predmemoriju s s-maxage=300 i stale-while-revalidate. U praksi to znači da se učitavač dohvaća jednom svakih pet minuta po rubnom PoP-u, a zatim se poslužuje iz predmemorije svakom sljedećem posjetitelju. Utjecaj na veličinu datoteke i vrijeme učitavanja je toliko mali da ne preporučujemo dodavanje dodatne logike učitavanja.
Kada zatražiti pomoć
Ako ste prošli korake provjere i još uvijek nešto nije u redu, radije bismo to čuli nakon deset minuta nego nakon deset dana. Proslijedite tri stvari: URL stranice, snimku zaslona kartice Network u DevTools filtriranu po putanji učitavača i naziv platforme na kojoj ste instalirali. To je dovoljno za dijagnosticiranje gotovo svakog problema s instalacijom pri prvom odgovoru.
Published by
lead.box Team
Više članaka
Pogledaj lead.box na vlastitom prometu
Kreni besplatno — bez kartice, bez obveznog poziva prodaje. Ili rezerviraj 20-minutni pregled ako želiš vođenu turu.