Квиз — это несколько коротких вопросов, после которых посетитель видит результат: подходящую услугу, примерную цену или свой профиль в тесте. Контакт он оставляет в форме до или после результата, и заявка приходит вместе со всеми ответами. В этой инструкции по шагам: как создать квиз в «Конструкторе квизов», что настраивается на каждой вкладке редактора, как поставить квиз на сайт одним из пяти способов и где смотреть воронку.
Создание квиза за пять минут
- Войдите в личный кабинет app.allwidgets.ru и в меню «Мои виджеты» выберите плитку «Квизы».
- Нажмите «Новый виджет», в окне «Укажите ваше название для нового виджета» введите название (его видите только вы) и нажмите «Создать». Откроется редактор, в нём уже есть короткий квиз-заготовка «Подбор услуги».
- В карточке «Квиз» нажмите «Заготовки» и выберите подходящую по смыслу или оставьте «Подбор услуги». Перепишите вопросы, варианты и результаты под свой бизнес на вкладках «Вопросы», «Старт», «Результаты», «Заявка».
- На вкладке «Заявка» укажите «Ссылка на текст согласия» на обработку персональных данных и проверьте вкладку «Логика»: там не должно остаться предупреждений.
- В карточке «Показ на сайте» выберите, как открывать квиз: встроенным блоком, плавающей кнопкой, автоматически, по кнопкам вашего сайта или отдельной страницей по ссылке.
- Выберите шаблон в карточке «Шаблон», включите уведомления о заявках и цели Метрики, нажмите «Сохранить».
- Нажмите «Код для вставки», в окне «Код для вставки на сайт» нажмите «Скопировать» и вставьте код на страницы сайта. Пройдите квиз сами и загляните в «Воронка и статистика».
Заготовки: с чего начать
Кнопка «Заготовки» на вкладке «Вопросы» открывает окно «Начните с заготовки». Заготовка заменяет вопросы, результаты и тексты, а настройки показа, дизайн и уведомления остаются прежними. После выбора не забудьте нажать «Сохранить».
| Заготовка | Что внутри | Кому подходит |
|---|---|---|
| «Подбор услуги» | 4 вопроса: задача, сроки, бюджет ползунком, пожелания; форма перед результатом | Любой сфере услуг как отправная точка |
| «Расчёт стоимости ремонта» | 6 вопросов, эксперт, 4 результата с вилкой цены за м², форма после результата | Ремонту, строительству, отделке |
| «Подбор тура» | 7 вопросов, вопрос о детях показывается только тем, кто едет с детьми | Турагентствам, гостиницам |
| «Тест с баллами» | «Какой вы инвестор?»: результат по сумме баллов, форма после результата | Обучению, консалтингу, развлекательным тестам |
| «Квалификация B2B-клиента» | 5 вопросов, нецелевые уходят на страницу отказа без заявки | B2B-продажам и сервисам по подписке |
Бонусы в заготовках выключены, а цены в результатах указаны для примера. Замените их своими, прежде чем ставить квиз на сайт.
Редактор: карточки и вкладки по порядку
Слева в редакторе идут карточки настроек, справа живое превью с переключателем «Компьютер» и «Телефон». Превью меняется сразу, без сохранения, и показывает тот экран квиза, который вы сейчас правите. Заявки и просмотры из превью никуда не отправляются и в статистику не попадают.
«Основное»
«Название виджета» видно только вам. Переключатель «Временно отключить» прячет квиз с сайта без потери настроек. «Показывать на мобильных» включён по умолчанию: если его выключить, на телефонах квиз не появится на сайте: ни встроенным блоком, ни кнопкой, ни в окне. Отдельная страница по ссылке открывается и на телефоне: посетитель сам перешёл по ней.
«Квиз»: пять вкладок
- «Вопросы»: список вопросов, кнопки «Добавить вопрос», «Заготовки» и «Пройти в превью». Порядок меняется перетаскиванием или стрелками, вопрос можно дублировать и удалить. В открытом вопросе задаются тип, текст, подсказка, варианты, картинка и логика.
- «Старт»: стартовый экран с заголовком, описанием, текстом кнопки и строкой под кнопкой вроде «5 вопросов · около минуты». Здесь же включается эксперт: фото, имя, должность и приветствие.
- «Результаты»: как выбирать результат («По ответам (условиям)» или «По сумме баллов») и сами результаты с заголовком, ценой, текстом, картинкой и двумя кнопками.
- «Заявка»: когда спрашивать контакт, поля формы, согласие на обработку персональных данных, бонус, экран «Спасибо» и страница отказа.
- «Логика»: схема переходов, которая строится сама, предупреждения и «Правила словами».
Типы вопросов, условия, переходы, результаты и форма подробно описаны в статье «Типы вопросов, логика ветвлений и результаты квиза».
«Показ на сайте», «Шаблон» и «Дизайн»
Способы показа разобраны ниже. В «Шаблоне» пять готовых стилей: Минимал, Стекло, Неон, Премиум и Пастель. Тонкие настройки цвета, фона, шрифта и анимации в карточке «Дизайн» доступны на тарифах Pro и Business, подробнее в статье «Квиз: настройка дизайна и шаблоны».
«Уведомления о заявках», «Аналитика», «White Label»
Все заявки квиза сохраняются в разделе «Заявки». Дополнительно их можно получать на почту, в Telegram и по вебхуку, как это настроить, описано в статье «Заявки из новых виджетов». В «Аналитике» включаются «Цели в Яндекс Метрике» и Google Analytics, там же перечислены идентификаторы всех целей квиза. Карточка «White Label» позволяет убрать ссылку на сервис или заменить её своим HTML на тарифе Business.
Сохранение и код для вставки
Нажмите «Сохранить» вверху страницы: появится сообщение «Отлично!» и «Настройки сохранены». Затем нажмите «Код для вставки» и в окне «Код для вставки на сайт» нажмите «Скопировать». Код состоит из двух строк:
<div data-aw-widget="quiz" data-uuid="ваш-uuid"></div> <script src="https://app.allwidgets.ru/s/quiz/ваш-uuid/" async></script>
Первая строка — место встроенного квиза, вторая подключает виджет. Как вставить код на Tilda, WordPress и в обычный HTML, рассказано в статье «Как установить виджет на сайт». Изменения в редакторе после сохранения появляются на сайте сами, код менять не нужно.
Как показать квиз на сайте
Все способы включаются в карточке «Показ на сайте», их можно сочетать: например, встроить квиз в страницу услуги и одновременно открывать его кнопкой в шапке.
Встроенный блок
Переключатель «Встроить в страницу» включён по умолчанию. Квиз занимает место там, где стоит контейнер <div data-aw-widget="quiz" data-uuid="…"> из кода вставки. Если конструктор сайта не даёт вставить свой div, укажите в поле «Или CSS-селектор блока на вашем сайте» селектор существующего блока, например #quiz, и квиз появится внутри него.
Если квиз нужен только во всплывающем окне, выключите «Встроить в страницу» или не вставляйте строку с div.
Плавающая кнопка
«Плавающая кнопка» показывает в углу экрана кнопку, которая открывает квиз в окне. Задайте «Текст кнопки» (по умолчанию «Пройти квиз») и «Положение»: «Справа внизу» или «Слева внизу». На телефоне окно квиза открывается во весь экран.
Автооткрытие
«Открывать автоматически» открывает окно с квизом по триггеру:
- «Через, секунд» — задержка после загрузки страницы;
- «После прокрутки, %» — сколько страницы нужно пролистать, 0 означает не ждать;
- «При попытке уйти со страницы (компьютер)» — курсор уходит к вкладкам браузера;
- «Как часто»: «Раз за визит», «Раз в сутки», «Раз в неделю» или «Один раз».
На телефоне окно открывается не раньше чем через 30 секунд, даже если задержка меньше: поисковые системы плохо относятся к окнам, которые закрывают страницу сразу при входе.
Автоматические окна наших виджетов не открываются поверх друг друга. Если в момент автооткрытия открыто окно другого нашего виджета или модальное окно самого сайта, квиз дождётся, пока оно закроется. Баннер cookie задерживает автооткрытие не дольше 20 секунд. Пока открыт квиз, автоматические окна других наших виджетов тоже ждут. Плавающая кнопка, кнопки сайта и JS API открывают квиз сразу, без очереди.
Кнопки вашего сайта
Любая ссылка или кнопка на сайте откроет квиз в окне, если добавить ей адрес или атрибут:
<a href="#aw-quiz">Рассчитать стоимость</a> <button data-aw-open="quiz">Пройти тест</button>
Если на странице несколько квизов, укажите нужный: href="#aw-quiz-<uuid>" или data-aw-open="quiz:<uuid>". Когда править HTML кнопок нельзя, впишите их селектор в поле «Или CSS-селектор ваших кнопок», например .btn-quiz. Ссылка на страницу сайта с #aw-quiz в конце адреса открывает квиз сразу при загрузке. Открыть квиз умеют и другие наши виджеты: в «Мультикнопке» это действие «Открыть виджет», в «Фокусе» — «Открыть другой виджет».
Отдельная страница по ссылке
«Отдельная страница квиза» (включена по умолчанию) даёт собственную ссылку на квиз во весь экран: для рекламы, соцсетей, Telegram и рассылок, сайт для неё не нужен. Ссылка показывается в карточке, рядом кнопка копирования. Адрес выглядит так: https://app.allwidgets.ru/q/<uuid>/, работает и полный вариант https://app.allwidgets.ru/pub/quiz/page.php?id=<uuid>. Страница доступна после сохранения. Для превью ссылки в мессенджерах она берёт заголовок и описание стартового экрана, а если задана «Картинка стартового экрана», то и её. Цели Метрики работают и на ней, если в «Аналитике» указан номер счётчика. Переключатель «Показывать на мобильных» на отдельную страницу не действует: по ссылке квиз открывается и на телефоне.
Блок «Поведение»
Под способами показа есть переключатели: «Полоса прогресса и «Вопрос 3 из 7»», «Автопереход после выбора варианта» (в вопросах с одним ответом), «Кнопка «Назад»», «Сохранять ответы в браузере 7 дней» и «Ссылка «Пройти заново» на результате».
JS API для разработчиков
В разделе «Для разработчиков: JS API, события и цели Метрики» есть готовые строки кода. Квиз открывается из своего скрипта:
AWQuiz.open('ваш-uuid'); // или AWQuiz.open() — первый квиз на странице
AWQuiz.close();
AWQuiz.on('lead', function (e) { console.log(e.uuid, e.result); });
На window приходят события aw:quiz:open, aw:quiz:start, aw:quiz:step, aw:quiz:form, aw:quiz:result, aw:quiz:lead, aw:quiz:decline и aw:quiz:close. В AWQuiz.on() имя события указывается без приставки: 'lead', 'result' и так далее.
Для всех новых виджетов есть и общий вызов window.allwidgets.open('quiz', 'ваш-uuid'). Он работает, если на странице стоит код квиза или любого другого нового виджета: когда кода именно этого квиза на странице нет, вызов сам подгрузит его и откроет окно, как только квиз будет готов (ждёт до 10 секунд).
Проверка на сайте и цели Метрики
Откройте страницу сайта и пройдите квиз до конца с настоящим телефоном или почтой: заявка должна появиться в разделе «Заявки» и прийти в настроенные уведомления. Если квиза нет, проверьте сохранение, «Временно отключить» и «Показывать на мобильных».
Включите «Цели в Яндекс Метрике», укажите «Номер счётчика» и создайте в Метрике цели типа «JavaScript-событие»:
aw_quiz_start— посетитель начал квиз;aw_quiz_step— ответил на вопрос (срабатывает на каждом шаге);aw_quiz_result— увидел результат;aw_quiz_leadи общаяaw_quiz— отправил заявку;aw_quiz_decline— попал на страницу отказа.
Как создать цели и проверить их срабатывание, описано в статье «Цели Яндекс Метрики новых виджетов».
Статистика и воронка
Кнопка «Воронка и статистика» внизу карточки «Показ на сайте» и ссылка «статистика» в списке квизов открывают отчёт за 7, 30 или 90 дней. Вверху сводка: сколько посетителей начали квиз из увидевших, дошли до конца, оставили заявку и попали на страницу отказа.
«Воронка по шагам» показывает каждый вопрос: процент от начавших и сколько человек ушли именно на этом шаге. Вопросы с условием показа отмечены «по условию». Номер вопроса в статистике постоянный, поэтому перестановка вопросов не ломает историю. Ниже идут «Ответы оставивших заявку» (для чисел — среднее и медиана), распределение «Результаты» и таблица «По дням (МСК)». Прохождения в превью редактора в статистику не попадают.
Если много людей уходит на одном вопросе, упростите его или сделайте необязательным. О сценариях и устройстве хорошего квиза — в статье блога «Что такое квиз на сайте и как он увеличивает заявки» и на странице конструктора квизов.