Маркетинговый аудит пяти лендингов «Внедрение amoCRM»

Пять страниц собраны по одной структуре (11 блоков + шапка + модалка), после сборки прогнаны как маркетолог по 12 метрикам. Ниже: что нашёл, что уже исправлено в коде, что остаётся на вашей стороне.

---

1. Ясность оффера · «пятисекундный тест»

Было. Заголовок отвечает на «что» и «какая гарантия», но не отвечает на «за сколько» — человек уходит искать цену и часто не возвращается. Плюс срок «5 дней» без уточнения читается как маркетинговое преувеличение и подрывает доверие ко всему остальному.

Исправлено. Под первым CTA во всех пяти лендингах добавлен микротекст:

Пакеты от 90 000 ₽ · Созвон на 15 минут ни к чему не обязывает 5 рабочих дней — с момента, когда получили доступы и заполненный бриф

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

Осталось. Добавить в подзаголовок сегмент («для отделов продаж от 3 до 25 человек»), когда определитесь с приоритетным сегментом — сейчас страница говорит со всеми сразу.

---

2. Трение формы · главный источник потерь конверсии

Было. В модалке было три обязательных поля: ФИО, телефон и email. Для заявки на созвон это избыточно: телефон отпугивает часть аудитории, email — другую, и оба обязательных поля вместе бьют по конверсии сильнее всего остального на странице.

Исправлено. Обязательны теперь имя + любой один канал связи (телефон, Telegram или почта):

• сняты required с телефона и email, убраны звёздочки у меток;
• валидация переписана: проверяется наличие хотя бы одного контакта, формат проверяется

только у заполненных полей;

• под полями появилась подсказка: «Достаточно одного способа связи — телефон, Telegram или почта».

Это самая дорогая правка из всего списка и самая дешёвая в реализации.

Осталось. После накопления статистики проверить А/Б-тестом, нужен ли вообще шаг «Проверьте заказ» — он повышает качество данных, но добавляет один клик до отправки.

---

3. Прозрачность цены · возражение «а сколько в итоге»

Было. В блоке пакетов указана только стоимость работ. Вопрос «а лицензии amoCRM входят?» разбирался в FAQ — то есть ниже точки принятия решения. Человек, который увидел цену и не понял, полная она или нет, уходит.

Исправлено. Прямо под сеткой пакетов, до кнопок «Подробнее», добавлен блок:

Указана стоимость нашей работы по внедрению. Лицензии amoCRM оплачиваются отдельно и зависят от тарифа и числа пользователей — посчитаем обе суммы на созвоне.

Честность в точке решения работает на конверсию лучше, чем умолчание.

---

4. Снятие возражений рядом с действием

Было. «Созвон ни к чему не обязывает» стояло только в финальном блоке — то есть после того, как человек уже проскроллил всю страницу и, скорее всего, решение уже принял.

Исправлено. Формулировка перенесена к первому экрану (см. п. 1) и продублирована в финале. В модалке оставлен дисклеймер «Нажимая кнопку, вы не соглашаетесь ни на какие платежи».

---

5. Гарантия как механика, а не как лозунг

Было. Обещание «вернём 100% предоплаты» повторяется, но не объясняется — а необъяснённая гарантия читается как реклама и не работает.

Исправлено. Гарантия разобрана как процедура в четырёх местах:

• отдельный акцентный шаг 6 в блоке «Как проходит внедрение» — во всех пяти лендингах;
• отдельный вопрос в FAQ с формулировкой условия;
• в лендинге 03 «Гарантия» — sticky-карточка с четырьмя шагами процедуры приёмки;
• везде добавлено, что условие фиксируется в договоре, а аккаунт остаётся у клиента.

---

6. Измеримость · без неё нельзя оптимизировать

Было. Событий аналитики не было вообще. Оптимизировать нечего, потому что нечего мерить.

Исправлено. В app.js каждого лендинга добавлен слой track(), который пишет в window.dataLayer и, если подключена Метрика, вызывает ym(..., 'reachGoal', ...):

У каждой кнопки проставлен атрибут data-src с названием блока — в отчёте сразу видно, какой CTA приносит заявки, а какой стоит зря.

Осталось. Подставить ID счётчика (window.YM_ID) и подключить GTM-контейнер.

---

7. SEO и сниппет в выдаче

Было. Ни микроразметки, ни описания, ни Open Graph.

Исправлено. Во все пять страниц добавлены:

• <title> и description — разные под каждый лендинг, с ключевым обещанием и сроком;
• Open Graph — чтобы ссылка в мессенджере не выглядела голой;
• JSON-LD: Organization (с ИНН/ОГРН), Service с тремя Offer и ценами,

FAQPage со всеми восемью вопросами.

FAQPage — самое ценное: даёт расширенный сниппет и заметно поднимает CTR из поиска.

---

8. Скорость загрузки · LCP

Было. Папка изображений весила 5,4 МБ, три файла — больше 900 КБ каждый, скриншот дашборда в первом экране — 2880 px по ширине.

Исправлено.

• крупные изображения уменьшены до разумного разрешения (1500–2000 px);
• непрозрачные PNG переведены в JPEG (lead-form-light, excel-to-crm-light);
• удалены неиспользуемые плитки логотипов;
• итог: 5,4 МБ → 3,0 МБ без видимой потери качества;
• всем <img> проставлены width/height (нет скачков вёрстки, CLS около нуля),

