Проследяващият фрагмент е малък асинхронен скрипт — няколко килобайта, обслужвани от кеширан на ръба път от първа страна — който идентифицира организацията зад всяка сесия. Инсталиран правилно, няма да го забележите. Инсталиран неправилно, ще прекарате една седмица в отстраняване на грешки защо липсват идентифицирани компании, преди да откриете, че зареждащият елемент е бил в мързеливо заредена секция. Това ръководство ще ви помогне да спестите тази седмица.
Три принципа, преди да вземете каквото и да било
- Зареждащият елемент принадлежи към хедъра на HTML на целия сайт. Не във футъра, не в конкретен шаблон на страница, не в компонент, който се появява само на маркетингови страници. В хедъра, на всяка страница.
- Зареждащият елемент е асинхронен по подразбиране. Не добавяйте defer/async override, който променя времето за изпълнение; предоставените атрибути са атрибутите, които сме тествали.
- Инсталирайте точно веднъж. Две копия на зареждащия елемент на една и съща страница не удвояват данните ви — те удвояват заявките и правят отстраняването на грешки объркващо.
WordPress
Най-чистата инсталация на WordPress избягва редактирането на теми. Използвайте плъгин за скриптове в хедъра (всеки известен ще свърши работа), поставете зареждащия елемент в полето „скриптове в хедъра“, запазете и изчистете всички кешове на страници. Ако не искате плъгин, добавете малък mu-плъгин файл, който се закача към wp_head с приоритет 5, така че зареждащият елемент да се зареди преди таговете за анализ. Не го поставяйте в тялото на страница или публикация — WordPress ще филтрира скрипт тага.
Една специфична за WordPress проверка: ако използвате кеш на цяла страница (LiteSpeed, WP Rocket, W3 Total Cache), изчистете кеша след инсталацията. Кешираният HTML от преди инсталацията няма да съдържа зареждащия елемент.
Shopify
Shopify поставя HTML на темата в theme.liquid. В администраторския панел на Shopify отидете на Online Store → Themes → Actions → Edit code → theme.liquid и поставете зареждащия елемент непосредствено преди затварящия таг </head>. Запазете. Това е всичко — не е необходимо приложение, няма скрипт за плащане (плащането така или иначе е извън обхвата на идентификацията на ниво компания).
Първо дублирайте тема
Преди да редактирате theme.liquid, използвайте Actions → Duplicate. Ако нещо се обърка, можете да се върнете с едно щракване. Това е петсекунден навик, който е спасил всеки екип на Shopify, на който сме го препоръчали.
Webflow
Webflow → Site Settings → Custom Code → Head Code. Поставете зареждащия елемент. Запазете. Публикувайте сайта. Кодът на хедъра се прилага глобално към всички страници, което е точно това, което искате. Не поставяйте зареждащия елемент в вграден елемент на ниво страница — тогава ще проследявате само тази една страница.
Google Tag Manager
GTM работи, с две уговорки. Първо: използвайте персонализиран HTML таг, където тригерът е настроен на „Всички страници“, така че зареждащият елемент да се изпълнява при всяко преглеждане на страница. Второ: задайте приоритет на тага достатъчно висок, така че да се изпълни преди други тагове за анализ, които могат да забавят първоначалния полезен товар. Потребителите на GTM често натрупват четири или пет тага в хедъра; зареждащият елемент е малък, но редът, по който се задействат таговете, е важен, ако искате идентификация при първата заявка.
Обърнете внимание на режима на съгласие: ако използвате GTM зад банер за съгласие, който задейства тагове за анализ само след съгласие, не поставяйте идентификацията на ниво компания зад същата бариера — тя не използва бисквитки и не съхранява данни на устройството на посетителя, така че не се нуждае от същото ниво на съгласие. Конфигурирайте тага да се задейства незабавно, заедно с вашите строго необходими тагове.
Обикновен HTML / собствени стекове
За самостоятелно изграден сайт или рамка, която не сме споменали, поставете зареждащия елемент в елемента <head> на вашия основен шаблон — файла, който се рендира на всяка страница. Преизградете и преразгърнете. За генератори на статични сайтове зареждащият елемент принадлежи към файла за оформление на целия сайт (в Next.js това е <Script> в оформлението на ниво приложение със strategy="afterInteractive"; в Astro компонентът <BaseHead>; в 11ty основният шаблон). Ако сте го добавили като скрипт на ниво компонент, само страниците, които съдържат този компонент, ще отчитат.
Едностранични приложения — уловката
В SPA първоначалното преглеждане на страница се записва от зареждащия елемент, когато страницата се зареди за първи път. Последователните навигации от страна на клиента не са автоматични прегледи на страници от гледна точка на браузъра. Нашият зареждащ елемент слуша History API по подразбиране, така че навигациите, базирани на назад/напред и pushState, се регистрират като нови прегледи на страници, без да е необходимо да добавяте код. Ако вашето SPA използва различен рутер, който заобикаля History API (рядко, но възможно), извикайте малката документирана функция pageview при промяна на маршрута — три реда, които могат да бъдат намерени в документацията.
Проверете инсталацията за две минути
Проверката не е по избор. Направете го, преди да затворите раздела, в който сте инсталирали зареждащия елемент; откриването на счупена инсталация пет минути след поставянето е лесно, пет дни по-късно не е.
- Отворете сайта си в инкогнито прозорец (така че кешираните файлове да не ви объркват).
- Отворете DevTools → раздел Network, филтрирайте по „l5e“ или пътя на зареждащия елемент.
- Опреснете страницата. Трябва да видите една заявка към зареждащия елемент, последвана от един малък identify-beacon. И двете трябва да имат статус 200. Заглавките на отговора на зареждащия елемент трябва да съдържат cache-control със s-maxage и stale-while-revalidate.
- Навигирайте до втора страница. Трябва да видите още един identify-beacon да се задейства, без зареждащият елемент да се изтегля отново (той ще върне 304).
- Върнете се към таблото за управление на lead.box, отворете емисията за посетители на живо и потвърдете, че вашето тестово посещение се появява. Ако е така, инсталацията е завършена.
Често срещани грешки — таблицата за проверка първо
| Симптом | Вероятна причина | Решение |
|---|---|---|
| Изобщо няма посещения на живо | Зареждащият елемент липсва в хедъра или е в грешен шаблон | Преместете зареждащия елемент в шаблона на хедъра на целия сайт |
| Посещения на живо само от една секция | Зареждащият елемент е в вграден елемент на ниво страница, а не глобално | Преместете в глобален хедър / хедър на тема |
| Зареждащият елемент се зарежда, но няма identify-beacon | Банерът за съгласие блокира твърде агресивно скриптове от трети страни | Конфигурирайте банера да позволява строго необходими; зареждащият елемент не се нуждае от съгласие |
| Двойни маяци на преглеждане на страница | Зареждащият елемент е инсталиран два пъти (тема + плъгин/таг) | Премахнете един |
| Бавно първо изобразяване след инсталация | Зареждащият елемент е поставен преди критичен CSS | Потвърдете, че async атрибутът присъства; поставете след предварително зареждане на критичен CSS |
| SPA отчита само първата страница | Персонализиран рутер заобикаля History API | Извикайте документираната pageview() при промяна на маршрута |
| Остарял HTML, обслужван без зареждащ елемент | Кешът на цяла страница не е изчистен след инсталация | Изчистете кеша; проверете в инкогнито |
Бележка за производителността — кеширан на ръба зареждащ елемент
Зареждащият елемент се обслужва от път от първа страна, който е проксиран към нашия кеш на ръба със s-maxage=300 и stale-while-revalidate. На практика това означава, че зареждащият елемент се извлича веднъж на всеки пет минути на PoP на ръба и след това се обслужва от кеша на всеки следващ посетител. Въздействието върху размера на файла и времето за зареждане е толкова малко, че не препоръчваме да добавяте допълнителна логика за зареждане.
Кога да поискате помощ
Ако сте преминали през стъпките за проверка и все още нещо не е наред, предпочитаме да чуем за това след десет минути, отколкото след десет дни. Предайте три неща: URL адреса на сайта, екранна снимка на раздела Network в DevTools, филтрирана по пътя на зареждащия елемент, и името на платформата, на която сте инсталирали. Това е достатъчно, за да диагностицирате почти всеки проблем с инсталацията при първия отговор.
Published by
lead.box Team
Още статии
Вижте lead.box върху собствения си трафик
Започнете безплатно — без карта, без задължително обаждане от продажби. Или си запазете 20-минутна демонстрация, ако предпочитате обиколка с водач.