Цели

Цель - действие посетителя, ради которого работает сайт: заявка, звонок, заказ, подписка, скачанный прайс. Stats3x отмечает визиты, в которых цель достигнута, и показывает, сколько было достижений, какая это доля всех визитов (конверсия) и сколько они принесли (ценность). С целями видно, какие источники, страницы и устройства приводят к результату, а не только к посещениям.

Как считаются цели

1. Вы создаёте цель на вкладке «Цели» кнопкой «Добавить цель» и выбираете вид: посещение страницы, клик по элементу, отправка формы или действие посетителя (вызов _st3x.e() из кода страницы).
2. Скрипт на странице (сниппет Stats3x) присылает просмотры страниц и действия посетителей. CSS-селекторы целей «клик» и «форма» он получает сам - добавлять их в настройку stats3x.click_selectors не нужно.
3. Раз в минуту cron разбирает пришедшие данные и проверяет каждый просмотр и каждое действие по всем включённым целям. Если условие совпало, записывается достижение: визит, посетитель, страница, время и ценность.
4. Достижения видны на вкладке «Цели», в «Сводке», в карточке посетителя, в виджете на главной странице менеджера и в отчёте на почту.

Важно: цели не считаются задним числом. Учитываются только данные, которые cron разобрал после создания или изменения цели, поэтому создавайте цели заранее. Если cron не работает (на вкладке «Состояние» и над отчётами есть предупреждение), достижений не будет совсем. Выключенная цель перестаёт считать новые достижения, старые остаются. Удалённая цель удаляется вместе со своими достижениями.

Поля цели

• Название - как цель называется в отчётах, например «Заявка на звонок».
• Вид цели - что засчитывается. При смене вида форма показывает поля условия этого вида.
• Условие - ID ресурса или часть адреса, CSS-селектор, категория и действие. Подробно - в разделах о каждом виде ниже.
• Ценность - сколько стоит одно достижение, в любых единицах (рубли, доллары, баллы). Можно оставить пустым. Это цена одного достижения, а не итог: в таблице целей она написана мелко под суммой в колонке «Сумма ценности», а сама сумма за период, пока достижений нет, равна 0.
• Засчитывать не больше одного раза за визит - включено по умолчанию: десять кликов по телефону за визит дадут одно достижение. Выключите, если важно каждое повторение, например каждый заказ.
• Цель включена - выключенная цель хранится, но новые достижения не считает.

Кнопки в строке цели: лупа - все отчёты только по визитам с этой целью (отбор появится над отчётами, там же он снимается) и сразу открывает её достижения, карандаш - изменить, «Выключить» / «Включить», корзина - удалить вместе с достижениями. Создавать и менять цели можно с правом stats3x_save, удалять - с правом stats3x_remove.

Вид «Посещение страницы»

Цель достигнута, когда посетитель открыл нужную страницу. Подходит для страниц, на которые попадают только после результата: «Спасибо за заявку», «Заказ оформлен», «Регистрация завершена». Укажите одно из двух условий или оба - достаточно совпадения любого.

• ID ресурса - номер ресурса в дереве MODX (в скобках рядом с названием). Самый надёжный способ: не зависит от адреса страницы.
• Или адрес содержит - часть адреса страницы. Ищется в полном адресе вместе с доменом и параметрами, без учёта регистра. Часть после # и параметры с секретами в адрес не попадают (см. stats3x.hidden_params).
• Это поиск подстроки: /thanks подойдёт и для /thanks-old/, а go/ - для любого адреса, где есть «go/», например /catalog/flamingo/. Пишите часть адреса как можно точнее, со слешами с обеих сторон: /go/.
• Цель засчитывается, только когда страница открылась в браузере и на ней выполнился сниппет Stats3x. Адрес-переадресацию (например /go/... на другой сайт), файл или страницу без сниппета так не отследить - для них делайте цель «Клик по элементу» на ссылку, например a[href^="/go/"].

Вид «Клик по элементу»

Цель достигнута, когда посетитель кликнул по элементу, который подходит под CSS-селектор. Клик по чему-то внутри элемента (иконке, тексту кнопки) тоже считается. Средняя кнопка мыши (открыть в новой вкладке) считается, правая - нет. Подходит для ссылок на телефон, почту и мессенджеры, кнопок «Купить», «Заказать звонок», «Показать телефон».

