Триггеры и сценарии «Фокуса»: когда и кому показывать

Каждое сообщение «Фокуса» отвечает на четыре вопроса: как показать, что сделает кнопка, когда появиться и кому. Здесь подробно о каждом: какие бывают триггеры и как они работают на компьютере и телефоне, как ограничить показ страницами, метками из рекламы и типом посетителя, что умеет кнопка, как указать элемент вашей страницы для подсветки и маячка. В конце готовые сценарии для интернет-магазина, услуг, SaaS и B2B с конкретными настройками. Как создать сам виджет, рассказано в статье «Как создать и настроить «Фокус»».

Как устроено сообщение

В карточке «Сообщения» до 10 сообщений, у каждого пять вкладок: «Сообщение», «Действие», «Когда», «Кому и где» и «A/B». Несколько правил, общих для всех:

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

Форматы: как показать

Формат выбирается на вкладке «Сообщение» в поле «Как показать».

У подсветки клик по самому подсвеченному элементу считается нажатием на действие и закрывает подсказку, а клик по затемнённой части страницы просто закрывает её. Окно и подсветку закрывает клавиша Esc, у маячка она прячет подсказку.

Триггеры: когда показывать

Триггеры включаются на вкладке «Когда», срабатывает любой из включённых. Сообщение без единого триггера кабинет не даст сохранить включённым.

Триггер «Клик по элементу сайта» показывает сообщение сразу, без пауз и лимитов: посетитель сам попросил. Условия вкладки «Кому и где» при этом действуют. Если элемент для триггера «Элемент появился на экране» подгружается на страницу позже, «Фокус» ждёт его до 30 секунд.

Вызов со своей кнопки или из кода

Сообщение можно открыть с любой кнопки сайта атрибутом data-aw-focus-open или функцией allwidgets_focus(). Указывайте код сообщения: он показан на вкладке «Когда» каждого сообщения и не меняется, если переставить сообщения в списке. Кнопка «Скопировать код вызова» рядом копирует готовую кнопку с этим кодом. Например, для сообщения с кодом a1b2c3d4:

<button type="button" data-aw-focus-open="a1b2c3d4">Подобрать окно</button>

<script>
  // например, после добавления товара в корзину
  allwidgets_focus('a1b2c3d4');
</script>

Такой вызов показывает сообщение сразу, не проверяя условия, частоту и лимиты, но только если сообщение включено. Обычное действие ссылки или кнопки с атрибутом data-aw-focus-open отменяется, работает только показ. Вместо кода можно указать номер сообщения в списке (allwidgets_focus(2)), но после перестановки сообщений номер будет указывать на другое сообщение, поэтому надёжнее код. Если на странице два виджета «Фокус», добавьте к кнопке data-aw-uuid="код-виджета" или передайте его вторым параметром: allwidgets_focus('a1b2c3d4', 'код-виджета'). Код виджета — часть адреса из «Кода для вставки».

Как часто показывать

Поле «Как часто показывать одному посетителю» на той же вкладке:

• «На каждой странице (раз за загрузку)» — для подсказок, привязанных к странице;
• «Раз за визит» — визит длится, пока открыта вкладка браузера;
• «Не чаще раза в сутки» и «Не чаще раза в неделю»;
• «Только один раз» — в этом браузере больше не появится.

Поверх частоты действуют общие «Правила показа» виджета: пауза между сообщениями, лимит за визит, «Не мешать вводу», «Ждать, пока закроются другие окна» и «После заявки не показывать формы 30 дней». На странице с виджетами «Все Виджеты» одновременно открыто не больше одного окна: «Фокус» ждёт окна других наших виджетов и модальные окна сайта, а баннер cookie — не дольше 20 секунд. Если посетитель печатает или открыто другое окно, сообщение ждёт до минуты, потом показ отменяется до следующего триггера.

Условия: кому и где

Вкладка «Кому и где» сужает круг посетителей:

• «Страницы»: «На всех страницах», «Только на этих» или «Везде, кроме этих». Список — по одной строке.
• «Только для посетителей с метками»: строки вида utm_source=yandex, подходит любая из строк. Звёздочка заменяет любой текст: utm_campaign=*sale*. Строка без знака равенства, например gclid, значит «параметр есть с любым значением». Работают любые параметры адреса, не только UTM. Метки запоминаются на весь визит: человек пришёл с рекламы на главную, перешёл в каталог, а условие всё ещё выполняется. Пустое поле — всем.
• «Устройство»: все, компьютер или телефон.
• «Посетители»: все, новые или вернувшиеся. Новый — в первый свой визит на сайт в этом браузере, вернувшийся — в следующие визиты.

Текст и подстановки

На вкладке «Сообщение»: «Заголовок» до 100 символов, «Текст» до 500, «Текст кнопки» до 40 и «Вторая кнопка», которая просто закрывает сообщение. Пустая вторая кнопка не показывается. В заголовке, тексте и кнопке работают подстановки:

• {page_title} — заголовок текущей страницы;
• {utm_term|подбор окон} — значение метки из рекламы, а если метки нет, текст после вертикальной черты. Так же работает любой параметр адреса, например {utm_campaign|нашей акции}.

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

Действия кнопки

Вкладка «Действие», поле «Что делает кнопка»:

У мини-формы переключатели полей «Имя», «Телефон», «Email» и «Комментарий». Нужен хотя бы телефон или email. Переключатель «Галочка согласия на обработку персональных данных» включён по умолчанию: если вы собираете контакты, оставьте его и укажите «Ссылку на текст согласия». Какие документы нужны сайту, решайте с юристом, «Фокус» только даёт для этого поле и галочку. В заявке вместе с контактами сохраняются сообщение, вариант A/B и триггер, после которого оно появилось. Подробнее в статье «Заявки из новых виджетов».

Выбор элемента на сайте

Подсветке, маячку, прокрутке, нажатию на элемент и триггерам «Элемент появился на экране» и «Клик по элементу сайта» нужно знать, какой именно элемент страницы имеется в виду. Его указывают CSS-селектором в поле «Элемент страницы (CSS-селектор)» или «Элемент, к которому вести».

Что такое CSS-селектор

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

Под полем редактор сразу проверяет запись: «Селектор записан верно» или «В селекторе ошибка — проверьте кавычки и скобки». Есть ли такой элемент на странице, видно только на вашем сайте: в превью вместо него подсвечивается кнопка макета.

Надёжнее всего: свой атрибут

Добавьте нужному элементу атрибут data-aw-focus с любым именем и укажите его в поле:

<a href="#form" class="btn" data-aw-focus="cta">Вызвать замерщика</a>

Селектор [data-aw-focus="cta"] не сломается, когда дизайнер переименует классы или переставит блоки. В конструкторах сайтов атрибут обычно добавляется в настройках блока, в разделе вроде «HTML-атрибуты» или «Свой код». Заготовки «Подсветить кнопку» и «Маячок на блоке» уже ждут атрибуты data-aw-focus="cta" и data-aw-focus="calc".

Мышкой: кнопка «Выбрать на сайте»

1. Поставьте код виджета на сайт и сохраните виджет. Без кода режим выбора не запустится.
2. Нажмите «Выбрать на сайте» рядом с полем селектора. В окне «Страница вашего сайта» введите адрес страницы с нужным элементом и нажмите «Открыть сайт».
3. Сайт откроется в новой вкладке в режиме выбора, сверху панель «„Фокус“: выберите элемент». Наведите курсор: элемент обводится рамкой, над ним виден его селектор. Ссылки в этом режиме не срабатывают.
4. Нажмите на элемент. В панели появится селектор и кнопки «Скопировать», «Отправить в редактор» и «Выбрать другой».
5. Нажмите «Отправить в редактор»: селектор сам встанет в поле, из которого вы начали выбор. Если такой кнопки нет (браузер или сайт запретили вкладкам общаться), нажмите «Скопировать» и вставьте селектор в поле вручную. Выйти из режима — клавиша Esc.

Режим выбора сначала ищет у элемента атрибут data-aw-focus, потом id, потом атрибуты вроде name или aria-label, и только если их нет, строит путь из тегов и классов. Длинный путь с :nth-of-type работает, но может сломаться при переделке страницы, поэтому для важных элементов лучше добавить свой атрибут.

Вручную: «Просмотреть код» в браузере

1. Откройте страницу в Chrome или Яндекс Браузере, нажмите правой кнопкой на нужный элемент и выберите «Просмотреть код» (в Яндекс Браузере — «Исследовать элемент», в Firefox — «Исследовать»).
2. Справа или снизу откроется панель с кодом, строка элемента подсвечена. Посмотрите, есть ли у неё id="…" или понятный class="…": тогда селектор — #значение или .класс.
3. Или нажмите правой кнопкой на подсвеченную строку и выберите «Копировать» → «Копировать селектор» (в Firefox — «Копировать» → «CSS-селектор»).
4. Проверьте селектор: во вкладке «Консоль» той же панели выполните document.querySelectorAll('ваш селектор').length. Число 1 — селектор находит ровно один элемент.

Браузер иногда даёт длинные селекторы вида #root > div:nth-child(3) > section > a. Они работают, пока страница не поменяется. Если у элемента или его родителя есть id, сократите селектор до него.

Если элемента нет на странице

• У подсветки поле «Если элемента нет на странице»: «Показать сообщением в углу» или «Не показывать». Переключатель «Прокрутить к элементу» сначала докрутит страницу, если элемент за пределами экрана.
• Маячок без элемента не показывается: ему не на чем висеть.
• Если не найден элемент для прокрутки или нажатия, кнопка просто закроет сообщение.
• Элемент, скрытый на телефоне через CSS, для «Фокуса» тоже отсутствует. Для телефона заведите отдельное сообщение с другим элементом или форматом и выберите устройство на вкладке «Кому и где».

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

A/B-тест текстов

