Snippet-ul de tracking este un script mic, asincron — câțiva kiloocteți serviți de pe o cale first-party cu cache la edge — care identifică organizația din spatele fiecărei sesiuni. Instalat corect, nu ar trebui să-l observi niciodată. Instalat greșit, vei petrece o săptămână depanând de ce lipsesc companiile identificate, până descoperi că loader-ul era într-un partial încărcat lazy. Acest ghid te ajută să sari peste săptămâna respectivă.
Trei principii înainte să lipești orice
- Loader-ul aparține head-ului HTML valabil pentru tot site-ul. Nu footer-ul, nu un anumit șablon de pagină, nu o componentă care se randează doar pe paginile de marketing. În head, pe fiecare pagină.
- Loader-ul este asincron implicit. Nu adăuga o suprascriere defer/async care schimbă momentul execuției; atributele livrate sunt cele testate de noi.
- Instalează o singură dată, exact. Două copii ale loader-ului pe aceeași pagină nu îți dublează datele — îți dublează cererile și încurcă depanarea.
WordPress
Cea mai curată instalare pe WordPress evită modificările de temă. Folosește un plugin pentru scripturi în header (oricare dintre cele cunoscute merge), lipește loader-ul în câmpul „scripturi în head”, salvează și golește orice cache de pagină. Dacă nu vrei un plugin, adaugă un fișier mu-plugin mic care se conectează la wp_head cu prioritatea 5, astfel încât loader-ul să ajungă înaintea etichetelor de analiză. Nu îl lipi în corpul unei pagini sau articol — WordPress va elimina eticheta de script.
O verificare specifică WordPress: dacă rulezi un cache complet de pagină (LiteSpeed, WP Rocket, W3 Total Cache), golește cache-ul după instalare. HTML-ul din cache dinainte de instalare nu va conține loader-ul.
Shopify
Shopify pune HTML-ul temei în theme.liquid. În admin-ul Shopify, deschide Online Store → Themes → Actions → Edit code → theme.liquid și lipește loader-ul chiar înainte de eticheta de închidere </head>. Salvează. Atât — nu ai nevoie de o aplicație, nu e nevoie de script la checkout (oricum checkout-ul nu intră în sfera identificării la nivel de companie).
Duplică tema mai întâi
Înainte să editezi theme.liquid, folosește Actions → Duplicate. Dacă ceva merge prost, poți reveni dintr-un click. Este un obicei de cinci secunde care a salvat fiecare echipă Shopify căreia i-a fost sugerat.
Webflow
Webflow → Site Settings → Custom Code → Head Code. Lipește loader-ul. Salvează. Publică site-ul. Codul din head se aplică global pe toate paginile, exact ce vrei. Nu lipi loader-ul într-un embed la nivel de pagină — vei urmări doar acea pagină.
Google Tag Manager
GTM funcționează, cu două atenționări. Întâi, folosește o etichetă Custom HTML cu trigger-ul setat pe „All Pages”, astfel încât loader-ul să ruleze la fiecare vizualizare de pagină. Al doilea, setează prioritatea etichetei suficient de sus încât să se declanșeze înaintea altor etichete de analiză care ar putea încetini payload-ul inițial. Utilizatorii GTM adaugă adesea patru sau cinci etichete în head; loader-ul este mic, dar ordinea de declanșare contează dacă vrei identificare de la prima cerere.
Atenționare privind modul de consimțământ: dacă rulezi GTM în spatele unui banner de consimțământ care declanșează etichetele de analiză doar după opt-in, nu pune identificarea la nivel de companie în spatele aceleiași bariere — nu folosește cookie-uri și nu stochează date pe dispozitivul vizitatorului, deci nu necesită aceeași suprafață de consimțământ. Configurează eticheta să se declanșeze imediat, alături de etichetele strict necesare.
HTML simplu / stack-uri personalizate
Pentru un site scris manual sau un framework pe care nu l-am numit, lipește loader-ul în elementul <head> al șablonului de bază — fișierul care se randează pe fiecare pagină. Reconstruiește și redeploiază. Pentru generatoare de site-uri statice, loader-ul aparține fișierului de layout valabil pentru tot site-ul (în Next.js este un <Script> în layout-ul la nivel de aplicație cu strategy="afterInteractive"; în Astro, componenta <BaseHead>; în 11ty, partialul șablonului de bază). Dacă l-ai adăugat ca script la nivel de componentă, doar paginile care includ acea componentă vor raporta.
Aplicații single-page — singura capcană
Într-un SPA, prima vizualizare de pagină este capturată de loader la prima încărcare. Navigările ulterioare pe partea de client nu sunt automat vizualizări de pagină din punctul de vedere al browserului. Loader-ul nostru ascultă implicit History API, astfel încât navigările înainte/înapoi și cele bazate pe pushState se înregistrează ca vizualizări noi de pagină fără niciun cod din partea ta. Dacă SPA-ul tău folosește un router non-standard care ocolește History API (rar, dar nu neauzit), apelează mica funcție documentată de vizualizare de pagină la schimbarea rutei — trei linii, menționate în documentație.
Verifică instalarea în două minute
Verificarea nu este opțională. Fă-o înainte să închizi tab-ul în care ai instalat loader-ul; a prinde o instalare greșită la cinci minute după lipire e simplu, la cinci zile după, nu.
- Deschide site-ul într-o fereastră privată/incognito (ca să nu te încurce fișierele din cache).
- Deschide DevTools → tab-ul Network, filtrează după „l5e” sau calea loader-ului.
- Reîncarcă pagina. Ar trebui să vezi o cerere către loader, apoi un mic beacon de identificare. Ambele ar trebui să aibă statusul 200. Antetele răspunsului loader-ului ar trebui să includă un cache-control cu s-maxage și stale-while-revalidate.
- Navighează la o a doua pagină. Ar trebui să vezi încă un beacon de identificare declanșat, fără re-descărcarea loader-ului (va fi 304).
- Revino la dashboard-ul lead.box, deschide fluxul de vizitatori live și confirmă că apare vizita ta de test. Dacă apare, instalarea este completă.
Greșeli frecvente — tabelul de verificat primul
| Simptom | Cauză probabilă | Rezolvare |
|---|---|---|
| Nicio vizită live | Loader lipsă din head, sau pe șablonul greșit | Mută loader-ul în șablonul de head valabil pentru tot site-ul |
| Vizite live doar dintr-o secțiune | Loader într-un embed la nivel de pagină, nu global | Mută-l în head-ul global / header-ul temei |
| Loader-ul se încarcă, dar niciun beacon de identificare | Bannerul de consimțământ blochează prea agresiv scripturile terțe | Configurează bannerul să permită ce e strict necesar; loader-ul nu are nevoie de consimțământ |
| Beacon-uri duble per vizualizare de pagină | Loader instalat de două ori (temă + plugin/etichetă) | Elimină unul dintre ele |
| Prim randare lentă după instalare | Loader plasat înaintea CSS-ului critic | Confirmă că atributul async este prezent; plasează-l după preload-ul CSS-ului critic |
| SPA raportează doar prima pagină | Router personalizat ocolește History API | Apelează funcția documentată pageview() la schimbarea rutei |
| Se servește HTML vechi fără loader | Cache-ul complet de pagină nu a fost golit după instalare | Golește cache-ul; verifică în incognito |
Notă de performanță — loader cu cache la edge
Loader-ul este servit de pe o cale first-party proxy-ată către cache-ul nostru la edge cu s-maxage=300 și stale-while-revalidate. În practică, asta înseamnă că loader-ul este preluat o dată la cinci minute per PoP de edge, apoi servit din cache fiecărui vizitator ulterior. Greutatea în octeți și impactul de blocare sunt suficient de mici încât nu recomandăm adăugarea unei logici de încărcare suplimentare peste el.
Când să ceri ajutor
Dacă ai parcurs pașii de verificare și ceva tot nu e în regulă, preferăm să auzim de la tine la minutul zece, nu la ziua a zecea. Adu trei lucruri: URL-ul site-ului, o captură de ecran a tab-ului DevTools Network filtrat după calea loader-ului și numele platformei pe care ai instalat. Este suficient pentru a diagnostica aproape orice problemă de instalare din primul răspuns.
Published by
lead.box Team
Mai multe articole
Vedeți lead.box pe propriul trafic
Începeți gratuit — fără card, fără apel de vânzări. Sau rezervați o prezentare de 20 de minute dacă preferați turul ghidat.