Карты конверсий в Microsoft Clarity для интернет-магазина

Обычная тепловая карта показывает, где на странице кликают, докуда докручивают и на чем держат внимание. Но клик и покупка - разные события. Кнопка может собирать тысячи касаний и не приносить ни одного заказа. А неприметный блок с условиями доставки - стоять на пути почти каждого, кто доходит до оплаты. Чтобы увидеть эту разницу, в Clarity есть отдельный тип карты - карта конверсий (Conversion Heatmap).

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

Чем карта конверсий отличается от обычной тепловой карты

Обычные карты отвечают на вопрос «где». Где кликают - карта кликов. Докуда докручивают - карта прокрутки. На чем держат курсор и взгляд - карты области и внимания. Полезно, но на этом анализ часто застревает: видно, что элемент популярен, и неясно, помогает ли он продавать. Высокая активность на карте кликов сама по себе не говорит ничего о выручке.

Карта конверсий отвечает на другой вопрос - какой клик ведет к покупке. Поверх страницы Clarity показывает для каждого элемента долю сессий, в которых клик по нему закончился заказом. Метрика тут другая: доля покупок среди тех, кто кликнул по элементу, а число нажатий уходит на второй план.

Разбор Clarity дает наглядный пример: фото товара на карточке набирает 2,4% конверсии. Это значит, что 2,4% сессий, где кликнули по фото, завершились покупкой. Рядом может стоять яркая кнопка с втрое большим числом кликов и конверсией ниже. И тогда вопрос смещается: разбираться надо не с тем, почему по кнопке мало нажимают, а с тем, почему эти нажатия не доходят до кассы.

На карте конверсий по элементу два показателя. Первый - процент конверсии: доля кликнувших, кто купил. Второй - вклад в выручку: с какими элементами связаны более дорогие заказы. Бывает, что блок дает среднюю по странице конверсию, но люди, кликнувшие по нему, оставляют больший чек. Такой элемент недооценивают, если смотреть только на число касаний.

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

Так фокус уходит с вопроса «где люди кликают» на вопрос «что приносит продажи». Дальше - как эту карту включить и где на ней искать утечку.

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

Как включить карты конверсий в Clarity

Карта конверсий привязана к событию покупки. Чтобы Clarity понимал, какие сессии считать конверсионными, ему нужно передать это событие. Проще всего это решается на Shopify.

У Clarity есть собственное приложение в Shopify App Store - установка в один клик, без правки кода темы. После подключения работают умные события (Smart Events): Clarity сам отслеживает просмотр товара, добавление в корзину и оформление заказа, отдельную разметку настраивать не нужно. Как подключить Clarity к сайту и связать его с GA4, разобрано в статье про установку Clarity.

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

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

Через совместимость с Shopify Pixel карта дотягивается до шагов оформления и до страницы благодарности. Видно, как ведут себя покупатели при оформлении заказа и после оплаты - там, куда обычная веб-аналитика часто не достает. На тарифах Shopify Plus покрытие оформления полнее: новая модель оформления заказа в Shopify пускает сторонние скрипты в оформление заказа только через пиксель, и нативная интеграция Clarity это закрывает.

Если магазин не на Shopify, событие конверсии задается через API: вызов clarity('set', 'conversion', 'true') помечает нужное действие как конверсионное. Это работает не только для покупки, но и для заявки, регистрации, любого целевого шага. Карту конверсий можно собрать и на лендинге услуги, не только в товарном магазине. Установить вызов удобно через Google Tag Manager на триггере нужного события: на отправку формы заявки или на загрузку страницы благодарности после оплаты. Триггер должен срабатывать ровно на целевом действии, иначе процент конверсии раздуется ложными событиями.

Открывается карта во вкладке Heatmaps - там переключается режим Conversion Heatmap, и поверх страницы появляются проценты конверсии по элементам.

Карта строится по одной странице за выбранный период. Период берут такой, чтобы в нем набрались заказы: для магазина с десятком продаж в день хватает недели, для редких дорогих товаров - месяц и больше. Страницу выбирают по шаблону: одна карта на тип карточки товара, не на каждый URL отдельно, иначе данные размажутся по сотням страниц с парой заказов на каждой.

Где на товарной странице теряется клик

На карте конверсий товарной страницы интересны не самые горячие точки, а расхождения между активностью и отдачей. Три типичные ситуации.

Первая: высокий клик, низкая конверсия. По элементу активно нажимают, а до заказа доходят единицы. Частый виновник - фото товара, которое открывает галерею вместо добавления в корзину, или вкладка с описанием, уводящая внимание от кнопки покупки. Карта кликов показала бы тут жаркую точку и поставила галочку «работает». Карта конверсий показывает, что точка собирает клики и роняет продажу. Лечится перестановкой: фото оставить кликабельным для увеличения, но рядом держать активную кнопку покупки, чтобы намерение не утекало в галерею.

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

Третья: клики мимо интерактива. Покупатели жмут на статичный текст или картинку, приняв их за ссылку. На карте конверсий это видно как касания без отдачи - элемент не кликабельный, но люди ждут от него действия. Сигнал переделать блок в рабочую ссылку или кнопку.

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

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

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

Когда карта показала проблемную зону, дальше работают записи. Из конкретного элемента карты открывается подборка сессий «View Recordings» - те визиты, где по этой зоне кликали. Видно поведение в контексте: замешательство, повторные клики, уход со страницы. Разбор записей сессий - отдельная методика, но запускать его удобно от точки на карте, а не наугад из общего списка.