loading="lazy" ниже первого экрана и fetchpriority="high" на LCP-картинке;

• видео в лендинге 04 грузится только когда блок реально попал в зону видимости.

Осталось. Пережать видео (assets/video/ — 65 МБ) и отдать WebP/AVIF-версии изображений через <picture>, если будете хостить на своём сервере.

---

9. Иерархия CTA

Было. Все кнопки были визуально одинаковые — глаз не понимал, куда идти.

Исправлено. Введены три уровня: основной («Выбрать пакет» — заливка), вторичный («Как это работает» — контур), третий («Задать вопрос» — тихая кнопка). Кнопка «Задать вопрос» открывает отдельный режим модалки со своим заголовком, дисклеймером про партнёров и своим экраном успеха — это не то же самое, что заявка на внедрение, и смешивать их в отчёте нельзя.

---

10. Мобильная конверсия

• Sticky-панель внизу экрана с оффером и кнопкой — появляется после первого экрана,

чтобы не мешать чтению.

• Модалка на мобильных открывается как bottom-sheet.
• Маска телефона, inputmode="tel", autocomplete — заполнение в одно касание.
• Таблицы (ltable, cmp__table) на узких экранах перестраиваются в карточки

или получают горизонтальную прокрутку внутри своего контейнера — страница по горизонтали не едет.

---

11. Доступность

Проверено и исправлено: у всех <img> есть alt (у декоративных — пустой), у полей — <label for>, у модалки — role="dialog", aria-modal, ловушка фокуса и закрытие по Esc, у каруселей — управление стрелками с клавиатуры, у ссылок и кнопок — видимый :focus-visible, на странице есть skip-link. Учтён prefers-reduced-motion — все анимации отключаются.

Это не только про доступность: корректная семантика напрямую влияет на то, как страницу разбирают поисковики.

---

12. Что осталось на вашей стороне — обязательно перед запуском

1. Кейсы (блок 7) — сейчас демонстрационные. Названия клиентов и цифры вымышленные.

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

1. Цены и состав пакетов приведены как рабочий пример — сверьте с вашим прайсом.
2. Ссылки на оферту и политику конфиденциальности — сейчас заглушки (data-doc).

Без работающей политики форма сбора персональных данных не соответствует 152-ФЗ.

1. Отправка формы — в app.js стоит имитация с задержкой. Подключите свой endpoint

в обработчике кнопки «Отправить» (место помечено комментарием ▸).

1. Строка «Свободны 3 слота» в лендинге 02 — если это не соответствует

действительности, уберите. Ложная срочность даёт краткосрочный прирост и долгосрочную потерю доверия.

1. Счётчики аналитики — подставить ID.

---

13. Второй проход: качество визуала

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

Первый экран был пустым при загрузке. Весь hero ждал IntersectionObserver, то есть появлялся только после того, как отработает JS. Пользователь первые доли секунды видел пустую страницу — это бьёт и по LCP, и по ощущению «сайт не загрузился». Теперь hero анимируется чистым CSS сразу при отрисовке, а класс js на <html> гарантирует, что без JavaScript вся страница просто видна целиком, а не остаётся невидимой.

Скриншоты были кадрированы как попало. У каждой карточки была своя логика: где-то картинка на всю ширину, где-то с полями, где-то на тёмной подложке, где-то на светлой. В ряду карточки не выравнивались. Введён единый компонент .shotbox: фиксированное соотношение 16:10, object-fit: cover, общая рамка, тень и подсветка края. Три модификатора закрывают исключения: --dark для прозрачных PNG со светлым содержимым, --fit для панорамных полос (3:1 и шире), которые нельзя кропить, --icon для знаков.

Нигде не было иконок. Это главный признак «сырой» вёрстки: сплошной текст без визуальных опор. Собран общий SVG-спрайт на 18 иконок (assets/icons.js), он вставляется в страницу одним скриптом и используется во всех пяти лендингах — в девяти шагах настройки, семи шагах внедрения, преимуществах и кейсах.

Кейсы выглядели как заглушка — цветной градиент с инициалами клиента. Полностью переделаны: главный элемент теперь метрика (34 → 19 дней, 4 ч → 12 мин, +40%), под ней шкала-индикатор, отрасль с иконкой, подпись клиента и факт. Каждый кейс получил свой акцентный цвет из фирменной палитры вместо радужных градиентов.

Заголовок первого экрана ломался на пять строк и занимал весь экран, вытесняя кнопки за сгиб. Уменьшен кегль, ограничена длина строки (max-width: 16ch), пропорции колонок пересобраны. Скриншот в hero получил рамку окна браузера и мягкое затухание снизу — теперь кадр читается как окно, а не как обрезанная картинка.

Дополнительно: видео-демо в лендинге 04 больше не показывает серый прямоугольник до загрузки — под ним постер; сцены в том же лендинге переведены с фиксированной высоты на соотношение сторон, из-за чего изображения перестали «тонуть» в пустых полях.

---

Как выбрать лендинг под задачу

Рекомендация: запускать А/Б-тестом 03 против 01 на холодном трафике — это самая контрастная пара по механике убеждения. 05 держать как посадочную для писем и для отправки внутрь компании клиента.