• Селектор - такой же, как в CSS или в document.querySelector(): .класс, #id, [атрибут] и их сочетания. До 64 символов. Как его составить - в разделе «Как составить CSS-селектор» ниже.
• Несколько селекторов через запятую - одна цель на все эти элементы.
• Под селектор подходят все такие элементы на всех страницах. Если класс .btn есть у всех кнопок сайта, цель будет считать все клики. Берите id или свой атрибут (совет ниже).
• Клик засчитывается сразу, что бы ни случилось дальше: клик по кнопке «Отправить» в форме с ошибками - тоже клик. Для заявок надёжнее «Посещение страницы» «Спасибо» или действие посетителя из обработчика успешной отправки.
• Ссылки tel: и mailto:, скачивания и переходы на другие сайты попадают в отчёт «Действия» и без цели. Цель нужна, чтобы считать их достижениями: с конверсией, ценностью и отбором визитов.

Совет: не привязывайте цели к классам оформления - их меняют при смене дизайна. Добавьте в шаблон или чанк свой атрибут data-goal и укажите его в цели, тогда цель переживёт любую переделку вёрстки.

<a href="tel:+70000000000" data-goal="phone">+7 000 000-00-00</a>
<button type="button" data-goal="callback">Заказать звонок</button>

Селекторы для этих целей: [data-goal="phone"] и [data-goal="callback"].

Как составить CSS-селектор

Как писать. Селектор вводится в поле как есть - так, как он записан в таблице ниже. Квадратные скобки обязательны: [data-autopick] - элемент с атрибутом data-autopick, а без скобок data-autopick означало бы тег <data-autopick>, которого на странице нет, и цель не сработает. Точка - класс, решётка - id, кавычки ставятся только вокруг значения внутри скобок. Обратные кавычки и выделение кода из этой документации в поле вводить не нужно.

Как подобрать селектор по коду страницы

1. Откройте страницу сайта, нажмите на кнопку или ссылку правой кнопкой мыши → «Просмотреть код» (Inspect). Откроется её HTML.
2. Выберите, за что зацепиться, в порядке надёжности: свой атрибут data-... (его ставят для скриптов и редко меняют) → id → адрес ссылки (href) → класс, который говорит о назначении элемента (autopick-btn). Классы оформления - btn, btn-sm, btn-accent - есть у многих кнопок сайта, по ним цель посчитает лишнее.
3. Если такой элемент на сайте не один, а считать нужно только в одном месте, добавьте перед ним через пробел блок, внутри которого он стоит: .catalog-toolbar [data-autopick].
4. Проверьте селектор в консоли браузера (раздел «Как проверить цель» ниже): document.querySelectorAll('селектор').length показывает, сколько элементов он находит на открытой странице. 0 - селектор ничего не находит.

Пример 1: кнопка

<div class="catalog-toolbar">
    <button class="btn btn-sm autopick-btn" type="button" data-autopick>
        Найти специалиста автоматически
    </button>
</div>

Селектор: [data-autopick]. Классы btn и btn-sm есть и у других кнопок, а атрибут data-autopick - только у этой. Если такой атрибут есть ещё где-то, а считать нужно только кнопку в панели: .catalog-toolbar [data-autopick].

Пример 2: ссылки с разными адресами

<div class="profile-actions">
    <a href="/go/ivanov/?from=profile" class="btn btn-accent">Написать специалисту</a>
    <a href="#similar" class="btn btn-outline">Похожие специалисты</a>
</div>

