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
modx.pro
1
1 097
+13
Поблагодарить автора Отправить деньги

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

Фарит
26 марта 2019, 20:45
0
Ветвления в зависимости от варианта ответа есть?
    Aleksandr Huz
    26 марта 2019, 20:52
    0
    Нету. Записал в TODO список.
      Фарит
      26 марта 2019, 21:56
      0
      Куплю, сразу после появления оной.
      Образец можно бесплатно посмотреть у марквиза. Но них не очень продуманно, если после ответа с вариантами, стоит ответ без вариантов, то ветку нужно пристраивать к верхнему уровню.
        Иван Кизименко
        28 августа 2019, 22:46
        0
        Плюсую, тоже не хватает ветвления
          Фарит
          08 сентября 2019, 12:13
          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
                                  24 апреля 2019, 09:56
                                  0
                                  Да. К компоненте есть раздел — Результаты.
                                    Ильяс
                                    24 апреля 2019, 15:31
                                    0
                                    где документация по нему?
                                      Ильяс
                                      24 апреля 2019, 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%

                                      и т.д…
                                      Т.е все поля будут текстовые.
                                Николай Загумённов
                                30 апреля 2019, 21:38
                                0
                                Если отключить сохранение форм, то в лог сыпятся ошибки.
                                  Aleksandr Huz
                                  01 мая 2019, 10:21
                                  0
                                  Например? У меня ничего нет ошибок.
                                    Николай Загумённов
                                    01 мая 2019, 11:54
                                    +1
                                    Там передается переменная, которая должна быть массивом. Я решил так: 85 строка:
                                    if(in_array('FormItSaveForm', $hooks)) {
                                            $formFields[] = $field->get('name');
                                            $fieldNames[] = "{$field->get('name')}=={$field->get('fieldname')}";
                                        } else {
                                            $formFields = array();
                                            $fieldNames = array();
                                        }
                                      Aleksandr Huz
                                      03 мая 2019, 07:47
                                      +1
                                      Да, действительно, ошибка. Спасибо, исправил!
                                        Николай Загумённов
                                        05 мая 2019, 16:43
                                        0
                                        Есть ли в планах создание квизов с фронта?
                                          Aleksandr Huz
                                          06 мая 2019, 14:32
                                          0
                                          Нет. А зачем, если есть админка? На фронте — это закрытая отдельная страница для избранных?
                                    Николай Загумённов
                                    01 мая 2019, 11:59
                                    0
                                    Еще там есть косяк, но кажется он связан с формитом. Если квиз заполняется очень активно, то хук spam тоже засоряет лог
                                  Андрей
                                  30 июня 2019, 11:46
                                  0
                                  Добрый день.
                                  Можно ли совместить в одном разделе radio и textarea? Почему-то при таком раскладе не хочет делать активной кнопку Далее, пока чего-то не напишу в поле tezarea. name и одинаковым делал и разным, все равно.
                                    Aleksandr Huz
                                    30 июня 2019, 11:56
                                    0
                                    Добрый день, Андрей! В настройке поля есть галочка required, что делает поле обязательное к заполнению. Попробуйте снять.
                                      Андрей
                                      30 июня 2019, 12:05
                                      0
                                      снимал) оставил ее например для всех радио, а для поля текстового убрал и даже name ему изменил
                                        Aleksandr Huz
                                        30 июня 2019, 12:48
                                        +1
                                        Да, действительно, вы правы. В понедельник выпущу обновление.
                                          Андрей
                                          30 июня 2019, 12:54
                                          0
                                          Спасибо. Я еще вам в ТП отписал, там более важный для меня вопрос))
                                    Лев
                                    09 июля 2019, 14:28
                                    0
                                    Здравствуйте, не подскажите есть ли возможность у квиза, например открываться во всплывающем окне через какое-то время или он только встраивается в тело страницы?
                                      Aleksandr Huz
                                      09 июля 2019, 17:15
                                      0
                                      Приветствую. Этого функционала нет. Но это достаточно легко делается:
                                      1. Вставляете квиз в модалку
                                      2. Через определенное время показываете эту модалку.
                                      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                                      62