Sledovací snippet je malý asynchronní skript – několik kilobajtů obsluhovaných z edge-cacheované cesty první strany – který identifikuje organizaci za každou relací. Správně nainstalovaný si ho nevšimnete. Nesprávně nainstalovaný strávíte týden laděním, proč chybí identifikované společnosti, než zjistíte, že zavaděč byl v líně načítané sekci. Tento průvodce vám pomůže ušetřit ten týden.
Tři principy, než cokoli uchopíte
- Zavaděč patří do celého HTML záhlaví webu. Ne do zápatí, ne do konkrétní šablony stránky, ne do komponenty, která se objevuje pouze na marketingových stránkách. Do záhlaví, na každou stránku.
- Zavaděč je ve výchozím nastavení asynchronní. Nepřidávejte přepsání defer/async, které mění dobu provádění; dodané atributy jsou atributy, které jsme testovali.
- Nainstalujte přesně jednou. Dvě kopie zavaděče na stejné stránce nezdvojnásobí vaše data – zdvojnásobí požadavky a ztíží ladění.
WordPress
Nejčistší instalace na WordPressu se vyhýbá úpravám témat. Použijte plugin pro skripty v hlavičce (jakýkoli známý postačí), vložte zavaděč do pole „skripty v hlavičce“, uložte a vymažte případnou mezipaměť stránek. Pokud nechcete plugin, přidejte malý soubor mu-plugin, který se připojí k wp_head s prioritou 5, aby zavaděč přistál před analytickými značkami. Nevkládejte ho do těla stránky nebo příspěvku – WordPress odfiltruje značku skriptu.
Jedna kontrola specifická pro WordPress: pokud používáte full-page cache (LiteSpeed, WP Rocket, W3 Total Cache), vyprázdněte cache po instalaci. Cacheovaná HTML z doby před instalací nebude obsahovat zavaděč.
Shopify
Shopify umisťuje HTML tématu do theme.liquid. V administraci Shopify přejděte na Online Store → Themes → Actions → Edit code → theme.liquid a vložte zavaděč přímo před uzavírací značku </head>. Uložte. To je vše – není potřeba žádná aplikace, žádný skript pro pokladnu (pokladna je stejně mimo rozsah identifikace na úrovni společnosti).
Nejprve duplikujte téma
Před úpravou theme.liquid použijte Actions → Duplicate. Pokud se něco pokazí, můžete se vrátit jedním kliknutím. Je to pětiminutový zvyk, který zachránil každý tým Shopify, kterému jsme ho doporučili.
Webflow
Webflow → Site Settings → Custom Code → Head Code. Vložte zavaděč. Uložte. Publikujte web. Kód hlavičky se aplikuje globálně na všechny stránky, což je přesně to, co chcete. Nevkládejte zavaděč do vložení na úrovni stránky – pak budete sledovat pouze tuto jednu stránku.
Google Tag Manager
GTM funguje, s dvěma výhradami. Za prvé: použijte vlastní HTML značku, kde je spouštěč nastaven na „Všechny stránky“, takže se zavaděč spustí při každém zobrazení stránky. Za druhé: nastavte prioritu značky dostatečně vysoko, aby se spustila před ostatními analytickými značkami, které by mohly zpozdit počáteční datovou zátěž. Uživatelé GTM často skládají čtyři nebo pět značek do hlavičky; zavaděč je malý, ale pořadí, ve kterém se značky spouštějí, je důležité, pokud chcete identifikaci při prvním požadavku.
Všimněte si režimu souhlasu: pokud používáte GTM za bannerem souhlasu, který spouští analytické značky až po opt-inu, nedávejte identifikaci na úrovni společnosti za stejnou bariéru – nepoužívá soubory cookie a neukládá data na zařízení návštěvníka, takže nepotřebuje stejnou úroveň souhlasu. Nakonfigurujte značku tak, aby se spustila okamžitě, spolu s vašimi striktně nezbytnými značkami.
Čisté HTML / vlastní zásobníky
Pro vlastní web nebo framework, který jsme nezmínili, vložte zavaděč do elementu <head> vaší základní šablony – souboru, který se vykresluje na každé stránce. Znovu sestavte a znovu nasaďte. Pro generátory statických stránek patří zavaděč do celého souboru rozvržení webu (v Next.js je to <Script> v rozvržení na úrovni aplikace s strategy="afterInteractive"; v Astro komponenta <BaseHead>; v 11ty základní šablona). Pokud jste ho přidali jako skript na úrovni komponenty, budou hlásit pouze stránky, které tuto komponentu obsahují.
Jednostránkové aplikace – háček
V SPA je počáteční zobrazení stránky zaznamenáno zavaděčem při prvním načtení stránky. Následné navigace na straně klienta nejsou z pohledu prohlížeče automatickými zobrazeními stránek. Náš zavaděč ve výchozím nastavení naslouchá History API, takže navigace zpět/vpřed a pushState jsou registrovány jako nová zobrazení stránek, aniž byste museli přidávat kód. Pokud vaše SPA používá nestandardní router, který obchází History API (vzácné, ale možné), zavolejte malou zdokumentovanou funkci pageview při změně trasy – tři řádky, které najdete v dokumentaci.
Ověřte instalaci za dvě minuty
Ověření není volitelné. Udělejte to, než zavřete kartu, ve které jste zavaděč nainstalovali; zjistit rozbitou instalaci pět minut po vložení je snadné, pět dní později ne.
- Otevřete svůj web v anonymním okně (aby vás nezmátly cacheované soubory).
- Otevřete DevTools → záložku Network, filtrujte podle „l5e“ nebo cesty zavaděče.
- Obnovte stránku. Měli byste vidět jeden požadavek na zavaděč, následovaný jedním malým identifikačním majákem. Oba by měly mít stav 200. Hlavičky odpovědi zavaděče by měly obsahovat cache-control s s-maxage a stale-while-revalidate.
- Přejděte na druhou stránku. Měli byste vidět, že se spustí další identifikační maják, aniž by se zavaděč znovu stahoval (ten vrátí 304).
- Vraťte se na řídicí panel lead.box, otevřete živý kanál návštěvníků a potvrďte, že se vaše testovací návštěva zobrazuje. Pokud ano, instalace je dokončena.
Časté chyby – tabulka, kterou je třeba zkontrolovat jako první
| Příznak | Pravděpodobná příčina | Řešení |
|---|---|---|
| Žádné živé návštěvy | Zavaděč chybí v hlavičce nebo je v nesprávné šabloně | Přesuňte zavaděč do šablony hlavičky celého webu |
| Živé návštěvy pouze z jedné sekce | Zavaděč ve vložení na úrovni stránky, nikoli globálně | Přesuňte do globální hlavičky / hlavičky tématu |
| Zavaděč se načítá, ale žádný identifikační maják | Banner souhlasu blokuje skripty třetích stran příliš agresivně | Nakonfigurujte banner tak, aby povoloval striktně nezbytné; zavaděč nepotřebuje souhlas |
| Dvojité majáky na zobrazení stránky | Zavaděč nainstalován dvakrát (téma + plugin/značka) | Odstraňte jeden |
| Pomalé první vykreslení po instalaci | Zavaděč umístěn před kritickým CSS | Potvrďte, že je přítomen atribut async; umístěte po přednačtení kritického CSS |
| SPA hlásí pouze první stránku | Vlastní router obchází History API | Zavolejte zdokumentovanou funkci pageview() při změně trasy |
| Zastaralé HTML obsluhováno bez zavaděče | Full-page cache nebyla vyprázdněna po instalaci | Vyprázdněte cache; ověřte v anonymním režimu |
Poznámka k výkonu – edge-cacheovaný zavaděč
Zavaděč je obsluhován z cesty první strany, která je proxyována do naší edge-cache s s-maxage=300 a stale-while-revalidate. V praxi to znamená, že zavaděč je načten jednou za pět minut na každém edge PoP a poté je obsluhován z cache každému dalšímu návštěvníkovi. Dopad na velikost souboru a dobu načítání je tak malý, že nedoporučujeme přidávat další logiku načítání.
Kdy požádat o pomoc
Pokud jste prošli ověřovacími kroky a stále něco není v pořádku, raději to víme po deseti minutách než po deseti dnech. Uveďte tři věci: URL webu, snímek obrazovky záložky Network v DevTools filtrovaný podle cesty zavaděče a název platformy, na kterou jste instalovali. To stačí k diagnostice téměř každého problému s instalací při první odpovědi.
Published by
lead.box Team
Další články
Podívejte se na lead.box na vlastním provozu
Začněte zdarma — bez karty a bez obchodního hovoru. Nebo si rezervujte 20minutovou ukázku, pokud chcete komentovanou prohlídku.