Нужно считать клики по всем ссылкам /go/..., какое бы имя ни стояло дальше. Селектор: a[href^="/go/"] - ссылки, адрес которых начинается с /go/; «Похожие специалисты» (#similar) не подходит. Только ссылки из этого блока: .profile-actions a[href^="/go/"], только с меткой from=profile: a[href*="from=profile"]. В скобках проверяется адрес так, как он написан в атрибуте href: если где-то ссылка записана полностью (https://site.ru/go/...), ^="/go/" её не найдёт - тогда берите *="/go/".

Вид «Отправка формы»

Цель достигнута, когда браузер отправил форму: посетитель нажал кнопку отправки или Enter в поле (событие submit). Если обязательные поля (атрибут required) не заполнены, браузер форму не отправит и цель не засчитается.

• Селектор должен подходить к самому тегу <form>, а не к блоку вокруг него. Если id или класс есть только у обёртки, укажите путь до формы: #callback-modal form.
• Пустой селектор - отправка любой формы на сайте, в том числе поиска, входа и подписки. Обычно лучше указать конкретную форму.
• Цель считает попытку отправки, а не принятую заявку: ошибки, которые находит сервер (капча, неверный телефон), она не видит. Если важны только принятые заявки, используйте страницу «Спасибо» или действие посетителя из обработчика успешного ответа (примеры для FetchIt и SendIt - в разделе ниже).
• Формы, которые скрипт отправляет без события submit (например, кнопка с обработчиком click и запросом fetch), этот вид не видит - отмечайте их через _st3x.e().
• В отчёте «Действия» отправка показывается с названием формы: её id, name или адрес отправки.

Вид «Действие посетителя»: _st3x.e()

Самый гибкий вид: цель достигается, когда код страницы сам сообщает о событии. Так отмечают то, что не видно по кликам и адресам: успешный ответ AJAX-формы, оформленный заказ с суммой, запуск видео, дочитанную статью. Вызов:

_st3x.e("категория", "действие", "метка", значение);

• категория - обязательна, до 64 символов. Сравнивается с полем цели «Категория действия» точно, с учётом регистра: order и Order - разные категории.
• действие - до 128 символов. Если поле цели «Действие» пустое, подходит любое действие этой категории, если заполнено - только точное совпадение.
• метка - необязательна, до 255 символов: номер заказа, id формы, адрес видео. В условии цели не участвует, видна в отчёте «Действия».
• значение - необязательное число. Если оно передано, ценность достижения берётся из него, а не из поля цели «Ценность». Так в цель попадает настоящая сумма заказа.

Это JavaScript. Строка выше - образец одного вызова, а не готовый код. На сайте её ставят в тег <script> в шаблоне или чанке либо внутрь JS-файла сайта - без <script> она просто выведется на странице текстом. Объект _st3x создаёт скрипт, который подключает сниппет Stats3x, поэтому ваш <script> должен стоять ниже вызова сниппета:

    ...
    [[!Stats3x]]
    <script>
    _st3x.e("order", "created");
    </script>
</body>

Если вызов стоит выше сниппета (например, в <head> или в JS-файле, подключённом в <head>) и выполняется сразу при загрузке, в консоли браузера будет ошибка «_st3x is not defined» и цель не сработает. Тогда поставьте в начало <head> заглушку из «Подключение» → шаг 1: вызовы встанут в очередь и уйдут после загрузки скрипта Stats3x. Если же _st3x.e() стоит внутри обработчика события, которое происходит позже загрузки страницы (успешная отправка формы, запуск видео - как в примерах ниже), место кода не важно. Вызывайте _st3x.e() только на страницах, где выведен сниппет Stats3x.

Примеры

Каждый пример - готовый код целиком, вместе с тегом <script>: вставьте его в шаблон или чанк ниже сниппета Stats3x. Цель в менеджере - вид «Действие посетителя» с той же категорией (и действием, если оно указано), что в коде.

Заявка через FetchIt (компонент для отправки форм через AJAX на MODX 3) - засчитывается только успешная отправка: событие fetchit:success наступает, когда сервер принял форму. Цель: категория lead, действие - пусто для всех форм или id одной формы, например callback-form.

<script>
document.addEventListener("fetchit:success", function (e) {
    _st3x.e("lead", e.detail.form.id);
});
</script>

Заявка через SendIt (компонент для отправки форм через AJAX, аналог AjaxForm, работает на MODX 3) - событие si:send:success наступает только при успешном ответе сервера. Проверка тега FORM оставляет только отправку форм: те же события SendIt отправляет и для других запросов (постраничная навигация, загрузка файлов). Цель та же: категория lead, действие - пусто или id формы.

<script>
document.addEventListener("si:send:success", function (e) {
    var form = e.detail.target;
    if (form && form.tagName === "FORM") {
        _st3x.e("lead", form.id);
    }
});
</script>

Заказ с суммой. Код - на странице «Заказ оформлен»; вместо A-1024 и 2500 выведите номер и сумму заказа плейсхолдерами своего магазина. Цель: категория order, действие created, поле «Ценность» пустое - сумма придёт из кода. Флажок «один раз за визит» оставьте, если за визит обычно один заказ: тогда обновление страницы не засчитает заказ второй раз.

<script>
_st3x.e("order", "created", "A-1024", 2500);
</script>

Запуск видео - каждое видео один раз за просмотр страницы. Цель: категория video, действие play.

<script>
document.querySelectorAll("video").forEach(function (video) {
    video.addEventListener("play", function () {
        _st3x.e("video", "play", video.currentSrc);
    }, {once: true});
});
</script>

Дочитал статью - на экране появился элемент .article-end в конце статьи (поставьте его в шаблон после текста). Цель: категория article, действие read.

<script>
new IntersectionObserver(function (entries, observer) {
    if (entries[0].isIntersecting) {
        _st3x.e("article", "read");
        observer.disconnect();
    }
}).observe(document.querySelector(".article-end"));
</script>

Ценность, повторы и конверсия

• Ценность одного достижения - число из поля «Ценность» или значение из _st3x.e(). Stats3x не знает валюту: считайте в рублях, долларах или баллах, главное - одинаково во всех целях. Пример: если каждая пятая заявка становится заказом на 10 000, ценность заявки - 2 000.
• Колонка «Сумма ценности» в таблице целей - сумма ценности всех достижений за выбранный период: 3 достижения по 12 дадут 36. Нет достижений - 0, даже если в цели указана ценность. Мелко под суммой - ценность одного достижения из настроек цели.
• Один раз за визит включено - одно достижение на визит, сколько бы раз посетитель ни повторил действие. Выключено - засчитывается каждое повторение: 3 заказа за визит дадут 3 достижения и сумму трёх заказов.
• Достижения - сколько раз цель достигнута. Конверсия - доля визитов с целью среди всех визитов за период: 1000 визитов, в 25 из них цель достигнута - конверсия 2,5 %. Повторы внутри визита конверсию не увеличивают.
• Все цифры зависят от периода и отбора над отчётами: с отбором по источнику видна конверсия только этого источника.

Где смотреть результаты

• Цели - все цели с условиями, достижениями, конверсией и ценностью за период.
• Достижения (подвкладка вкладки «Цели») - каждое достижение отдельной строкой: когда, какая цель, на какой странице, откуда пришёл посетитель, устройство, город, IP, пользователь сайта, если он входил. Строка открывает карточку посетителя, кнопка ▶ - запись визита. Здесь видно, кто именно достиг цели.
• Визиты (вкладка «Посетители») - колонка «Цели» с метками целей, достигнутых в визите.
• Лупа в строке цели открывает её достижения и оставляет все вкладки только по визитам с этой целью: откуда пришли те, кто оставил заявку, с каких устройств, из каких городов, через какие страницы.
• Сводка - таблица целей рядом с популярными страницами и источниками.
• Карточка посетителя (строка визита на вкладке «Посетители» → «Визиты») - зелёная метка с названием цели у просмотра, на котором она достигнута.
• Виджет на главной странице менеджера - пять главных целей.
• Отчёт на почту - таблица целей (плейсхолдер goals_html).

Готовые рецепты

Частые цели и как их настроить. Код для действий посетителя - в разделе «Действие посетителя» выше.

Воронка: заведите цели на каждый шаг - «Дошёл до корзины», «Заказ» - и сравните их конверсию. Разница покажет, сколько посетителей бросают оформление, а лупа у каждой цели - откуда пришли те, кто дошёл до конца.

Как проверить цель

1. Создайте цель и проверьте, что в колонке «Статус» она «Включена».
2. Откройте сайт в окне инкогнито или в другом браузере. Если ваш IP есть в stats3x.exclude_ips, данные с него не учитываются - проверяйте с телефона через мобильный интернет.
3. Выполните действие: откройте страницу, кликните, отправьте форму.
4. Подождите 1-2 минуты: cron разбирает данные раз в минуту. Чтобы не ждать, запустите разбор вручную:

   php /путь/к/сайту/core/components/stats3x/cron.php -v --task=parse

5. Откройте вкладку «Цели» с периодом «Сегодня» - у цели появится достижение. Если его нет, откройте вкладку «Действия»: если клик или отправка формы там есть, а достижения нет, условие цели не совпало с тем, что пришло (сравните селектор или категорию). Если действия нет и там - скрипт его не отправил, см. «Если цель не считается».

Селекторы удобно проверять в консоли браузера (F12 → Console) на странице сайта. Первая команда должна вернуть число больше нуля, вторая - FORM, третья - function. Четвёртая отправляет тестовое действие: после разбора оно засчитается цели с категорией lead.

document.querySelectorAll('a[href^="tel:"]').length
document.querySelector("#order-form").tagName
typeof _st3x.e
_st3x.e("lead", "test")

Если цель не считается

• Не работает cron: на вкладке «Состояние» видно, когда задача разбора данных запускалась последний раз. Без cron нет ни достижений, ни остальной статистики.
• Цель создана после действия: задним числом цели не считаются.
• Селектор формы указывает на обёртку, а не на <form>.
• Селектор не находит элемент: опечатка, или элемент внутри iframe (виджеты чатов, карты, формы с других сайтов) - клики внутри iframe скрипт страницы не видит.
• Категория в _st3x.e() отличается от категории цели регистром или лишним пробелом.
• На странице нет сниппета Stats3x, или _st3x.e() вызывается раньше загрузки скрипта без заглушки - в консоли браузера будет ошибка «_st3x is not defined».
• Форма отправляется скриптом без события submit - используйте _st3x.e().
• Ваш IP в stats3x.exclude_ips или браузер под управлением программы (автотесты) - такие визиты не учитываются.
• Цель считается слишком часто: селектор подходит к лишним элементам (общий класс), часть адреса слишком короткая или снят флажок «один раз за визит».