Сегодня мы начинаем серию видео о том, как устроен Directual изнутри. Мы рассмотрим наш дашборд, который собирает информацию из опросника, который вы видели при первой регистрации на платформе.
Итак, начнём. Информация собиралась на платформе, а затем, с помощью нашего редактора, мы построили дашборд для отображения этой информации в виде графиков.
Рядом с дашбордом находится форма, которая позволяет настраивать фильтры. Например, вы можете выбрать конкретные временные окна и ответы на вопросы из опросника, что позволяет создавать аналитические отчёты.
Здесь вы можете увидеть, сколько людей ответили, что они полные новички, сколько узнали о Directual из поисковых систем или блогов, и что они создали за последние несколько дней. Также есть кнопка для сброса настроек фильтра и отображения анализа по умолчанию за последние 30 дней.
Отлично. Теперь давайте посмотрим, как всё это работает. Мы получаем ответы опросника в виде JSON с фронтенда. Далее сценарий разбирает эти данные на три поля, два строковых и одно булево, и сохраняет ответы в трёх отдельных полях. JSON также содержит информацию о том, был ли опрос прерван.
У нас есть три структуры данных (думайте о них как о своего рода справочниках). Они содержат объекты, которые представляют собой ответы на вопросы. Есть одна структура для каждого шага опросника. У каждой структуры есть ID и заголовок — это её видимое имя. Вы можете подготовить данные с помощью либо сценария, либо отчётов. Взгляните на три отчёта, которые работают со структурой данных облачных пользователей.
Для фильтрации используются пять параметров. Даты установлены на значения по умолчанию. Мы добавили поля из структуры облачных пользователей, которые состоят из трёх ответов на вопросы, даты регистрации и ID.
Далее настраиваем фильтры. Дата регистрации должна быть больше date_from. Это название параметра. Дата регистрации должна быть меньше date_to. Затем ответ на вопрос на шаге один.
Поскольку здесь мы используем массив, мы используем оператор IN, чтобы можно было фильтровать по нескольким параметрам. Мы должны использовать тот же оператор для ответов на вопросы на шагах 1, 2 и так далее. Затем мы агрегируем этот отчёт по первому ответу и считаем количество по ID, поскольку каждый из них уникален.
Отчёт создаёт структуру данных, и выглядит она вот так. Мы посчитали количество пользователей по их ответам, и вот у нас структура для второго и третьего отчётов. Теперь нам нужно отобразить это на графике. Для этого перейдите на вкладку Plugins и установите плагин графиков из маркетплейса.
Перейдите на вкладку Web Pages, выберите Dashboard, и здесь, на второй вкладке, у нас есть три графика. У всех у них одинаковые настройки, за исключением эндпоинта. Как видите, это круговые диаграммы высотой 400 пикселей, с легендой и всплывающей подсказкой. Угол между сегментами составляет 3 градуса. Внутренний радиус — 100 пикселей, внешний — 120 пикселей. Выглядит как кольцо. Здесь мы выбираем опцию показа первых объектов (в нашем случае их 5) из соответствующего эндпоинта. На вкладке Filters у наших круговых диаграмм ничего нет.
Обратите внимание, что у нас есть HTML-компонент в заголовке. Он отображает некоторую информацию из объекта. Это объекты из структуры Refresh Stat Filters с ID равным 1. Он показывает нам текущие настройки фильтра. Поверх HTML-компонента у нас есть эндпоинт, который возвращает ровно один объект с ID равным 1 и отображает данные из него в виде строки.
У нас есть форма, которая создаёт объекты в той же структуре (полей вообще нет, мы заполняем одно поле автоматически — и всё сбрасываем). Я объясню это позже с помощью сценария. А вторая форма просто сохраняет фильтр, который мы хотим применить: from, to и три массива ссылок с выпадающими списками. Нажмите SUBMIT, и фильтры обновятся.
Давайте посмотрим на сценарий, который всё это обрабатывает. Вот объект, который мы только что создали, с данными и фильтрами. Обратите внимание, что один фильтр настроен, в то время как остальные установлены по умолчанию. Давайте посмотрим на сценарий Welcome Survey Stats.
Первый шаг просто подсчитывает всех пользователей, зарегистрировавшихся в указанном временном окне, независимо от опросника. Это первое число. Далее ссылка на объект с ID равным 1 передаётся в контекстную переменную. Явно. Затем мы проверяем, хотим ли мы сбросить всю статистику. Если нет, мы записываем все ответы опросника в контекстные переменные. На шаге опроса 1 контекстная переменная называется all_step1, на шагах опроса 2 и 3 они выглядят так: all_step2 и all_step3 соответственно.
Мы просто ищем в структурах данных (справочниках, упомянутых ранее). Далее, аналогично первому шагу, мы считаем количество пользователей, которые зарегистрировались и завершили опрос в нашем временном окне (то есть поле survey_is_aborted не равно true).
Далее мы записываем все поля, включая отформатированную дату, через контекстную переменную со ссылкой на объект номер один, чтобы красиво отобразить их на фронтенде.
Для этого мы используем библиотеку Moment.js. Затем, в первый объект, отображаемый на фронтенде, мы отправляем данные о количестве пользователей.
Далее, если у нас настроены фильтры для шагов, мы сохраняем их, если нет — записываем все опции, которые мы нашли и записали как контекстные переменные, в это поле. Мы используем это выражение JS-скрипта. Видите, здесь у нас есть опции, а здесь только первая.
Далее мы последовательно вызываем все три отчёта и передаём вместе с ними конфигурацию фильтров. Затем мы вызываем плагин Socket.IO с ID дашборда. Эта страница будет обновлена для всех пользователей.
Наконец, давайте посмотрим на сценарий обновления статистики опроса. У нас есть ещё одна проверка, равен ли ID единице. Если да, мы сбрасываем все настройки и показываем пользователей за последние 30 дней, и запускаем тот же объект в сценарии для пересборки отчётов. И мы устанавливаем расписание для запуска этого сценария каждый день для обновления статистики.
Вот форма, и теперь вы видите, что кнопка Reset Filters снова на месте. И последнее; давайте посмотрим на настройки вкладки result. Здесь у нас есть автоматическая повторная отправка, что означает, что кнопка вернётся через три секунды.
Вот и всё. Надеюсь, вам было полезно. Не пропустите наше следующее видео!
