Quiz или как не потерять клиента.

Что такое Quiz?


Quiz – в переводе с английского — это викторина, опрос
.
Quiz — самая удобная форма для восприятия потенциального клиента, которая позволяет вам продать какой-либо товар(услугу) или получить необходимые данные от клиента.


Демо:

Как работает квиз?


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

Рассмотрим один пример, как вы теряете своих клиентов.

Посетитель заходит на сайт, выбирает нужные фильтры и просматривает товары(услуги). Что-то ему не понравилось или не подошло, и он уходит с сайта. Все, вы потеряли клиента и ничего о нем не знаете.

Как это исправить?
  1. Предлагаете посетителю пройти тест.
  2. Используете вопросы как фильтры товара.
  3. Посетитель отвечает на вопросы теста и оставляет свои контактные данные.
  4. После завершения теста показываете ему нужные товары + скидку, бонус или подарок.
  5. Связываетесь с клиентом и завершаете продажу.
  6. Вам уже известны какие фильтры он выбрал, поэтому предлагаете нужные/альтернативные товары или услуги.

Как создать квиз?

Шаг первый. Переходим на страницу компонента и нажимаем кнопку 'Создать квиз'.

Заполняем обязательные поля:
— Название квиза (на фронте нигде не выводится)
— Кнопка далее (текст кнопки, при клике будет показываться следующий раздел(вопрос)). По умолчанию — Далее
— Кнопка отправить (текст кнопки, при клике будет отправляться форма). По умолчанию — Отправить
Сохраняем квиз.

Шаг второй. Создаем разделы(вопросы). Переходим на вкладку 'Разделы' и нажимаем на кнопку 'Создать раздел'.

Заполняем поля:
Название (обязательное поле, на фронте не отображается) с версии 1.1.3 поле удалено
— GET параметр (смотреть Переадресация)

Шаг третий. Создаем поля(ответы). Заходим в нужный нам раздел и нажимаем на кнопку 'Создать поле'.

Заполняем поля:
— Выбираем тип поля.
— Название поля (используется для параметра fieldNames(FormIt) при сохранении формы, поле обязательное)
— Name поля (заполняется атрибут name)
— Значения* (заполняется атрибут value.)
— Если тип поля: чекбокс или радио, то значение еще используется как label
— Если тип поля: селект, то значение используется как текст для тега option
*если указано значение в формате Text==value, то Text будет использоваться как label/text, а value для заполнения атрибута value.
Для полей с типом: чекбокс, радио или селект, можно использовать несколько значений, разделенные ||, например Кошка||Собака или Белый==#ffffff||Черный==#000000.
В этом случаи будет создана группа чекбоксов или радиобоксов, а для селекта соответствующее кол-во тегов option.

Все, простой quiz готов!

Дополнительно:

Результаты.
После завершении теста можно показать необходимый контент или сделать переадрессацию.


Для каждого результата есть свои условия:


Переадресация. Для переадресации на нужный url после прохождения теста, нужно заполнить поле 'Переадресация'. Можно указать id ресурса или любой url.
К url можно добавить get параметры. Для этого должно быть заполнено поле 'GET параметр' в нужном нам разделе. Значения параметра будет браться с заполненного поля у которого name = 'GET параметр'.


Сообщения. В окне раздела есть вкладка «Сообщения», в котором можно указать правильный ответ на вопрос и разный текст в зависимости правильно ответили или нет.


Обложка или стартовая страница квиза.


Настройка квиза.


Настройка письма.


Как вывести квиз

{'!Quiz' | snippet: [
    'id' => 1,
]}
Где id — идентификатор квиза.

Ссылка на компонент.
Aleksandr Huz
26 марта 2019, 20:24
1
512
+13
Поблагодарить автора Отправить деньги

Комментарии: 44

Фарит
26 марта 2019, 20:45
0
Ветвления в зависимости от варианта ответа есть?
    Aleksandr Huz
    26 марта 2019, 20:52
    0
    Нету. Записал в TODO список.
      Фарит
      26 марта 2019, 21:56
      0
      Куплю, сразу после появления оной.
      Образец можно бесплатно посмотреть у марквиза. Но них не очень продуманно, если после ответа с вариантами, стоит ответ без вариантов, то ветку нужно пристраивать к верхнему уровню.
