Как установить Microsoft Clarity на сайт

Microsoft Clarity ставится за пять-десять минут и не стоит ничего: тепловые карты, записи сессий, сигналы фрустрации и AI-инсайты доступны без лимита трафика и без платных тарифов. По духу это похоже на Яндекс Вебвизор, только инструмент принадлежит Microsoft, дает больше контроля над приватностью и работает на любом рынке.

Установка простая, но в ней есть два места, где новички теряют данные или собирают лишнее: режим маскирования и согласие посетителей. Один шаг маркетологи зря пропускают - привязку к Google Analytics 4. Без нее Clarity остается отдельным инструментом «посмотреть записи», а со связкой поведение садится на каналы трафика и начинает отвечать на вопрос, почему платный трафик не приносит конверсий.

Если вы еще выбираете инструмент и не уверены, подходит ли Clarity под ваши задачи, я разобрал возможности и ограничения в обзоре Clarity. Здесь - только установка.

Регистрация и создание проекта: с чего начать

Запуск Clarity сводится к трем действиям: регистрация, создание проекта и установка кода отслеживания. Первые два разберем здесь, выбор способа установки - в следующих двух разделах.

Регистрироваться можно через аккаунт Microsoft, Google или Facebook. Выбирайте Google, и вот почему: на этом же аккаунте обычно лежит и Google Analytics, и тогда связка Clarity с GA4 подключится в один клик. Если зайти через Microsoft, привязку GA4 придется проходить через отдельную авторизацию Google позже.

Дальше создаете проект. Clarity попросит три обязательных поля: название, адрес сайта и отрасль. От отрасли зависит, какие подсказки по анализу инструмент покажет потом, так что выбирайте по факту, а не наугад. Тут же выберите часовой пояс, чтобы отчеты совпадали с рабочими часами команды, а не с UTC.

Два правила по проектам, которые экономят нервы:

Один проект - один домен

В отличие от GA4, где в одно свойство можно свести несколько сайтов, Clarity не разрешает смешивать разные домены в одном проекте. Для второго сайта заводите отдельный проект.

Чувствительные отрасли под запретом

Clarity нельзя ставить на сайты с медицинскими, финансовыми и государственными данными. Для проектов в чувствительных отраслях инструмент потребует подтвердить соответствие законам о данных, а часть таких сценариев запрещена правилами сервиса. Отдельно: Clarity не предназначен для сайтов с аудиторией младше 18 лет.

Код отслеживания и Project ID лежат в двух местах. Сразу после создания проекта появляется карточка «Install manually» с кнопкой «Get tracking code» - это готовый скрипт. Если код понадобится позже, он всегда доступен в Settings - Setup. Сам Project ID (короткий идентификатор вида abc123xyz) виден в Settings - Overview, он нужен для интеграций через CMS и диспетчер тегов.

Делюсь практикой и разборами по performance‑маркетингу
подписаться → @marataxanov

Способ 1. Код в раздел head вручную

Базовый способ, который Microsoft рекомендует по умолчанию, - вставить скрипт в раздел head вашего сайта. Код выглядит так:

<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "ВАШ_PROJECT_ID");
</script>

Вставлять нужно внутрь раздела head, ближе к закрывающему тегу. Скрипт грузится асинхронно (async=1), то есть не блокирует отрисовку страницы и не тормозит ее. Это плюс для тех, кто следит за скоростью: Clarity грузится быстрее, чем скрипт Hotjar, и держит большой объем трафика без заметного влияния на сайт.

Почему вручную в head, а не плагином, если плагин проще? Прямая вставка в шаблон надежнее: плагины добавляют свою прослойку, у некоторых платформ они подгружают код позже первого экрана, и часть ранних взаимодействий теряется. Если у вас есть доступ к шаблону и вы следите за скоростью, прямой код - лучший вариант.

После установки записи сессий появляются почти сразу, а тепловые карты и сводные отчеты - через пару часов, когда наберется первый трафик.

Способ 2. Через CMS и диспетчер тегов

Если доступа к шаблону нет или вы не хотите трогать код руками, у Clarity есть готовые интеграции под популярные платформы. В разделе установки нажмите «View all platforms» - там Shopify, WordPress, Wix, Webflow, BigCommerce и другие. Для каждой платформы Clarity показывает свою короткую инструкцию: где-то это официальное приложение из магазина, где-то плагин или вставка в блок пользовательского кода.

Через Google Tag Manager (GTM) ставить чуть дольше, но способ удобен тем, у кого уже настроен диспетчер тегов и баннер согласия. Clarity сам определяет наличие GTM в аккаунте и предлагает подключиться кнопкой «Finish setup»: выбираете аккаунт и контейнер, дальше «Create and publish», тег создается автоматически. Есть и второй путь - собрать тег руками.

