hackseo

Как показывать всплывающие окна посетителям из поиска

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

Как показывать всплывающие окна посетителям из поиска

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

Что учитывать, когда человек приходит из поиска

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

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

Источник перехода сам по себе не объясняет намерение посетителя. Если человек пришёл из поисковой системы, это ещё не значит, что он готов оставить телефон или купить товар. Для выбора предложения полезнее учитывать содержание страницы и действия на ней.

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

Подготовьте правила показа

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

Запишите:

  • На каких страницах окно может появляться.
  • Какую задачу посетителя оно поддерживает.
  • Какое действие запускает показ.
  • Где показ запрещён.
  • Что происходит после закрытия и отправки формы.
  • Как окно работает на телефоне.
  • По каким результатам вы будете оценивать его пользу.

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

Такое описание позволяет проверить настройку без догадок. Фраза «показывать заинтересованным пользователям» для этого слишком расплывчата: системе нужны конкретные условия.

Настройте всплывающее окно по шагам

Шаг 1. Выберите предложение для конкретной страницы

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

Сопоставьте предложение с содержанием страницы:

Страница Задача посетителя Возможное предложение Подходящий момент
Инструкция Разобраться, как выполнить работу Памятка по этапам После раздела с порядком действий
Сравнение товаров Выбрать подходящий вариант Таблица критериев выбора После изучения различий
Страница услуги Понять условия и стоимость Форма с исходными данными для расчёта По нажатию на кнопку расчёта
Каталог Найти подходящий товар Помощь с подбором По запросу посетителя

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

Шаг 2. Определите, как выделять посетителей из поиска

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

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

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

Шаг 3. Выберите момент появления

Событие, которое запускает показ окна, часто называют триггером. Им может быть нажатие на кнопку, чтение определённого раздела, прокрутка страницы или время после открытия. Выбирайте событие, которое связано с готовностью человека рассмотреть предложение.

Самый понятный вариант — открывать окно по нажатию на кнопку. Например, посетитель нажимает «Рассчитать стоимость» и получает форму расчёта. Действие ожидаемо: человек сам запросил следующий шаг.

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

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

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

Шаг 4. Сделайте текст понятным до заполнения формы

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

Пример для памятки, если она действительно существует и содержит перечисленное:

Памятка по выбору напольного покрытия

Критерии сравнения материалов для кухни, прихожей и жилых комнат. Укажите почту — отправим памятку письмом.

Кнопка: «Получить памятку».

Закрытие: «Продолжить чтение».

Если после отправки формы человеку позвонит менеджер, сообщите об этом заранее. Не называйте форму «мгновенным расчётом», когда она только передаёт заявку сотруднику. Если адрес будет использоваться для рассылки, это тоже должно быть понятно до отправки.

Запрашивайте сведения, необходимые для обещанного действия. Для отправки файла не добавляйте телефон просто потому, что его удобно получить отделу продаж. Для расчёта услуги поясните, зачем нужны параметры объекта. Уберите вымышленные ограничения по времени, неподтверждённые заявления о спросе и обещания, которых бизнес не выполняет.

Шаг 5. Настройте удобное закрытие

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

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

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

Отказ формулируйте нейтрально: «Закрыть» или «Продолжить чтение». Фразы вроде «Нет, я не хочу экономить» не объясняют действие и превращают отказ в давление.

Шаг 6. Ограничьте повторные показы

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

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

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

Шаг 7. Проверьте мобильную версию отдельно

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

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

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

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

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

Проверьте следующие действия:

  1. Откройте страницу и убедитесь, что основной ответ доступен до появления окна.
  2. Выполните действие, которое должно запустить показ.
  3. Закройте окно и продолжите чтение с прежнего места.
  4. Перейдите на другую страницу и проверьте ограничение повторного показа.
  5. Откройте форму вручную и отправьте данные.
  6. Проверьте сообщение об успехе и отсутствие повторного предложения.
  7. Повторите сценарий на телефоне и с клавиатурой.

Проверьте и ошибку отправки. Если форма не сработала, посетитель должен увидеть понятное сообщение и сохранить введённые данные. Закрытие окна при этом должно оставаться доступным.

Оценивайте помощь посетителю, а не только заявки

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

Количество адресов в подписке не объясняет, стало ли удобнее покупать. Проверяйте, как меняются основные действия, и разделяйте результаты по типам страниц и устройств. Большое число закрытий — повод изучить момент показа, содержание и доступность окна, но само по себе оно не доказывает причину проблемы.

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

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

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

Нужно ли показывать окно сразу после перехода из поиска?

Для рекламного предложения лучше сначала дать человеку доступ к содержанию страницы. Немедленное окно перекрывает ответ до знакомства с ним. Если нужен выбор, без которого страница не может работать, объясните его назначение и запросите только необходимые данные.

Можно ли заменить окно небольшим блоком снизу?

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

Нужно ли запрещать все всплывающие окна ради SEO?

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

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

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

Проверить сайт бесплатно

← Все статьи