Sledovací snippet je malý asynchrónny skript — niekoľko kilobajtov doručených z edge-cached first-party cesty — ktorý identifikuje organizáciu za každou reláciou. Správne nainštalovaný si ho ani nevšimnete. Nesprávne nainštalovaný strávite týždeň ladením, prečo chýbajú identifikované spoločnosti, kým zistíte, že loader bol v lazy-loaded sekcii. Tento sprievodca vám pomôže ušetriť ten týždeň.
Tri princípy, než niečo chytíte
- Loader patrí do celostránkovej HTML hlavičky. Nie do pätičky, nie do špecifickej šablóny stránky, nie do komponentu, ktorý sa objavuje len na marketingových stránkach. Do hlavičky, na každú stránku.
- Loader je štandardne asynchrónny. Nepridávajte prepísanie defer/async, ktoré mení čas vykonávania; dodané atribúty sú atribúty, ktoré sme testovali.
- Nainštalujte presne raz. Dve kópie loadera na tej istej stránke nezdvojnásobia vaše dáta — zdvojnásobia požiadavky a sťažia ladenie.
WordPress
Najčistejšia inštalácia na WordPress sa vyhýba úprave tém. Použite plugin pre hlavičkové skripty (akýkoľvek známy postačí), vložte loader do poľa „skripty v hlavičke“, uložte a vymažte akúkoľvek vyrovnávaciu pamäť stránky. Ak nechcete plugin, pridajte malý súbor mu-plugin, ktorý sa pripojí k wp_head s prioritou 5, aby sa loader načítal pred analytickými značkami. Nevkladajte ho do tela stránky alebo príspevku — WordPress odfiltruje značku skriptu.
Jedna kontrola špecifická pre WordPress: ak používate full-page cache (LiteSpeed, WP Rocket, W3 Total Cache), vyprázdnite cache po inštalácii. Kešovaná HTML z pred inštalácie nebude obsahovať loader.
Shopify
Shopify umiestňuje HTML témy do theme.liquid. V administrácii Shopify prejdite na Online Store → Themes → Actions → Edit code → theme.liquid a vložte loader priamo pred uzatváraciu značku </head>. Uložte. To je všetko — nie je potrebná žiadna aplikácia, žiadny checkout skript (checkout je aj tak mimo rozsahu identifikácie na úrovni spoločnosti).
Najprv duplikujte tému
Pred úpravou theme.liquid použite Actions → Duplicate. Ak sa niečo pokazí, môžete sa vrátiť jedným kliknutím. Toto je päťsekundový zvyk, ktorý zachránil každý tím Shopify, ktorému sme ho odporučili.
Webflow
Webflow → Site Settings → Custom Code → Head Code. Vložte loader. Uložte. Publikujte stránku. Kód hlavičky sa aplikuje globálne na všetky stránky, čo je presne to, čo chcete. Nevkladajte loader do vloženia na úrovni stránky — potom budete sledovať iba tú jednu stránku.
Google Tag Manager
GTM funguje, s dvoma výhradami. Po prvé: použite vlastnú HTML značku, kde je spúšťač nastavený na „Všetky stránky“, aby sa loader spustil pri každom zobrazení stránky. Po druhé: nastavte prioritu značky dostatočne vysoko, aby sa spustila pred inými analytickými značkami, ktoré môžu spomaliť počiatočné načítanie. Používatelia GTM často ukladajú štyri alebo päť značiek do hlavičky; loader je malý, ale poradie, v ktorom sa značky spúšťajú, je dôležité, ak chcete identifikáciu pri prvej požiadavke.
Pozor na režim súhlasu: ak používate GTM za bannerom súhlasu, ktorý spúšťa analytické značky až po opt-in, neumiestňujte identifikáciu na úrovni spoločnosti za tú istú bariéru — nepoužíva súbory cookie a neukladá údaje na zariadení návštevníka, takže nepotrebuje rovnakú úroveň súhlasu. Nakonfigurujte značku tak, aby sa spustila okamžite, spolu s vašimi striktne potrebnými značkami.
Čisté HTML / vlastné zásobníky
Pre vlastnoručne vytvorenú stránku alebo framework, ktorý sme nespomenuli, vložte loader do elementu <head> vašej základnej šablóny — súboru, ktorý sa vykresľuje na každej stránke. Prestavte a znova nasaďte. Pre generátory statických stránok patrí loader do celostránkového súboru rozloženia (v Next.js je to <Script> v rozložení na úrovni aplikácie so strategy="afterInteractive"; v Astro komponent <BaseHead>; v 11ty základná šablóna partial). Ak ste ho pridali ako skript na úrovni komponentu, budú hlásiť iba stránky, ktoré tento komponent obsahujú.
Single-page aplikácie — háčik
V SPA sa počiatočné zobrazenie stránky zaznamená loaderom pri prvom načítaní stránky. Následné navigácie na strane klienta nie sú z pohľadu prehliadača automatickými zobrazeniami stránok. Náš loader štandardne počúva History API, takže navigácie založené na späť/vpred a pushState sa zaznamenávajú ako nové zobrazenia stránok bez toho, aby ste museli pridávať kód. Ak vaša SPA používa odlišný router, ktorý obchádza History API (zriedkavé, ale možné), zavolajte malú zdokumentovanú funkciu pageview pri zmene trasy — tri riadky, nájdete v dokumentácii.
Overte inštaláciu za dve minúty
Overenie nie je voliteľné. Urobte to predtým, ako zatvoríte kartu, na ktorej ste nainštalovali loader; zistiť nefunkčnú inštaláciu päť minút po vložení je jednoduché, päť dní neskôr nie.
- Otvorte svoju stránku v inkognito okne (aby vás nezmätli kešované súbory).
- Otvorte DevTools → záložka Network, filtrujte podľa „l5e“ alebo cesty loadera.
- Obnovte stránku. Mali by ste vidieť jednu požiadavku na loader, po ktorej nasleduje jeden malý identify-beacon. Obe by mali mať stav 200. Hlavičky odpovede loadera by mali obsahovať cache-control s s-maxage a stale-while-revalidate.
- Prejdite na druhú stránku. Mali by ste vidieť, že sa spustí ďalší identify-beacon, bez opätovného stiahnutia loadera (ten vráti 304).
- Vráťte sa na panel lead.box, otvorte živý kanál návštevníkov a potvrďte, že sa zobrazuje vaša testovacia návšteva. Ak áno, inštalácia je dokončená.
Časté chyby — tabuľka, ktorú treba skontrolovať ako prvú
| Symptóm | Pravdepodobná príčina | Riešenie |
|---|---|---|
| Žiadne živé návštevy | Loader chýba v hlavičke, alebo je v nesprávnej šablóne | Presuňte loader do celostránkovej šablóny hlavičky |
| Živé návštevy len z jednej sekcie | Loader vo vložení na úrovni stránky, nie globálne | Presuňte do globálnej hlavičky / hlavičky témy |
| Loader sa načíta, ale žiadny identify-beacon | Banner súhlasu blokuje skripty tretích strán príliš agresívne | Nakonfigurujte banner tak, aby povoľoval striktne potrebné; loader nepotrebuje súhlas |
| Dvojité majáky na zobrazenie stránky | Loader nainštalovaný dvakrát (téma + plugin/značka) | Odstráňte jeden |
| Pomalé prvé vykreslenie po inštalácii | Loader umiestnený pred kritickým CSS | Potvrďte, že atribút async je prítomný; umiestnite po prednačítaní kritického CSS |
| SPA hlási iba prvú stránku | Vlastný router obchádza History API | Zavolajte zdokumentovanú pageview() pri zmene trasy |
| Zastarané HTML doručené bez loadera | Full-page cache nebola vyprázdnená po inštalácii | Vyprázdnite cache; overte v inkognito |
Poznámka k výkonu — edge-cached loader
Loader sa doručuje z first-party cesty, ktorá je proxyovaná do našej edge-cache s s-maxage=300 a stale-while-revalidate. V praxi to znamená, že loader sa načíta raz za päť minút na PoP a potom sa zobrazí z cache každému ďalšiemu návštevníkovi. Vplyv na veľkosť súboru a čas načítania je taký malý, že neodporúčame pridávať ďalšiu logiku načítania.
Kedy požiadať o pomoc
Ak ste prešli overovacími krokmi a stále niečo nie je v poriadku, radšej to počujeme po desiatich minútach ako po desiatich dňoch. Poskytnite tri veci: URL stránky, snímku obrazovky záložky Network v DevTools filtrovanú podľa cesty loadera a názov platformy, na ktorej ste inštalovali. To stačí na diagnostiku takmer každého problému s inštaláciou pri prvej odpovedi.
Published by
lead.box Team
Ďalšie články
Pozrite si lead.box na vlastnej návštevnosti
Začnite zadarmo — bez karty a bez obchodného hovoru. Alebo si rezervujte 20-minútovú ukážku, ak chcete komentovanú prehliadku.