Настройка событий трекинга посетителей

Скопировать ссылку на статью

Скопировано

Что можно настроить

1. Просмотр страницы — передается по умолчанию при включении трекинга. Механика события следующая: если при подключении сайта к трекингу в базе нет ни одного события для всей системы в целом — создастся данное событие, которое автоматически привяжется к подключённому сайту. Если событие «Просмотр страницы» уже существует — к нему привяжется подключаемый к трекингу сайт (магазин);
2. Клики по элементам;
3. Взаимодействие с формами: начало заполнения формы и отправка форма. ;
4. Регистрация посетителя на сайте — фиксирует момент, когда пользователь пытается зарегистрироваться на сайте;
5. Логин — момент входа посетителя на сайт;
6. Загрузка файла. Селектор применяется к ссылке — виджет автоматически извлекает из неё имя файла или аналогичную информацию;
7. Клик по коммуникациям — событие, фиксируемое при нажатии на кнопки WhatsApp, Telegram или другие элементы управления, с помощью которых пользователь обращается за поддержкой к оператору.

Важно!

Для отслеживания созданных событий необходимо включить трекинг в разделе «Подключение».

Создать событие можно по пути Маркетинг → Трекинг посетителей сайта → Отслеживание события, нажав Новое событие.

Выбор типа события

Для сохранения клиента при выполнении события нужно активировать переключатель «Автоматически создавать клиента». Это позволит собирать базу целевых клиентов. Клиент будет сохранен при условии, что в данных события достаточно информации для создания клиента (ФИО, почта и др.). Обычные просмотры не создают нового клиента в системе.

Далее необходимо указать, на каких страницах будет отслеживаться данное событие. При выборе варианта «На конкретной странице» потребуется указать URL страницы в формате https://example.ru/product/123.

Фильтрация URL в преднастраиваемых событиях трекера

Поддерживаются следующие символы подстановки:

• * — любое количество символов. Пример: wh* найдёт what, white и why, но не awhile или watch.
• ? — один символ в указанной позиции. Пример: b?ll найдёт ball, bell и bill.
• [] - один символ из группы в скобках. Пример: b[ae]ll найдёт ball, bell, но не bill.
• ! — инвертирует группу в скобках. Пример: b[!ae]ll найдёт bill и bull, но не ball или bell, [!a]* найдёт всё, что не начинается на "a".
• - — диапазон. Нужно указывать диапазон в порядке возрастания (от A до Z, не Z до A). Пример: b[a-c]d найдёт bad, bbd и bcd.
• # — любая цифра. Пример: 1#3 найдёт 103, 113 и 123.
• \ — экранирование токенов. Пример: *найдёт именно символ звёздочки, а не любой символ.

Для фильтрации стоит явно указывать места, которые не учитываются фильтром. Например, при необходимости фильтрации только адреса /register можно указать фильтр с доменом целиком: https://example.com/register*. Фильтр вида *register* будет учитываться на всех страницах, в адресе которых есть слово register, например, https://example.com/faq/why-register.

Выбор CSS-селектора

Опция используются для точного определения элементов, с которыми взаимодействует пользователь на странице. Селекторы дают возможность отслеживать только нужные элементы даже в сложной структуре страницы.

Для того чтобы скопировать CSS-селектор элемента на сайте, можно воспользоваться инструментами разработчика в браузере или дополнительными расширениями для браузера (например, Selector Gadget). На примере браузера Google Chrome будет рассмотрена инструкция, которая также работает в большинстве других современных браузерах.

Как скопировать селектор элемента:

1. Открыть сайт в браузере.
2. Кликнуть правой кнопкой мыши по нужному элементу (например, кнопке, заголовку, изображению).
3. В контекстном меню выбрать «Просмотреть код» или «Inspect» (в зависимости от языка браузера).
4. В открывшейся панели разработчика элемент будет автоматически выделен в HTML-структуре.
5. Кликнуть по элементу в коде правой кнопкой мыши и выберите: Copy → Copy selector (Скопировать → Скопировать селектор).

Другой способ выбрать элемент на HTML странице:

1. Открыть сайт в браузере.
2. Кликнуть правой кнопкой мыши в любом месте страницы.
3. В контекстном меню выбрать «Просмотреть код» или «Inspect» (в зависимости от языка браузера).
4. В открывшейся панели разработчика нажать кнопку .
5. Выбрать нужный элемент на странице
6. В панели разработчика элемент будет автоматически выделен в HTML-структуре.
7. Кликнуть по элементу в коде правой кнопкой мыши и выберите: Copy → Copy selector (Скопировать → Скопировать селектор).

Использование CSS-селектора в трекере

На примере части кода сайта рассматривается #contactForm в трекере в RetailCRM:

1. Указывается найденый селектор
2. Название селектора
3. Тип селектора

Далее нужно сохранить изменения на странице.

Созданное событие можно редактировать или удалить.

События и типы селектора

• Клик по элементу: указывается селектор для любого кликабельного элемента: кнопка, ссылка и др.
• Регистрация пользователя: указывается селектор заполняемой формы регистрации. Событие выполняется при попытке отправки формы регистрации. В параметрах указываются селекторы полей ввода, из которых для параметров берутся данные (например, селектор вида input[type=email] может подойти для заполнения свойства customer_email этого события).
• Вход в аккаунт: указывается селектор формы входа. Содержит только свойство customer_email, для которого указывается селектор поля ввода.
• Клик на коммуникацию: указывается селектор кнопки или ссылки. Содержит свойство customer_email, для которого указывается селектор поля ввода.
• Начало заполнения формы: указывается селектор формы.
• Отправка формы: указывается селектор формы.
• Скачивание файла: указывается селектор ссылки на файл, или инициирующей загрузку кнопки.

Список событий

Найти нужное событие можно с помощью фильтров. Принцип их работы аналогичен фильтрам в списке заказов и подробно описан в соответствующей статье.