A követőkód egy apró aszinkron szkript – néhány kilobájt, egy edge-cachelt első féltől származó útvonalról szolgálva –, amely azonosítja az egyes munkamenetek mögött álló szervezetet. Helyesen telepítve észre sem veszed. Helytelenül telepítve egy hetet töltesz azzal, hogy hibakeresést végzel, miért hiányoznak az azonosított cégek, mielőtt rájönnél, hogy a betöltő egy lusta betöltésű szakaszban volt. Ez az útmutató segít megspórolni azt az egy hetet.
Három alapelv, mielőtt bármit is beillesztenél
- A betöltőnek az oldal egészére kiterjedő HTML head részben kell lennie. Nem a láblécben, nem egy specifikus oldalsablonban, nem egy olyan komponensben, ami csak marketingoldalakon jelenik meg. A head részben, minden oldalon.
- A betöltő alapértelmezés szerint aszinkron. Ne adj hozzá defer/async felülírást, ami megváltoztatja a végrehajtási időt; a mellékelt attribútumok azok az attribútumok, amiket teszteltünk.
- Pontosan egyszer telepítsd. Két példány a betöltőből ugyanazon az oldalon nem duplázza meg az adataidat – megduplázza a kéréseket és zavarossá teszi a hibakeresést.
WordPress
A legtisztább telepítés WordPressen elkerüli a témák szerkesztését. Használj egy fejléc-szkript plugint (bármelyik ismert megteszi), illeszd be a betöltőt a „scripts in head” mezőbe, mentsd el, és törölj minden oldalgyorsítótárat. Ha nem akarsz plugint, adj hozzá egy kis mu-plugin fájlt, ami a wp_head-hez kapcsolódik 5-ös prioritással, így a betöltő az analitikai címkék előtt landol. Ne illeszd be egy oldal vagy bejegyzés törzsébe – a WordPress kiszűri a szkriptcímkét.
Egy WordPress-specifikus ellenőrzés: ha teljes oldalas gyorsítótárat használsz (LiteSpeed, WP Rocket, W3 Total Cache), ürítsd a gyorsítótárat a telepítés után. A telepítés előtti gyorsítótárazott HTML nem tartalmazza a betöltőt.
Shopify
A Shopify a téma HTML-jét a theme.liquid fájlba helyezi. A Shopify admin felületén navigálj az Online Store → Themes → Actions → Edit code → theme.liquid útvonalra, és illeszd be a betöltőt közvetlenül a záró </head> címke elé. Mentsd el. Ennyi – nincs szükség alkalmazásra, nincs checkout szkript (a checkout amúgy is kívül esik a cégszintű azonosítás hatókörén).
Először duplikálj egy témát
Mielőtt szerkesztenéd a theme.liquid fájlt, használd az Actions → Duplicate opciót. Ha valami rosszul sül el, egy kattintással visszaállíthatod. Ez egy öt másodperces szokás, ami minden Shopify csapatot megmentett, akinek ajánlottuk.
Webflow
Webflow → Site Settings → Custom Code → Head Code. Illeszd be a betöltőt. Mentsd el. Tedd közzé az oldalt. A head kód globálisan alkalmazódik minden oldalra, ami pontosan az, amit szeretnél. Ne illeszd be a betöltőt egy oldalszintű beágyazásba – akkor csak azt az egy oldalt követnéd.
Google Tag Manager
A GTM működik, két megjegyzéssel. Először is: használj egy egyéni HTML címkét, ahol a trigger „All Pages” (Minden oldal) értékre van állítva, így a betöltő minden oldalmegtekintéskor fut. Másodszor: állítsd a címke prioritását elég magasra, hogy az más analitikai címkék előtt fusson le, amelyek késleltethetik a kezdeti adatbetöltést. A GTM felhasználók gyakran négy-öt címkét halmoznak fel a head részben; a betöltő kicsi, de a címkék futtatási sorrendje fontos, ha az első kérésnél azonosítást szeretnél.
Figyelj a hozzájárulási módra: ha GTM-et használsz egy hozzájárulási banner mögött, amely csak az opt-in után indítja el az analitikai címkéket, ne tedd a cégszintű azonosítást ugyanazon akadály mögé – nem használ sütiket, és nem tárol adatokat a látogató eszközén, így nincs szüksége ugyanarra a hozzájárulási szintre. Konfiguráld a címkét, hogy azonnal fusson, a szigorúan szükséges címkéiddel együtt.
Egyszerű HTML / saját stackek
Egy saját építésű oldal vagy egy általunk nem említett keretrendszer esetén illeszd be a betöltőt az alap sablonod <head> elemébe – abba a fájlba, amely minden oldalon renderelődik. Építsd újra és telepítsd újra. Statikus oldalgenerátorok esetén a betöltőnek az oldal egészére kiterjedő elrendezési fájlban kell lennie (Next.js-ben ez egy <Script> az alkalmazásszintű elrendezésben strategy="afterInteractive" attribútummal; Astro-ban a <BaseHead> komponens; 11ty-ben az alap sablon rész). Ha komponensszintű szkriptként adtad hozzá, csak azok az oldalak fognak jelenteni, amelyek tartalmazzák azt a komponenst.
Egyoldalas alkalmazások – a buktató
Egy SPA-ban a kezdeti oldalmegtekintést a betöltő rögzíti, amikor az oldal először betöltődik. A kliensoldali navigációk a böngésző szempontjából nem automatikus oldalmegtekintések. A betöltőnk alapértelmezés szerint figyeli a History API-t, így a vissza/előre és a pushState alapú navigációk új oldalmegtekintésként kerülnek rögzítésre anélkül, hogy kódot kellene hozzáadnod. Ha az SPA-d egy eltérő útválasztót használ, amely megkerüli a History API-t (ritka, de lehetséges), akkor hívja meg a kis dokumentált pageview funkciót egy útvonalváltáskor – három sor, a dokumentációban található.
Ellenőrizze a telepítést két perc alatt
Az ellenőrzés nem opcionális. Tedd meg, mielőtt bezárnád azt a lapot, amelyben a betöltőt telepítetted; egy hibás telepítés felfedezése öt perccel a beillesztés után egyszerű, öt nappal később már nem.
- Nyissa meg az oldalát inkognitó ablakban (hogy a gyorsítótárazott fájlok ne zavarjanak).
- Nyissa meg a DevTools → Network fület, szűrje „l5e” vagy a betöltő útvonalára.
- Frissítse az oldalt. Látnia kell egy kérést a betöltőhöz, majd egy kis azonosító jelzőt. Mindkettőnek 200-as státusszal kell rendelkeznie. A betöltő válaszfejléceinek tartalmazniuk kell egy cache-controlt s-maxage és stale-while-revalidate értékekkel.
- Navigáljon egy második oldalra. Látnia kell még egy azonosító jelzőt, anélkül, hogy a betöltő újra letöltődne (ez egy 304-et ad).
- Térjen vissza a lead.box irányítópultjára, nyissa meg az élő látogatói feedet, és erősítse meg, hogy a tesztlátogatása megjelenik. Ha igen, a telepítés befejeződött.
Gyakori hibák – az első ellenőrizendő táblázat
| Tünet | Feltételezett ok | Megoldás |
|---|---|---|
| Egyáltalán nincs élő látogatás | A betöltő hiányzik a head részből, vagy rossz sablonban van | Helyezze át a betöltőt az oldal egészére kiterjedő head sablonba |
| Élő látogatások csak egy szakaszból | A betöltő oldalszintű beágyazásban van, nem globálisan | Helyezze át a globális head / téma fejlécébe |
| A betöltő betöltődik, de nincs azonosító jelző | A hozzájárulási banner túl agresszíven blokkolja a harmadik féltől származó szkripteket | Konfigurálja a bannert, hogy engedélyezze a szigorúan szükségeseket; a betöltőnek nincs szüksége hozzájárulásra |
| Kettős jelzők oldalmegtekintésenként | A betöltő kétszer van telepítve (téma + plugin/címke) | Távolítsa el az egyiket |
| Lassú első megjelenítés a telepítés után | A betöltő kritikus CSS előtt van elhelyezve | Győződjön meg arról, hogy az async attribútum jelen van; helyezze a kritikus CSS előtöltése után |
| Az SPA csak az első oldalt jelenti | Egyéni útválasztó megkerüli a History API-t | Hívja meg a dokumentált pageview() függvényt útvonalváltáskor |
| Elavult HTML szolgáltatása betöltő nélkül | A teljes oldalas gyorsítótár nem lett ürítve a telepítés után | Ürítse a gyorsítótárat; ellenőrizze inkognitóban |
Teljesítmény megjegyzés – edge-cachelt betöltő
A betöltő egy első féltől származó útvonalról kerül kiszolgálásra, amely proxyzálva van az edge-cache-ünkre s-maxage=300 és stale-while-revalidate értékekkel. A gyakorlatban ez azt jelenti, hogy a betöltő öt percenként egyszer kerül lekérésre edge PoP-onként, majd a cache-ből kerül kiszolgálásra minden következő látogató számára. A fájlméretre és a betöltési időre gyakorolt hatás olyan csekély, hogy nem javasoljuk további betöltési logika hozzáadását.
Mikor kérj segítséget
Ha végigcsináltad az ellenőrzési lépéseket, és még mindig valami nem stimmel, inkább tíz perc után halljuk, mint tíz nap után. Három dolgot adj meg: az oldal URL-jét, egy képernyőképet a DevTools Hálózat füléről, a betöltő útvonalára szűrve, és annak a platformnak a nevét, amelyre telepítetted. Ez elegendő ahhoz, hogy szinte minden telepítési problémát diagnosztizáljunk az első válaszban.
Published by
lead.box Team
További cikkek
Nézze meg a lead.box-ot a saját forgalmán
Kezdje ingyen — bankkártya és értékesítési hívás nélkül. Vagy foglaljon egy 20 perces bemutatót, ha vezetett túrát szeretne.