На тарифах Pro и Business на вкладке «A/B» есть переключатель «Сравнить два варианта текста». Заполните «Заголовок B», «Текст B» и «Кнопку B», пустое поле берётся из варианта A. Посетители случайно делятся пополам, и каждый всегда видит свой вариант. Кнопка «Показать вариант B» показывает его в превью. Итоги по вариантам — в статистике виджета, в таблице «По сообщениям»: показы, нажатия, CTR и заявки для A и B отдельно. Разница надёжна, когда у каждого варианта хотя бы 300–500 показов. На тарифе Free вкладка заблокирована, а если тариф Pro закончится, все посетители будут видеть вариант A.

Готовые сценарии по нишам

Настройки ниже — отправная точка. Тексты, цифры и страницы подставьте свои и проверьте, что каждое обещание выполнимо.

Интернет-магазин: помощь в корзине

• «Как показать»: сообщение в углу. Заголовок «Помочь с заказом?», текст «Ответим в чате про размер, доставку и оплату».
• «Действие»: «Нажать на элемент сайта», элемент — кнопка вашего онлайн-чата.
• «Когда»: «Бездействие» 40 секунд и «Посетитель уходит», «Раз за визит».
• «Кому и где»: «Только на этих» — /cart и /checkout/*.

Интернет-магазин: промокод вернувшимся

• Заготовка «Промокод»: окно или сообщение в углу «С возвращением!», «Действие» — «Скопировать промокод».
• «Когда»: «Вернулся на вкладку», «Не чаще раза в неделю».
• «Кому и где»: посетители «Вернувшиеся», «Везде, кроме этих» — /checkout/*.

Услуги: скопировал телефон

• Сообщение в углу: «Удобнее, если перезвоним?», «Оставьте номер, перезвоним в рабочее время».
• «Действие»: «Мини-форма заявки», поля «Имя» и «Телефон», галочка согласия со ссылкой на текст.
• «Когда»: «Скопировал текст», «Не чаще раза в сутки».
• Подходит ремонту, клиникам, юристам: тем, кому звонят чаще, чем пишут.

Услуги: подсветить главную кнопку на лендинге

• Заготовка «Подсветить кнопку»: подсветка элемента [data-aw-focus="cta"], «Если элемента нет на странице» — «Не показывать».
• Текст: «Начните с бесплатного замера. Замерщик приедет в удобное время», кнопка «Понятно» или «Мини-форма заявки».
• «Когда»: «Прокрутил страницу» 60 % или «Бездействие» 25 секунд, «Не чаще раза в сутки».

SaaS: посетитель с рекламы на странице тарифов

• Маячок на таблице тарифов .pricing: «Не уверены, какой тариф выбрать? Сравните возможности по {utm_term|задаче}».
• «Действие»: «Прокрутить к элементу и подсветить», элемент — блок сравнения тарифов.
• «Когда»: «Элемент появился на экране», «На каждой странице».
• «Кому и где»: «Только для посетителей с метками» utm_source=yandex, устройство «Компьютер».

B2B: коммерческое предложение при уходе

• «Окно по центру»: «Пришлём коммерческое предложение», «Расчёт под ваш объём, без звонков, если не хотите».
• «Действие»: «Мини-форма заявки», поля «Email» и «Комментарий», телефон выключен.
• «Когда»: «Посетитель уходит», «Не чаще раза в неделю».
• «Кому и где»: «Только на этих» — /catalog/* и /prices, посетители «Все». Если на сайте есть калькулятор AllWidgets, вместо формы можно выбрать «Открыть другой виджет».

Цели и события для аналитики

Если в карточке «Аналитика» включены цели Яндекс Метрики или Google Analytics, «Фокус» отправляет:

• aw_focus_show — сообщение показано;
• aw_focus_click — нажата кнопка действия;
• aw_focus_lead — отправлена заявка из мини-формы, вместе с общей целью aw_focus.

Как завести цели в Метрике, читайте в статье «Цели Яндекс Метрики новых виджетов». Для своих скриптов на window приходят события aw:focus:show, aw:focus:click, aw:focus:close и aw:focus:lead. В detail номер сообщения, вариант A/B и триггер:

window.addEventListener('aw:focus:click', function (e) {
  console.log(e.detail.n, e.detail.variant, e.detail.trigger);
});

Ограничения

• До 10 сообщений в одном виджете, на экране одно сообщение одновременно.
• Селектор до 300 символов, список страниц до 40 строк, меток до 20.
• «Посетитель уходит» на телефоне определяется по резкой прокрутке вверх и срабатывает не на каждый уход: нажатие «Назад» или закрытие вкладки сайт не видит.
• Превью показывает сообщение сразу, без триггеров, и не пишет статистику. Триггеры проверяйте на сайте в окне инкогнито.

Страница виджета — «Фокус». Оформление сообщений — в статье «Фокус: настройка дизайна и шаблоны», а как удерживать посетителя без раздражения — в статье блога «Как удержать посетителя на сайте».