[FormWatcher] - Отслеживание брошенных форм

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

Суть работы

простенький JS плагин на лету, отслеживает изменение полей любых форм, к которым добавлен класс formWatcher

Плагин связан с кэшем MODX, в который сохраняет все данные, вводимые пользователем.
При отправке формы — данные за ненадобностью удаляются. Если форма заполнена, но не отправлена — она продолжает находиться в кэше MODX.

Переодически (по умолчанию раз в день — системная настройка компонента), MODX просматривает кэш, очищает его, формируя отчет и отправляет на email администратору.

Состав компонента

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

Системные настройки компонента

formwatcher_email_tpl — Чанк письма. По умолчанию fw_email_report. В комплекте прилично оформленный шаблон для письма.

formwatcher_email_from — Email отправителя письма о незаполненной форме. Если оставить пустым, будет использована системная настройка email_sender

formwatcher_email_to — Email получателя письма о незаполненной форме. Можно указать несколько email, через запятую

formwatcher_email_subject — Тема письма о незаполненной форме. По умолчанию Отчет formWatcher

Предварительная настройка и запуск

1. Подключаем на странице с формой js скрипт, который, по умолчанию, находится по адресу

/assets/components/formwatcher/js/web/default.js

2. Добавьте к нужной форме класс .formWatcher

3. Добавьте в форму скрытое поле с идентификатором формы. Имя поля fw_form_id. Абсолютно любое значение идентификатора. К примеру вот так:

<input type="hidden" name="fw_form_id" value="fw_form_example">

В отчете вы будете видеть какую именно форму заполнили, но не отправили.

4. Добавьте в форму скрытое поле с идентификатором клиента. Имя поля: fw_client_id. Значением можно вставить id пользователя, можно вставить id сессии, можно использовать идентификатор GoogleAnalitics или любое другое уникальное поле.
Я сделал вот так:

<input type="hidden" name="fw_client_id" value="{$_modx->user.id > 0?:$.cookie.PHPSESSID}">

Что означает — если пользователь авторизован — вставляем id пользователя. Если нет — вставляем идентификатор сессии MODX.

В комплекте есть чанк fw_form_example пример формы.

<form class="formWatcher">
    <div class="form-group">
        <label for="name">Как вас зовут</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="Ваше имя">
        

        <label for="phone">Телефон</label>
        <input type="text" class="form-control" id="phone" name="phone" placeholder="+7 777 777-77-77">
    </div>
    <button type="submit" class="btn btn-primary">Отправить</button>
    <input type="hidden" name="fw_form_id" value="fw_form_example">
    <input type="hidden" name="fw_client_id" value="{$_modx->user.id > 0?:$.cookie.PHPSESSID}">
</form>

5. Почти наверняка вы используете для отправки формы компонент FormIt. Для него подготовлен хук fw_clean, который в случае успешной отправки формы очищает данные в кэше компонента, чтобы отправленная форма не попала в отчет.

Внимание! Важно знать и понимать
Компонент не использует полноценную работу по расписанию. Отправка отчетов срабатывает при событии onModxInit — то есть при любом запуске сайта. Это означает, что проверка на наличие незаполненных форм и формирование отчетности будет срабатывать ТОЛЬКО при открытии любой страницы сайта или админки. Если сайт никто не посещает — то и программа будет неактивна.
В случае если вам нужна стабильная периодическая проверка форм — необходимо либо открывать сайт, либо настроить cron, который будет дергать главную страницу сайта по расписанию.