Ручная сборка тега выглядит так. Тип тега - «Пользовательский HTML», внутрь вставляете тот же код Clarity, что и для ручной установки. Триггер - All Pages (просмотр всех страниц).

В настройках активации выберите «Один раз на страницу», чтобы скрипт не задвоился, если на странице сработает несколько событий.

Главное отличие от ручной установки - блок «Настройки согласия». Если у вас есть европейский трафик и баннер согласия, в этом блоке выберите «Для активации тега требуется дополнительное согласие» и впишите тип analytics_storage. Тогда тег Clarity сработает только после того, как посетитель примет аналитические куки. Эта настройка работает поверх вашей модели согласия в контейнере: чтобы она срабатывала, в GTM должна быть настроена передача состояния согласия от баннера или CMP. Без этого тег с проверкой согласия не запустится никогда, и данных не будет - частая причина «поставил Clarity через GTM, а сессий нет».

Важно не задвоить установку: код Clarity должен стоять либо в head напрямую, либо через GTM, но не одновременно. Иначе сессии запишутся дважды и данные перекосятся.

Для проектов на React, Next.js или Flutter у Clarity есть пакеты в NPM и мобильный SDK: код инициализируется на стороне клиента с вашим Project ID.

Привязка к Google Analytics 4: шаг, который пропускают

Вот здесь установка Clarity для маркетолога отличается от установки для дизайнера. Дизайнеру достаточно тепловых карт и записей. Маркетологу нужно понимать, как поведение связано с источником трафика и рекламной кампанией, - это и есть разница между «сколько» и «почему», с которой я начинал разбор поведенческой аналитики. А дает эту связку только GA4.

Подключается она в Settings - Setup - Google Analytics integration - Get Started. Дальше авторизуетесь через Google и выберете свойство GA4. Если вы регистрировались в Clarity через Google-аккаунт, на котором лежит аналитика, шаг занимает несколько секунд. Данные в связке появляются в течение пары часов.

Что это дает на практике. Внутри Clarity появляется вкладка с дашбордом Google Analytics: обзор аудитории, отчет по каналам привлечения, популярные страницы, сессии по странам и устройствам. И отсюда можно проваливаться в записи и карты по нужному срезу. Открыли отчет по каналам, увидели платный трафик, нажали на конкретную страницу - и смотрите тепловую карту и записи по тем, кто пришел с рекламы.

Связка двусторонняя. В GA4 появляется параметр Clarity Playback URL: из отчета аналитики можно перейти к конкретной записи сессии. А UTM-метки из ваших кампаний подтягиваются в Clarity, и записи фильтруются по источнику.

Для performance-маркетолога это снимает главную боль: больше не нужно гадать, почему канал проседает. Цифры по каналу лежат в GA4 (сколько сессий, какая конверсия), а Clarity показывает поведение этих же людей (где застряли, куда не доскроллили, по чему кликали впустую). Количественное и качественное в одном окне.

Режимы маскирования: что Clarity скрывает по умолчанию

Clarity записывает экран пользователя, поэтому вопрос приватности встроен в установку, а не добавляется потом. По умолчанию инструмент маскирует чувствительные данные сам: содержимое полей ввода и выпадающих списков не пишется ни в одном режиме, а в режиме по умолчанию закрываются еще цифровые и контактные данные.

Режимов маскирования три:

Balanced - режим по умолчанию

Clarity маскирует то, что считает чувствительным: числа и адреса электронной почты. Остальной текст и структура страницы остаются видимыми. Подходит большинству сайтов.

Strict - закрыто все

Маскирует весь контент страницы. Запись превращается в схему интерфейса без читаемого содержимого. Берите, если работаете с персональными данными и хотите перестраховаться.

Relaxed - открыто почти все

Контент не маскируется, запись самая детальная. Но поля ввода и выпадающие списки Clarity закрывает в любом режиме, включая этот, и отключить это нельзя. За остальными чувствительными зонами придется следить вручную через маскирование по элементам.

Режим переключается в Settings - Masking. Выбранный режим Clarity подтверждает сообщением «Masking mode set» вверху страницы. Изменения применяются только к новым записям и подтягиваются в течение часа - задним числом маскирование не работает. Для точечного контроля есть маскирование по элементам через CSS-селектор: можно закрыть конкретное поле, не переключая весь режим на строгий.

Отдельно настройте блокировку по IP - добавьте адреса своей команды, чтобы внутренние заходы не засоряли записи и карты. Иначе первые недели данные будут перекошены вашими же тестовыми визитами.

Честный момент: автоматическое маскирование закрывает стандартные поля, но нестандартную форму с непривычной разметкой может пропустить. После установки откройте любую форму на сайте, оформите тестовый заход и проверьте в записи, что введенные данные скрыты.

Согласие посетителей из ЕС: что изменилось в октябре 2025