Если элементы сгруппированы - галерея, блок вариаций, набор иконок оплаты - помогает ручная разметка зон Edit Areas. Несколько мелких элементов объединяются в одну область, и Clarity считает конверсию по ней целиком, а не дробит на отдельные пиксели.

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

Оформление заказа и страница благодарности: куда утекает оформленный заказ

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

При оформлении заказа карта конверсий показывает, по каким элементам кликают перед уходом: поле промокода, выбор доставки, иконка корзины, ссылка «продолжить покупки». Если перед обрывом массово открывают калькулятор доставки - проблема в неожиданной стоимости или сроках. Если жмут на пустое поле скидки - ждут промокод, которого на странице нет, и уходят искать его на стороне. Для магазина электроники в Узбекистане частой утечкой оказывается поле промокода: оно само подсказывает, что покупатель платит «не по акции».

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

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

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

Карты конверсий и цифры дохода: где граница инструмента

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

У Clarity есть прямая связка с GA4: из сегмента в GA4 переходят к записям Clarity по этому же сегменту. Цифру-провал из GA4 - упала конверсия товарной страницы - разбирают тогда на конкретных сессиях и на карте конверсий этой страницы, без догадок.

Стоит держать в уме границу инструмента. Из Clarity нельзя выгрузить сырые данные карты - массового экспорта и открытого API под выгрузку нет. На руках остаются ссылки на записи и скриншоты карты. Для разовой оптимизации страницы этого хватает. Для регулярной выгрузки в свое хранилище данных или сборки сводного отчета - нет, тут нужен GA4 или Метрика.

От карты к стоимости заявки

Для performance-маркетолога карта конверсий - прямой рычаг на стоимость заявки. Трафик на товарную страницу стоит денег: клик из Google Ads или таргета оплачен. Если на странице есть элемент, который собирает клики и роняет конверсию, оплаченный трафик утекает на нем. Простая арифметика: клик стоит $0,5, конверсия страницы 1% - заявка обходится в $50. Поднять конверсию до 1,5%, убрав утечку с карты, - и заявка стоит уже $33 при том же бюджете. Это дешевле, чем доливать трафик в дырявую страницу.

То же самое в заказах и деньгах. Магазин льет $1000 в месяц на товарную страницу, клик стоит $0,5 - это 2000 визитов. При конверсии 1% выходит 20 заказов. Карта показала, что вкладка с описанием перехватывает клики у кнопки покупки; вкладку убрали в аккордеон под кнопкой - конверсия выросла до 1,4%. Те же 2000 визитов дают уже 28 заказов, восемь сверху без доллара доплаты за трафик. При среднем чеке $120 это $960 дополнительной выручки в месяц на одной правке, которую подсказала карта. Этот же расчет работает в обратную сторону: страница, которую не трогали полгода, тихо съедает часть оплаченных кликов на одном неудачном элементе.

Порядок такой отдачи виден на разборах. В одном разборе магазина на Shopify правки товарной страницы по карте конверсий подняли конверсию с 1,13% до 1,9%, а средний чек - со $115 до $140. Бюджет на трафик при этом не вырос: тот же поток посетителей стал приносить больше заказов и больше денег с заказа.

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

Цифры в расчетах выше - иллюстративные, для наглядности механики.

Карта показывает связь, не причину

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

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

Коротко

• Обычная карта показывает, где кликают; карта конверсий - какой клик доходит до покупки. Проценты конверсии стоят поверх каждого элемента страницы.
• На Shopify карта включается за клик через приложение Clarity, умные события ловят просмотр, корзину и заказ сами. Вне Shopify событие задается через clarity('set', 'conversion', 'true') и работает для заявки или регистрации тоже.
• На товарной странице ищите расхождения: высокий клик с низкой конверсией - кандидат на правку. Из точки карты открываются записи сессий с этим элементом.
• Оформление заказа и страница благодарности - самые дорогие потери; карта показывает, по чему кликают перед уходом и доходят ли до допродажи.
• Деньги и выручку смотрите в GA4, элемент-утечку - на карте Clarity. Сырые данные карты выгрузить нельзя.

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

Карта конверсий в Clarity платная?

Нет. Clarity бесплатен целиком, карта конверсий входит в общий набор без отдельной оплаты и без лимита на трафик.

Нужен ли Shopify, чтобы пользоваться картой конверсий?

Нет. На Shopify проще всего: событие покупки подхватывается само через умные события. На любом другом сайте конверсия задается через API вызовом clarity('set', 'conversion', 'true'), и картой можно мерить не только покупку, но и заявку или регистрацию.

Чем карта конверсий отличается от отчета электронной коммерции в GA4?

GA4 отвечает на вопрос «сколько»: выручка, средний чек, доход по кампании. Карта Clarity отвечает на вопрос «где»: какой элемент страницы помогает или мешает покупке. Их используют вместе, а не вместо друг друга.

Карта конверсий работает на странице оформления заказа?

Да. Карта дотягивается до оформления заказа и страницы благодарности через пиксель Shopify. На Shopify Plus покрытие оформления полнее из-за модели checkout extensibility.

Можно ли выгрузить данные карты в Excel или BI-систему?

Нет. Массового экспорта и открытого API под выгрузку сырых данных у Clarity нет. Доступны ссылки на записи и скриншоты карты.

Карта конверсий заменяет анализ воронки?

Нет. Карта показывает срез по одной странице - по каким элементам кликают. Воронка показывает последовательность шагов и где между ними теряются люди. Это разные срезы, их читают вместе.