mngatoff
26 марта 2019, 21:36
0
привет! в safari демка так и не работает (
    Aleksandr Huz
    27 марта 2019, 20:07
    0
    Привет. Исправил в демке. Завтра выпущу обновление компонента.
Максим Кузнецов
27 марта 2019, 01:10
0
В хроме после выбора опции не активируется кнопка для перехода на следующий шаг.
    Aleksandr Huz
    27 марта 2019, 13:08
    0
    Какая ОС и какая демка?
Владимир
27 марта 2019, 07:50
0
А по окончании прохождения квиза есть поделиться результатом в соц сетях?
Такие квизы обычно применяют для побуждения расшарить страницу в соц сети, оставить свой адрес для получения подарка и т.п.
    Aleksandr Huz
    27 марта 2019, 13:00
    +1
    Добавил в TODO список. В следующей версии будет.
Александр Мельник
27 марта 2019, 08:26
0
Вот я бы послал на если бы просто после прохождения теста мне бы звонили и что то втюхивали. И навсегда бы зарекся заходить на этот сайт.
    Николай Савин
    27 марта 2019, 10:53
    +2
    Это смотря какой квиз, и какая у него цель. Если то, что в примере то да — нет зацепки для клиента. А вот если сайт автосалона и квиз предлагает подобрать автомобиль на основании специально предназначенных для этого вопросов, да еще и заголовок соответствующий вроде «Ответьте на вопросы и мы сделаем вам персональное предложение» — тогда последующий перезвон клиенту вполне уместен.
    Aleksandr Huz
    27 марта 2019, 13:06
    +1
    Можно не звонить, а выслать на почту специальное предложение. Тем более, посетитель может не оставлять свои данные, если его раздражают письма и звонки.
      Владимир
      27 марта 2019, 13:18
      +1
      можно ссылку на скачивание открывать успешно прошедшему квиз, а по ссылке материалы какие угодно, и свои данные не придется оставлять посетителю и клиент уходит потенциально возвращаемый
      Ну а в чанке выбирать что показать, ссылку на скачивание или форму для email в зависимости от типа устройства посетителя (моб\десктоп) и т.п.
        Aleksandr Huz
        27 марта 2019, 14:21
        +1
        Можно делать переадрессацию на любую страницу с get параметрами или без, в зависимости от условий, и так показывать определенный контент.

        Но показывать ссылку, тоже хорошая идея, добавлю в TODO список.
          Владимир
          27 марта 2019, 14:25
          -1
          все же лучше не конкретно ссылку, а просто чанк, в который феномом можно впихнуть что угодно, ссылку ли или…
            Aleksandr Huz
            27 марта 2019, 14:39
            +1
            Чанк уже есть для результатов — tpl.Quiz.result
Александр
28 марта 2019, 04:57
0
привет, нашел одну неточность.

В варианте когда поле chekbox может быть несколько вариантов правильных ответов. Но в «Значение правильного ответа: » я могу выбрать только одно поле. Там по идее должна быть возможность выбрать несколько значений.
    Aleksandr Huz
    28 марта 2019, 11:33
    0
    Привет, Александр! Да, действительно, про это не подумал. Исправлю.
дима
29 марта 2019, 12:13
-2
Популярность вашего запроса зависит от того, насколько часто переходят по нему пользователи в поисковой системе.
vpodskazke.ru/about
mngatoff
30 марта 2019, 22:33
0
не хватает возможности прикрепить разные картинки к разным ответам в радиокнопках и чекбоксах
    Aleksandr Huz
    31 марта 2019, 00:03
    0
    В настройках поля есть поле изображение. Выводиться в чанке — $field.field_file
      mngatoff
      31 марта 2019, 00:22
      0
      это понятно, но это одна картинка на поле. а если в поле несколько радиокнопок, каждой присвоить картинку никак
        Aleksandr Huz
        31 марта 2019, 15:34
        0
        Можно по уникальному значению поля загружать картинку или создавать каждый чекбокс отдельно. Пример:
        <img src="assets/step/{$field.value}.jpg" >
          mngatoff
          31 марта 2019, 16:57
          0
          так и подумал. так и придется сделать. но клиенту это не будет очень удобно)
          а вариант «каждое чекбокс отдельно» не сработает для радиокнопок. ну и плюс, не получится сделать обязательное поле
            Aleksandr Huz
            03 апреля 2019, 11:41
            0
            А почему не сработает для радиокнопок? (у меня все срабатывает)
            Для чекбоксов можно не ставить required, если не все чекбоксы обязательны. А так, если ни один чекбокс не отмечен, то к сдел. вопросу нельзя перейти.
