Перейти к основному содержимому

Добавление и настройка целей

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

В Octopus CDP существует несколько способов добавления целей. Ниже они описаны в порядке усложнения и гибкости.

Способы добавления целей​

  1. Подключение по ID элемента (кнопки, ссылки и т.п.)
  2. Подключение формы с загрузкой и обработкой полей
  3. Подключение через идентификатор цели (JS-метод) — для сложных и динамических случаев

1. Добавление цели типа «Кнопка» (по ID элемента)​

Цель типа «Кнопка» используется для отслеживания кликов по элементам сайта: кнопкам, ссылкам, иконкам, интерактивным блокам.

Создание цели​

  1. Перейдите в раздел Цели.
  2. Нажмите «Добавить цель».
  3. Укажите:
    • название цели;
    • описание (опционально);
    • тип цели — Кнопка;
    • ID элемента;
    • URL страницы (если цель должна срабатывать только на конкретной странице).

Создание цели


ID элемента​

В поле ID элемента необходимо указать id HTML-элемента на сайте.

Пример:

<button id="buy-button">Купить</button>

В Octopus CDP указывается:

buy-button

2. Добавление цели типа «Форма»​

Цель типа «Форма» используется для:

  • фиксации факта отправки формы;
  • сбора данных, введённых пользователем;
  • обновления данных клиента в Octopus CDP.

Форма

Не забудьте включить поля

По умолчанию все поля формы деактивированы. Для сбора данных с конкретного поля необходимо нажать на свитч-кнопку - это активирует поле.

Указание ID формы​

В поле ID элемента указывается:

  • id формы (<form id="callback-form">);

  • либо id родительского контейнера, внутри которого находится форма.

Как найти ID формы​

Если ID формы неизвестен, можно:

  • посмотреть исходный код страницы;
  • сохранить страницу как HTML;
  • использовать нейросеть:

    загрузите HTML-код страницы и попросите найти все формы и их id (или родительские элементы).

Это особенно удобно для сложных страниц или сайтов без документации.

Загрузка и настройка полей формы​

  1. После указания ID нажмите «Загрузить поля».
  2. Octopus CDP автоматически определит все поля формы.
  3. Для каждого поля можно:
    • включить сбор данных;
    • включить опцию «Обновлять данные клиента»;
    • выбрать поле карточки клиента для обновления.

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

Важное ограничение

Если:

  • у формы отсутствует id;
  • внутри одного контейнера несколько форм, необходимо доработать сайт и добавить уникальный id.
    Без этого корректное подключение формы невозможно.

Динамические формы (SPA, pop-up, AJAX)​

Если форма:

  • загружается динамически (через AJAX, React, Vue и т.п.);
  • отображается только после клика;
  • отсутствует в исходном HTML-коде страницы при загрузке;
  • создаётся внутри pop-up или модального окна;

стандартное подключение по id может не сработать.

В таком случае рекомендуется использовать JS-метод передачи данных через событие цели (см. способ №3).

Передача данных формы через JS-событие​

Вы можете вручную вызвать цель и передать данные в поля клиента на стороне Octopus через JavaScript:

oct_goal('feedback_form', {  
    update: {  
        NAME: form.elements['name'].value,  
        EMAIL: form.elements['email'].value,  
        PERSONAL_PHONE: form.elements['phone'].value  
    }  
});

В этом случае:

  • фиксируется достижение цели;
  • указанные поля обновляются в карточке клиента или создается новый клиент;
  • форма может быть полностью динамической.

Этот способ рекомендуется использовать, если форма:

  • не имеет стабильного id;
  • создаётся после загрузки страницы;
  • не определяется через «Загрузить поля».

3. Добавление цели через идентификатор (JS-метод)​

При создании цели типа «JavaScript-событие» необходимо сначала указать идентификатор цели.

Идентификатор - это человекочитаемый алиас (латиница, без пробелов), который используется системой для генерации кода цели.

После ввода идентификатора система автоматически сформирует код цели для сайта, который отображается в поле «Код цели для сайта».

Этот код необходимо скопировать и вставить в нужное место на сайте (в обработчик события, кнопку, кастомный JavaScript и т.п.).

Данный способ используется, когда:

  • элемент создаётся динамически (SPA, React, Vue и т.п.);
  • невозможно использовать id элемента;
  • требуется точный контроль момента срабатывания цели;
  • логика клика обрабатывается JavaScript’ом.

Метод основан на явном вызове цели из кода сайта.

JS-метод

Идентификатор цели​

После сохранения цели система генерирует уникальный код вида:

oct(2444424, 'button', 'param') // где: // 2444424 — идентификатор цели // button — тип цели // param — дополнительный параметр

Пример использования на сайте​

Сгенерированный код необходимо вызвать в обработчике события:

<input
  type="button"
  onclick="cdp(2444424, 'button', 'param'); return true;"
  value="Заказать"
/>

В этом случае цель будет зафиксирована в момент клика, независимо от структуры DOM.

Обновление данных пользователя при вызове цели​

Через JS-метод можно не только зафиксировать событие, но и обновить поля пользователя.

Для этого во втором параметре метода oct_goal передаётся объект update.

В качестве ключей в объекте update используются код поля.
Посмотреть и скопировать доступные коды можно в разделе:

Настройки → Поля клиентов

oct_goal('код_цели', {  
update: {  
SYSTEM_FIELD_CODE: 'значение'  
}  
});

Пример передачи данных формы​

document.getElementById('callback-form').addEventListener('submit', function(e) {
    e.preventDefault();

    var form = this;

    oct_goal('callback_form', {
        update: {
            NAME: form.elements['name'].value,
            EMAIL: form.elements['email'].value,
            PERSONAL_PHONE: form.elements['phone'].value
        }
    });

    // дальнейшая логика отправки формы
});

Особенности работы метода​

  • Коды полей регистронезависимы (NAME, name, Name).
  • Пустые значения не записываются.
  • Обновляются только изменённые поля.
  • Телефон автоматически нормализуется системой.

Когда использовать JS-метод​

Рекомендуется использовать данный способ, если:

  • элементы создаются динамически;
  • одна и та же кнопка используется в разных местах;
  • требуется передача параметров;
  • стандартное подключение по id нестабильно;
  • необходимо вручную передать данные формы или обновить профиль клиента.

Итог​

  • ID элемента — простой и быстрый способ.
  • Форма — для сбора и обновления данных клиента.
  • JS-метод — для сложных, динамических и нестандартных сценариев.