Трекинг-код — это небольшой асинхронный скрипт объёмом в несколько килобайт, который загружается по пути первого домена с кешированием на edge-серверах и определяет организацию, стоящую за каждой сессией. При правильной установке вы никогда его не заметите. При неправильной — потратите неделю, выясняя, почему в данных нет идентифицированных компаний, пока не обнаружите, что загрузчик оказался внутри компонента с ленивой загрузкой. Это руководство поможет не терять эту неделю.
Три принципа перед установкой
- Загрузчик должен находиться в общем для всего сайта разделе <head>. Не в футере, не в шаблоне отдельной страницы и не в компоненте, который отображается только на маркетинговых страницах. В <head>, на каждой странице.
- По умолчанию загрузчик работает асинхронно. Не добавляйте переопределение defer/async, которое меняет момент его выполнения: мы тестировали именно те атрибуты, с которыми он поставляется.
- Установите загрузчик ровно один раз. Две копии на одной странице не удвоят объём данных — они удвоят количество запросов и усложнят отладку.
WordPress
Самый аккуратный способ установки в WordPress не требует редактирования темы. Используйте плагин для добавления скриптов в шапку сайта — подойдёт любой из известных вариантов. Вставьте загрузчик в поле «scripts in head», сохраните изменения и очистите кеш страниц. Если вы не хотите устанавливать плагин, добавьте небольшой файл mu-plugin, подключающийся к wp_head с приоритетом 5, чтобы загрузчик выполнялся до тегов аналитики. Не вставляйте его в содержимое страницы или записи: WordPress удалит тег скрипта при санитизации.
Отдельная проверка для WordPress: если вы используете полностраничное кеширование — LiteSpeed, WP Rocket или W3 Total Cache, — очистите кеш после установки. В закешированном до установки HTML загрузчика не будет.
Shopify
HTML-код темы Shopify находится в файле 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. Вставьте загрузчик. Сохраните изменения. Опубликуйте сайт. Код из раздела Head Code применяется ко всем страницам — именно это и нужно. Не вставляйте загрузчик во встраиваемый блок отдельной страницы, иначе отслеживаться будет только она.
Google Tag Manager
GTM подходит, но есть два нюанса. Во-первых, используйте тег Custom HTML с триггером «All Pages», чтобы загрузчик запускался при каждом просмотре страницы. Во-вторых, установите достаточно высокий приоритет тега, чтобы он срабатывал до других тегов аналитики, способных замедлить отправку первого пакета данных. Пользователи GTM часто размещают в <head> четыре или пять тегов. Загрузчик невелик, но порядок срабатывания тегов важен, если вы хотите идентифицировать компанию уже при первом запросе.
Нюанс режима согласия: если GTM находится за баннером согласия и запускает теги аналитики только после согласия пользователя, не помещайте идентификацию на уровне компаний за тот же барьер. Она не использует файлы cookie и не хранит данные на устройстве посетителя, поэтому для неё не требуется такой же механизм согласия. Настройте немедленное срабатывание тега вместе со строго необходимыми тегами.
Обычный HTML и собственные стеки
Если сайт написан вручную или работает на не упомянутом здесь фреймворке, вставьте загрузчик в элемент <head> базового шаблона — файла, который используется на каждой странице. Повторно соберите и разверните сайт. В генераторах статических сайтов загрузчик должен находиться в общем файле макета: в Next.js это <Script> в макете уровня приложения со strategy="afterInteractive", в Astro — компонент <BaseHead>, а в 11ty — частичный базовый шаблон. Если добавить его как скрипт уровня компонента, данные будут поступать только со страниц, где используется этот компонент.
Одностраничные приложения: один важный нюанс
В SPA загрузчик фиксирует первый просмотр при начальной загрузке страницы. Последующие переходы на стороне клиента с точки зрения браузера не считаются автоматическими просмотрами страниц. По умолчанию наш загрузчик отслеживает History API, поэтому переходы назад и вперёд, а также навигация на основе pushState регистрируются как новые просмотры страниц без дополнительного кода с вашей стороны. Если SPA использует нестандартный роутер, который обходит History API — это редко, но случается, — вызывайте при смене маршрута небольшую документированную функцию просмотра страницы. Это три строки кода, приведённые в документации.
Как проверить установку за две минуты
Проверка обязательна. Выполните её до того, как закроете вкладку, в которой устанавливали загрузчик. Обнаружить ошибку через пять минут после вставки кода легко, а через пять дней — уже нет.
- Откройте сайт в приватном режиме или режиме инкогнито, чтобы закешированные ресурсы не исказили результат.
- Откройте DevTools → вкладку Network и отфильтруйте запросы по «l5e» или пути загрузчика.
- Перезагрузите страницу. Вы должны увидеть один запрос к загрузчику, а затем один небольшой идентификационный beacon-запрос. Оба должны иметь статус 200. В заголовках ответа загрузчика должен присутствовать cache-control с s-maxage и stale-while-revalidate.
- Перейдите на вторую страницу. Должен отправиться ещё один идентификационный beacon-запрос без повторной загрузки загрузчика — он получит статус 304.
- Вернитесь в панель lead.box, откройте ленту посетителей в реальном времени и убедитесь, что тестовый визит отображается. Если он появился, установка завершена.
Частые ошибки: что проверить в первую очередь
| Симптом | Вероятная причина | Решение |
|---|---|---|
| Визиты в реальном времени не отображаются | Загрузчика нет в <head> или он добавлен не в тот шаблон | Перенесите загрузчик в общий для всего сайта шаблон <head> |
| Визиты отображаются только из одного раздела | Загрузчик находится во встраиваемом блоке отдельной страницы, а не на глобальном уровне | Перенесите его в глобальный <head> или шапку темы |
| Загрузчик работает, но идентификационный beacon-запрос не отправляется | Баннер согласия слишком агрессивно блокирует сторонние скрипты | Настройте баннер так, чтобы он разрешал строго необходимые скрипты: загрузчику согласие не требуется |
| На каждый просмотр отправляется два beacon-запроса | Загрузчик установлен дважды — через тему и плагин или тег | Удалите одну копию |
| После установки первая отрисовка замедлилась | Загрузчик размещён перед критически важным CSS | Убедитесь, что атрибут async присутствует, и разместите загрузчик после предварительной загрузки критически важного CSS |
| SPA сообщает только о первой странице | Собственный роутер обходит History API | Вызывайте документированную функцию pageview() при смене маршрута |
| Отдаётся устаревший HTML без загрузчика | После установки не был очищен полностраничный кеш | Очистите кеш и проверьте результат в режиме инкогнито |
О производительности: загрузчик с edge-кешированием
Загрузчик предоставляется по пути первого домена, проксируемому через наш edge-кеш с s-maxage=300 и stale-while-revalidate. На практике это означает, что загрузчик запрашивается один раз в пять минут для каждой пограничной точки присутствия, а затем отдаётся из кеша всем последующим посетителям. Его объём в байтах и влияние на блокировку настолько малы, что мы не рекомендуем добавлять поверх него дополнительную логику загрузки.
Когда обращаться за помощью
Если вы прошли все этапы проверки, но что-то по-прежнему работает неправильно, лучше напишите нам через десять минут, а не через десять дней. Подготовьте три вещи: URL сайта, скриншот вкладки Network в DevTools с фильтром по пути загрузчика и название платформы, на которой вы его установили. Этого достаточно, чтобы диагностировать почти любую проблему с установкой уже в первом ответе.
Published by
lead.box Team
More articles
Посмотрите lead.box на своём собственном трафике
Начните бесплатно — без банковской карты и без обязательного звонка. Либо забронируйте 20-минутную демонстрацию.