Николай Загумённов
02 апреля 2019, 22:10
+1
Если количество правильных ответов 0, то просто отправляет форму, не показывая результат
    Aleksandr Huz
    03 апреля 2019, 20:11
    +1
    Спасибо! Исправляю.
Николай Загумённов
02 апреля 2019, 23:57
0
Есть ли необходимость засовывать инициализацию JS в
window.addEventListener('load'
?
Там просто на телефонах иногда квиз доолго не подгружается, нажимаю «Начать тест» и ничего не происходит
    Aleksandr Huz
    03 апреля 2019, 20:17
    +1
    Поменяю на
    document.addEventListener('DOMContentLoaded'
    должно помочь.
Николай Загумённов
03 апреля 2019, 19:36
+1
Обычные кавычки (не елочки) обрезаются при выводе квиза. В поле «Сообщение о правильном ответе» так. Все что поле первой кавычки в строке не показывается. Не знаю как в других полях.
    Николай Загумённов
    03 апреля 2019, 23:51
    0
    Проблема с кавычками есть и поле «Значения». Если в варианте есть кавычка и этот вариант выбран правильным ответом, то квиз не выделяет во фронте зеленым цветом его
      Aleksandr Huz
      04 апреля 2019, 11:38
      0
      Напишите, пожалуйста, в тех. поддержку или приведите пример. У меня с кавычками работает — quiz.boshnik.ru
        Николай Загумённов
        04 апреля 2019, 14:31
        0
        ок, с апострофами точнее проблема
          Aleksandr Huz
          04 апреля 2019, 17:59
          0
          Попробуйте дать значение слову с апострофом без апострофа.
          Пример:
          Вар'яти==varyati
mngatoff
07 апреля 2019, 00:49
0
привет! написано «все данные теста сохраняются в админке», а куда?
    Aleksandr Huz
    08 апреля 2019, 11:02
    0
    Привет! Сохраняется на странице приложения FormIt, используется стандартный хук FormIt — FormItSaveForm.
      mngatoff
      08 апреля 2019, 11:31
      0
      нет там:(

      возможно, потому что с сервера не работает отправка почты (так задумано).

      может быть, стоит поменять порядок хуков, чтобы «email» вызывался после formirsaveform?
        Aleksandr Huz
        08 апреля 2019, 11:53
        0
        Если не работает отправка почты, то можно снять галочки «Письмо менеджерам» и «Письмо пользователю», тогда хуки «email» и «FormItAutoResponder» не будут добавлены.

        Или можно указать в параметре сниппета какие хуки нужно запускать:
        {'!Quiz' | snippet:[
            'id' => 1,
            'hooks' => 'spam,fieldsRusName,FormItSaveForm'
        ]}
Ильяс
23 апреля 2019, 20:18
0
Можно ли создавать ответ на совокупность нескольких вопросов?
К примеру посетителю нужно узнать размер, он указывает: вес, рост, объемы и в конце ему предлагается ответ.
Ваш размер: XL
    Aleksandr Huz
    Вчера в 09:56
    0
    Да. К компоненте есть раздел — Результаты.
      Ильяс
      Вчера в 15:31
      0
      где документация по нему?
        Ильяс
        Вчера в 15:54
        0
        Еще раз, т.е создаем текстовое поле вес, в котором вводим цифру от 40-150, затем вводим другое поле, где указывается рост от 120-210 см, и по этим данным нам нужно вывести ответ.
        Если вес от 65-70, а рост 155-160, нам нужно вывести ответ к примеру вероятность размера XS — 80%, S-20%
        Если вес от 65-70, а рост 160-165, нам нужно вывести ответ вероятность размера S — 70%, M-30%
        Если вес от 65-70, а рост 165-170, нам нужно вывести ответ вероятность размера M — 60%, L-40%

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