Всплывающие окна на сайте: как сделать правильно, чтобы росли заявки

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

Поисковики тоже на это смотрят. Google давно понижает в мобильной выдаче страницы с навязчивыми интерстициалами, то есть окнами, которые закрывают контент сразу после входа. Влияют ли всплывающие окна на SEO? Да, если окно блокирует страницу с первой секунды. Обычное окно, которое не мешает чтению, поисковикам обычно не мешает. А вот страницы с такими окнами часто получают рост доли отказов, и трафик с заявками падает незаметно.

Что такое всплывающее окно и зачем оно нужно бизнесу

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

Зачем это бизнесу? Обычно нужна одна вещь: собрать контакт, получить подписчика на рассылку, дать скидку или провести опрос. Что предложить? Один понятный призыв, который совпадает с тем, зачем человек пришел. Тому, кто только знакомится с темой, подойдет подписка или полезный материал. Тому, кто уже выбирает товар, подойдут скидка или консультация.

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

Есть и обратная сторона. Coalition for Better Ads относит к неудовлетворительным форматам всплывающие окна на десктопе и мобильном вебе, а Яндекс Браузер блокирует окна, которые появляются в ответ на попытку закрыть рекламу. Такие ошибки действуют негативно: окно раздражает человека, а браузер может его вовсе не показать. Исключение - cookie-уведомление. Google не считает его навязчивым интерстициалом, если оно не перекрывает основной контент.

Смотрите на результаты, а не на ощущения: сколько человек увидели окно, сколько оставили контакт и сколько потом стали клиентами. Если окно не работает, сначала проверьте цель и предложение. Дизайн на этом этапе вторичен.

Виды всплывающих окон по триггеру и формату

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

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

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

Андрей Зенков, из практики студии «Мельница»

Через сколько секунд показывать окно? Обычно не сразу после загрузки, а через несколько секунд, когда посетитель уже что-то прочитал. Окно по клику самое спокойное: оно появляется, только когда человек сам нажал на нужный элемент, поэтому меньше раздражает. Exit-intent срабатывает на движение курсора к кнопке закрытия вкладки, поэтому на телефоне он не работает: курсора там нет.

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

Как сделать всплывающее окно на сайте пошагово

Как делать всплывающие окна? Для сайта на WordPress проще всего начать с готового плагина или конструктора. Выберите шаблон, соберите заголовок, текст, форму и кнопку, назначьте триггер и подключите отправку заявок на почту или в CRM. Код нужен только для нестандартной логики, например для показа по сложному поведению посетителя. Главное правило: одна цель на одно окно.

Порядок действий такой:

1. Сформулируйте цель и одно предложение: что человек получит и какое действие от него нужно.
2. Выберите конструктор или плагин. В WordPress для окон есть Popup Maker, где настраиваются триггеры, и Ninja Popups, где окно можно посмотреть до публикации. Из российских сервисов можно взять Carrot quest: он собирает окна и передает лиды в amoCRM.
3. Соберите окно: заголовок с выгодой, короткий текст, изображения по делу, кнопку и крестик. Кнопка должна нести призыв, а не просто «Отправить». Дизайн делайте в стиле бренда.
4. Соберите форму. Чем меньше полей, тем выше шанс, что её заполнят: обычно хватает почты. Для сбора контактов нужно согласие на обработку персональных данных по 152-ФЗ, поэтому галочка с согласием обязательна.
5. Триггер и частоту показа настройте заранее. Для знакомства подойдет окно по времени или по прокрутке, а не блокировка при входе.
6. Настройте интеграции. Заявки должны уходить на почту, которую читает менеджер, или в CRM. Так контакты не теряются между окном и отделом продаж.
7. Проверьте перед запуском: тестируйте окно на телефоне и десктопе, в Яндекс Браузере и других браузерах, убедитесь, что заявка доходит. Варианты заголовков, кнопок и триггеров сравнивайте через A/B-тестирование.

Как понять, что окно работает? Нужны два числа: показы и отправки формы. Цель на отправку формы настраивается в Яндекс Метрике, и её статистика показывает, работает окно или только занимает место.

Типичные ошибки: окно без цели, десяток полей в форме и блокировка с первого экрана. Такое окно мешает чтению, воспринимается как спам, и заявок с него обычно мало.

