Как установить Hotjar через Google Tag Manager
Летом 2025 Hotjar перешел в Contentsquare, и установка изменилась: другой код, другой домен, аккаунт на стороне Contentsquare. Инструкции двухлетней давности теперь сбивают с пути. Здесь актуальный способ через Google Tag Manager: подходит для любой системы управления сайтом, держит теги в одном месте и дает контроль над согласием и скоростью.
Hotjar ставится за пять минут, и в этом ловушка. Кривая установка не падает с ошибкой. Она тихо отдает вам неполные записи и открытые email из форм, а тег при этом грузится до того, как посетитель нажал на баннер согласия. Вы открываете дашборд, видите данные и принимаете решения по конверсии на основе материала с дырами.
Эта статья о том, как поставить Hotjar так, чтобы записи и тепловые карты были достоверными, а сам скрипт не ронял скорость лендинга, по которому вы льете платный трафик. Установку показываю через Google Tag Manager (GTM, диспетчер тегов Google): это работает на любой системе управления сайтом, держит все теги в одном месте и дает контроль над тем, когда скрипт начинает писать.
Что изменилось после перехода Hotjar в Contentsquare
Если вы открыли инструкцию по установке двухлетней давности, половина шагов в нем уже не совпадает с тем, что вы увидите на экране. С 1 июля 2025 года Hotjar входит в Contentsquare. Аккаунт теперь заводится на стороне Contentsquare, биллинг и поддержка тоже там. Прежнюю модель из трех продуктов (Observe, Ask и Engage) Contentsquare заменил на модули с раздельной оплатой, и у каждого теперь свои тарифы Free, Growth, Pro и Enterprise.
Для установки важны три следствия. Первое: дашборд, Tracking Code (код отслеживания) и кнопка Verify Installation на месте, механика подключения не изменилась. Второе: старый плагин для WordPress после миграции устарел, поэтому корректные способы установки сейчас два - прямой код в <head> или через диспетчер тегов. Третье: уровней доступа стало четыре вместо трех, и администраторов в проекте может быть несколько. Это к делу установки прямого отношения не имеет, но объясняет, почему интерфейс отличается от старых снимков экрана.
Шаг 1. Где взять код отслеживания и Project ID
После создания проекта Hotjar выдает фрагмент JavaScript - это и есть Tracking Code (код отслеживания). Рядом с ним в интерфейсе показан Project ID: число, которое идентифицирует ваш проект. Это тот же идентификатор, что в готовом шаблоне диспетчера тегов называется Hotjar Site ID, - не пугайтесь разных названий, значение одно. Полный код нужен для прямой вставки в <head>, а Project ID - для установки через шаблон.
Важная деталь, из-за которой старые инструкции вводят в заблуждение: после перехода в Contentsquare код стал коротким и грузится с домена t.contentsquare.net, а не с прежнего static.hotjar.com. Если вы нашли инструкцию с громоздким фрагментом на пару десятков строк и переменной hjid - он устарел.
Сейчас фрагмент выглядит так:
<script src="https://t.contentsquare.net/uxa/XXXXXXXXXXXXX.js"></script>Вместо XXXXXXXXXXXXX будет идентификатор вашего проекта - копируйте код целиком кнопкой Copy, не набирайте руками.
Скрипт грузится с внешнего домена и постоянно пишет поведение посетителя, поэтому влияет на скорость страницы. Насколько это критично и как снизить влияние - в разделе про производительность ниже.
Почему диспетчер тегов, а не код в шаблон сайта
Прямая вставка в <head> работает, и для одиночного лендинга ее достаточно. Но как только сайтов больше одного, на странице уже стоят GA4, пиксель рекламной системы и еще пара скриптов, а правки в шаблон делает то один человек, то другой, прямая вставка начинает создавать проблемы.
Диспетчер тегов решает это так. Все счетчики и пиксели лежат в одном контейнере, и вы видите полный список того, что грузится на сайте. Дубли исключены: никто не вставит второй код Hotjar в другое место и не исказит данные. Перед публикацией тег можно проверить в режиме предпросмотра (Preview), не выкатывая его в продакшен. И главное для вашей аудитории - способ не зависит от системы управления сайтом. WordPress, Webflow, Tilda, самописный фронт: контейнер диспетчера тегов ставится один раз, дальше все теги добавляются единообразно.
Шаг 2. Установка тега Hotjar в диспетчере тегов
Здесь есть развилка, и выбор в ней влияет на то, кто контролирует ваш контейнер.
Рекомендуемый путь: готовый шаблон тега
При подключении Contentsquare предлагает вариант Install with Google Tag Manager, который запрашивает доступ к вашему аккаунту диспетчера тегов: сервис сам создает тег и публикует его. Звучит удобно, но вы отдаете стороннему сервису право публиковать изменения в контейнере, через который проходит вся аналитика и реклама сайта. Рекомендую так не делать: контроль над тем, что и когда выходит в продакшен, должен оставаться у вас.
Ставьте тег сами, через встроенный шаблон. Это занимает на минуту дольше и выглядит так:
- В диспетчере тегов откройте Теги и нажмите Создать.
- В блоке Конфигурация тега выберите тип Hotjar Tracking Code - это официальный шаблон, он уже есть в списке типов тегов.
- В поле Hotjar Site ID вставьте ваш Project ID из шага 1.
- В блоке Триггеры задайте триггер активации (про согласие - в шаге 3).
- Назовите тег понятно, например Hotjar Tracking, и сохраните.
Готовый шаблон удобнее вставки сырого кода: не нужно возиться с разметкой, а поля подписаны. Если по каким-то причинам шаблон недоступен, тот же результат дает тип Custom HTML с полным кодом из шага 1 - механика одна и та же.
После сохранения тег пока не работает - он остается только в черновике контейнера. Публикация будет после настройки согласия и проверки в режиме предпросмотра, об этом ниже.
Шаг 3. Согласие: тег не должен срабатывать до клика по баннеру
Это самая частая дыра в установке, и она же самая дорогая. Запись сессий и тепловые карты собирают поведение человека, а это персональные данные. По требованиям GDPR и аналогичных законов для посетителей из Европейской экономической зоны, Великобритании и Швейцарии скрипт не должен инициализироваться до того, как человек дал согласие. Если тег грузится сразу, вы собираете данные без правового основания.
В диспетчере тегов это решается без правки кода, прямо в настройках тега. В блоке настроек согласия есть три варианта, и разница между ними определяет, при каких посетителях тег вообще запустится:
- Не настроено. Тег не выполняет дополнительных проверок согласия. Вариант по умолчанию, который оставляют, когда согласием на сайте управляет отдельный механизм или его пока нет вовсе.
- Дополнительное согласие не требуется. Тег срабатывает независимо от состояния согласия. Подходит там, где требований к согласию на аналитику нет.
- Для активации тега требуется дополнительное согласие. Тег ждет явного сигнала, что посетитель согласился на выбранный тип хранения, обычно это аналитическое хранилище. Пока сигнала нет, тег физически не запускается.
Какой выбирать, зависит от географии трафика. Если среди посетителей есть аудитория из ЕЭЗ, Великобритании или Швейцарии, то однозначно третий вариант: там запись поведения без согласия недопустима. Для рынков с более мягкими требованиями формально хватает второго. Но если у вас смешанная география, не заводите два контейнера и не плодите логику: ставьте третий вариант на всех. Так вы нигде не нарушите требования, а посетители, которые могли бы и без баннера, увидят его лишний раз - это дешевле, чем разбираться с претензией по сбору данных.
Защиту здесь держит не триггер, а сама настройка согласия в теге: пока нужный сигнал не получен, тег не выстрелит. Сигнал приходит от вашего баннера через механизм Consent Mode (режим согласия): платформа управления согласием (CMP) - OneTrust, Cookiebot, Iubenda или аналог - при клике обновляет состояние, а диспетчер тегов его читает. Активировать тег можно на всех страницах; на скрине он стоит на Consent Initialization - All Pages, который просто отрабатывает раньше прочих.
Проверить настройку нужно обязательно. В режиме предпросмотра откройте сайт, не нажимая на баннер: в состоянии отказа или отсутствия выбора запросов к Contentsquare быть не должно. Если они уходят - тег не привязан к согласию, и настройку надо переделать до публикации.
Шаг 4. Маски данных: что Hotjar скрывает сам, а что упустит
Hotjar спроектирован так, чтобы по умолчанию не утаскивать ввод из полей, и этот механизм называется подавлением данных. Когда идет запись, ввод во всех полях глушится на стороне браузера: данные не доходят до серверов Hotjar. Пароли и поля с признаками платежных данных глушатся автоматически. В записи на месте символов вы увидите случайное число звездочек или единиц, причем их количество не совпадает с фактической длиной значения.
Сверх этого есть четыре типа подавления: текста на странице, отдельного элемента, геолокации и всего содержимого сразу. Текст и геолокация включаются галочкой в настройках сайта, подавление отдельного элемента требует разметки на самом сайте, а подавление всего содержимого прячет вообще все на странице - и оставляет минимум данных для анализа.
Где автоматика не справляется и где подавление чаще всего протекает:
- Динамически отрисованный контент, многошаговые формы и кастомные поля ввода могут не попасть под автоматическое подавление. На сайтах на React и подобных фреймворках подавление по умолчанию ведет себя двояко: агрессивно размывает безобидные элементы вроде выпадающих списков, но на сложной форме способно пропустить поле с email, и оно попадет в запись в открытом виде. Проверяйте такие места глазами на записи.
- Подавление, завязанное на разметку, хрупкое. После деплоя, который поменял классы или структуру, правила подавления могут перестать совпадать с элементами. Проверять стоит после каждого крупного релиза фронта.
- Настройки подавления не применяются задним числом. После того как сессия отправлена, изменить или вычистить данные в ней уже нельзя. Поэтому подавление настраивается до запуска сбора, а не после первого тревожного звонка.
Практический минимум перед запуском: пройдите все формы заявок и оплаты на записи в режиме инкогнито и убедитесь, что вместо введенного текста стоят звездочки. Если где-то виден незамаскированный ввод, добавьте подавление элемента до того, как пустите трафик.
Шаг 5. Проверка установки
После публикации контейнера откройте раздел Verify installation в проекте, введите адрес сайта, куда ставили тег, и нажмите кнопку проверки. Сервис сам определит наличие кода. Зеленая отметка и статус Receiving Data означают, что данные пошли. На определение установки уходит до десяти минут, поэтому сразу паниковать из-за статуса Not Receiving Data не стоит.
Самый быстрый способ убедиться, что все работает, - открыть сайт в окне инкогнито, покликать и поскроллить несколько страниц, пройти через форму, а затем вернуться в дашборд и посмотреть, появилась ли запись. Первая запись приходит в течение нескольких минут, тепловые карты накапливаются дольше, потому что им нужен объем.
Скрипт не бесплатный для скорости: почему это касается конверсии
Hotjar постоянно фиксирует курсор, скролл и клики, и эта работа стоит ресурсов. Скрипт добавляет вес странице и время на загрузку. На медленном мобильном соединении Hotjar дробит свои скрипты на части, чтобы снизить разовый удар, но суммарная прибавка к времени загрузки все равно заметная.
Для performance-маркетолога это не абстракция. Вы платите за клик, человек приходит на лендинг, и каждая лишняя секунда загрузки роняет конверсию. Получается абсурд: инструмент, который вы поставили, чтобы понять, почему конверсия проседает, сам же ее и подтачивает.
Что с этим делать на этапе установки:
- Грузите Hotjar через диспетчер тегов после согласия, а не синхронно первой строкой в
<head>. Тег за условием согласия не стартует у тех, кто не принял баннер, и это снимает вес с части трафика, помимо юридической чистоты. - Включите ограничение частоты сбора. Если трафик большой, нет смысла писать каждую сессию: выборка в районе десятков процентов дает ту же картину поведения дешевле по нагрузке и по лимиту плана.
- Настройте автопаузу при достижении объема, чтобы не упереться в дневной лимит сессий и не платить за лишнее.
Смысл такой: аналитика поведения не должна ухудшать ту метрику, ради которой вы ее ставите.
Делюсь практикой и разборами по performance‑маркетингуподписаться → @marataxanov
Частые ошибки при установке
Сведу в одном месте то, что чаще всего идет не так.
Дубль кода
Hotjar стоит и в диспетчере тегов, и напрямую в шаблоне сайта, оставшемся с прошлой попытки. Данные задваиваются, записи рвутся. Лечится удалением одного из экземпляров.
Тег грузится до согласия
В настройках тега не включена проверка согласия, и на проекте с европейским трафиком сбор идет без правового основания. Включить в теге вариант с обязательным согласием.
Кэш отдает старую страницу
После вставки кода система управления сайтом или CDN продолжает отдавать версию без скрипта. Сбросить кэш, проверить в инкогнито.
Подавление не проверено на форме
Понадеялись на автоматику, а на сложной форме email утек в запись. Пройти все формы руками до запуска трафика.
Что дальше
Чистая установка - это основа, без которой остальное не работает: достоверные записи, корректные тепловые карты и верные выводы о том, где у вас отваливается посетитель и сколько на самом деле стоит лид. Кривая установка дает красивый дашборд с неверными данными, а решения по ставкам и креативам стоят вам денег.
Если разбираетесь, какой инструмент поведенческой аналитики вам нужен и за что есть смысл платить, посмотрите разбор различий между Hotjar и его бесплатным конкурентом. Для тех, кто хочет начать без бюджета, рядом лежит инструкция по установке бесплатной альтернативы. А что показывают записи и карты после установки и как переводить это в гипотезы для рекламы - в материалах про чтение тепловых карт и анализ сессий.
Частые вопросы
Нужен ли разработчик, чтобы поставить Hotjar?
Нет. Установка через диспетчер тегов делается без правки кода сайта: вы добавляете один тег в контейнер и публикуете. Разработчик понадобится разве что для тонкой настройки подавления данных на нестандартных формах.
Hotjar и Contentsquare - это теперь одно и то же?
Hotjar входит в Contentsquare с июля 2025 года и остается отдельным продуктом для малого и среднего бизнеса. Аккаунт и биллинг идут через Contentsquare, но инструменты Hotjar - записи, тепловые карты, опросы - работают как прежде.
Можно ли ставить Hotjar без баннера согласия?
Для посетителей из ЕС, Великобритании и Швейцарии запись сессий требует согласия, поэтому тег привязывается к сигналу от баннера. Без европейского трафика требования мягче, но привязку к согласию удобнее держать единой для всех рынков.
Через сколько появятся данные?
Записи начинают поступать почти сразу, в пределах пары минут после установки. Тепловые карты появляются позже: им нужен накопленный объем сессий. Статус Receiving Data в дашборде подтверждается до десяти минут.
Hotjar замедлит мой сайт?
Скрипт добавляет вес и время загрузки, потому что непрерывно пишет поведение посетителя. Влияние снижается, если не грузить его на тех, кто отказался от баннера, проредить запись выборкой и поставить автопаузу на лимите.
Что выбрать, прямой код или диспетчер тегов?
Для одиночного лендинга хватит прямого кода в <head>. Как только сайтов и скриптов становится больше, диспетчер тегов удобнее: один контейнер, нет дублей, проверка перед публикацией и единый способ установки независимо от системы управления сайтом.