С 31 октября 2025 Clarity требует валидный сигнал согласия для посетителей из Европейской экономической зоны, Великобритании и Швейцарии. Без согласия данные по этим посетителям не собираются - это требование под GDPR и аналогичные законы.

Если ваша аудитория в основном из СНГ, ОАЭ или других регионов вне ЕС, жесткого требования нет, но баннер согласия все равно остается хорошей практикой и страховкой на случай европейского трафика.

Передать согласие Clarity можно двумя путями.

Через Consent API

Командой clarity('consent', true) после того, как пользователь принял аналитические куки, и clarity('consent', false), если отказался. Во втором случае работает режим без куки: Clarity продолжает собирать обезличенные агрегированные данные, но не ставит идентификаторы.

Через платформу управления согласием (CMP)

Cookiebot, Usercentrics, CookieYes и подобные имеют готовую интеграцию с Clarity и сами передают сигнал. Если ставите согласие через диспетчер тегов, тег Clarity вешается на триггер обновления статуса согласия, чтобы срабатывать только после клика по баннеру.

Clarity ставит два первых куки с префиксом _cl (идентификатор пользователя и сессии). Проверить связку с согласием просто: до клика по баннеру в консоли браузера этих куки быть не должно, после согласия - появляются.

Проверка установки: первая запись появляется сразу

Не ждите сутки, чтобы убедиться, что код работает. Clarity показывает текущие сессии сразу.

Откройте свой сайт в режиме инкогнито, покликайте и поскролльте пару страниц, вернитесь в дашборд Clarity. Первая запись появляется почти мгновенно - это и есть подтверждение, что код установлен верно. Рядом дашборд показывает число посетителей онлайн.

Технический способ проверки: откройте инструменты разработчика и перейдите на вкладку Network. Покликайте по сайту - и увидите POST-запросы на адрес clarity.ms/collect. Запросы идут - код работает.

Если ставили через CMS, многие плагины показывают статус вроде «successfully installed». Полные отчеты и тепловые карты подтянутся от двух часов до суток, когда наберется трафик, - это нормальная задержка обработки, а не ошибка установки.

Частые ошибки при установке

Код вставлен в body, а не в head

Скрипт может сработать, но часть ранних взаимодействий потеряется. Место установки - раздел head.

Один проект на два домена или два проекта на один домен

Clarity не сводит разные домены в один проект, а дублирование кода с разных проектов на одной странице путает данные. Одна страница - один Project ID.

Забыли согласие для европейского трафика

После 31 октября 2025 по таким посетителям данные просто не идут, и можно решить, что код не работает, хотя дело в согласии.

Маскирование не проверено на формах

Стандартные поля закрываются автоматически, нестандартные - нет. Проверьте тестовым заходом до того, как пойдет трафик.

Ждете тепловые карты сразу

Записи появляются быстро, а картам нужен объем трафика: на странице с низкой посещаемостью карта наберется за несколько дней, не за час.

Что дальше

Clarity закрывает базу поведенческой аналитики бесплатно, но честно про границы: в нем нет опросов и форм обратной связи, а записи хранятся 30 дней против 365 у Hotjar. Если вам нужны опросы на сайте или длинная история записей, имеет смысл смотреть в сторону платного инструмента - разбор установки Hotjar у меня в соседней статье кластера.

Если же базы Clarity хватает, следующий шаг после установки - научиться читать собранные данные: записи сессий, тепловые карты и сигналы фрустрации вроде rage-кликов и быстрых возвратов. Эти методы разбираются в отдельных статьях кластера, они не зависят от инструмента: одинаково работают и для Clarity, и для Hotjar.

Частые вопросы

Clarity правда бесплатный, без подвоха с лимитами?

Да. Нет платных тарифов, нет лимита трафика, не нужна карта для регистрации. Microsoft взамен получает обезличенные данные о поведении в интернете - это и есть бизнес-модель.

Clarity замедлит сайт?

Нет заметного влияния. Скрипт грузится асинхронно и не блокирует отрисовку страницы. По скорости загрузки он легче, чем Hotjar.

Обязательно ставить через Google Tag Manager?

Нет. Базовый способ - код в раздел head напрямую. Диспетчер тегов удобен, если вы уже им пользуетесь, но ставить его только ради Clarity смысла нет.

Это то же самое, что Яндекс Вебвизор?

Идея похожа - запись поведения посетителей. Но Clarity бесплатный без лимитов, маскирует данные тоньше и интегрируется с Google Analytics 4.

Сколько ждать первые данные?

Записи сессий - почти сразу. Тепловые карты и сводные отчеты - от двух часов до суток, по мере накопления трафика.

Работает ли Clarity на одностраничнике или SPA?

Да. Clarity отслеживает изменения в DOM, поэтому ловит поведение и на одностраничных сайтах, и на лендингах без перезагрузки страниц.