Для WordPress есть готовые плагины для окон, например My Popup. Перед установкой сверьте в описании, какие триггеры и интеграции поддерживаются: у разных плагинов набор отличается.

Структура конверсионного окна

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

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

Кнопку подписывайте так, чтобы было понятно, что произойдет дальше. «Получить расчет» или «Отправить на почту» объясняют действие, а голое «Отправить» нет. Призыв в кнопке должен совпадать с заголовком. Цвет берите из палитры бренда, а не из случайного набора: дизайн окна не должен спорить с сайтом.

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

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

Окно можно настроить и собрать в конструкторе без кода. Большинство плагинов для WordPress дают готовые шаблоны, в которых остается поменять заголовок, текст, изображения и цвета в редакторе. Например, Hello Bar в бесплатном тарифе на момент написания позволяет показывать до 10 окон. Шаблон - отправная точка, а не готовое решение.

Когда и как часто показывать окно

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

Прокрутка удобнее таймера для статей и карточек товаров. Окно срабатывает, когда посетитель прокрутил страницу на 40-70%. До этого он еще решает, интересно ли ему, а дальше читает и готов к предложению.

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

Окно по клику отвечает на действие, которое человек уже сделал: он нажал «Заказать звонок», и только тогда появилась форма. Такое окно редко раздражает, но трафика не добавит, поэтому его ставят рядом с нужной кнопкой, а не вместо других триггеров. Я обычно ставлю окно по прокрутке, потому что по таймеру оно срабатывает и на тех, кто уже решил уйти.

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

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

Мобильные устройства, Google и требования закона

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

Google давно понижает в мобильной выдаче страницы с навязчивыми интерстициалами, то есть окнами, которые закрывают контент сразу после перехода с поиска. Cookie-уведомление внизу экрана считается допустимым исключением, если не перекрывает основной текст. Окно с предложением таким исключением не является, даже если оно маленькое.

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

Перед запуском тестируйте окно на реальном телефоне и проверьте по списку:

• Крестик достаточно крупный, виден сразу и попадает пальцем, а кнопка закрытия не прячется за край экрана.
• Форма из одного поля: клавиатура открывается с нужным типом ввода, а почта вводится без лишних шагов.
• Триггер срабатывает по прокрутке или времени, а не при входе, иначе окно мешает читать.
• Заявка с телефона доходит до почты или CRM: интеграции проверяйте на устройстве, а не на десктопе.
• Окно не перекрывает основной текст и не появляется повторно в той же сессии.

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

Ошибки, которые отпугивают посетителей

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

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

Третья ошибка - одно окно для всех страниц. Предложение для статьи не подходит карточке товара. Четвертая - агрессивный призыв вроде «Последний шанс!» при пустом обещании.

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

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

Как проверить эффективность и что делать дальше

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

Отправку формы отслеживайте как цель в Яндекс Метрике: так видно, с какой страницы и при каком триггере пришла заявка. Показы считайте отдельно от посещений, иначе доля отправок искажается. Например, можно заметить, что форма с полем телефона отправляется реже, чем форма с одной почтой. Без цели вы получаете не данные, а догадки.

Тестируйте по одной переменной. Если поменять заголовок, кнопку и триггер сразу, непонятно, что дало результат. Сделайте два варианта, например показ по прокрутке и по таймеру, остальное оставьте одинаковым и дайте тесту набрать показы. Сравнивайте долю отправок, а не абсолютное число заявок.

Связку с CRM проверьте вручную: отправьте заявку с телефона и посмотрите, появилась ли она в CRM с нужными полями.

Чек-лист перед выводами:

1. Запишите отказы и число заявок до запуска.
2. Настройте цель на отправку формы и проверьте ее тестовой заявкой.
3. Запустите тест с двумя вариантами, которые различаются одной переменной.
4. Через неделю-две сравните показы, отправки и отказы.
5. Оставьте победителя или поменяйте предложение и повторите.

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

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

Список литературы

1. Google Search Central Blog. Helping users easily access content on mobile // Google Search Central Blog, 2016 // developers.google.com
2. Coalition for Better Ads. Initial Better Ads Standards for Desktop Web and Mobile Web // Coalition for Better Ads, 2017
3. Федеральный закон от 27.07.2006 N 152-ФЗ «О персональных данных» // Собрание законодательства РФ, 2006
4. Фильтрация рекламы // справка Яндекс Браузера