Способ 1. Настройка интеграции в Личном кабинете MANGO OFFICE

Порядок действий

Переход к настройкам интеграции

Вот, что Вам нужно сделать в Личном кабинете MANGO OFFICE, в разделе «Коллтрекинг»:
1) выберите пункт «Интеграции»;
2) в поле «Сайт» проверьте, правильно ли выбран виджет для подключения интеграции с Заявками с сайта;
3) нажмите на блок «Заявки с сайта».
Примечание. Если вы не видите блок с названием нужной вам интеграции, воспользуйтесь полем «Поиск по интеграциям». В этом поле введите название нужной вам интеграции, затем нажмите на название нужной вам интеграции. Подробнее о поиске…

Подключение формы

1) нажмите кнопку «Добавить форму»:

2) в поле «Укажите название формы» Вам нужно ввести название Вашей формы (например, форма на главной странице сайта). Используйте информативное название, по которому, в дальнейшем, при работе с отчетами коллтрекинга, можно будет легко понять назначение формы;
3) в поле «Селектор кнопки отправки формы» укажите селектор кнопки, размещенной в Вашей форме. Подробнее о селекторе и где его взять смотрите в тут;
4) настройте соответствие полей коллтрекинга и селекторов Вашей формы. В базе коллтрекинга есть 4 поля для сохранения данных формы: имя, email, телефон, комментарий. Их значения автоматически получаются от селекторов формы, размещенной на Вашем сайте. Настройка соответствия полей и селекторов формы необходима, чтобы коллтрекинг мог определять, в какое поле базы сохранять значение, введенное в определенное поле формы;

Чтобы настроить соответствие полей коллтрекинга и Вашей формы, выполните следующие действия:
а) в поле «Тип поля» выберите поле коллтрекинга;
б) скопируйте селектор поля формы из браузера и вставьте его в поле «Селектор поля» окна «Подключение формы»;
в) чтобы добавить еще одно поле, нажмите кнопку «Добавить поле», затем повторите действия а), б);
г) повторите действия а) — в) для всех полей Вашей формы.
Коллтрекинг поддерживает сохранение только 4 полей формы: имя, email, телефон, комментарий.

5) после того как Вы настроите соответствие всех полей формы, нажмите кнопку «Подключить»:

Интеграция «Заявки с сайта» подключена на Вашем коллтрекинге. Открыта страница «Заявки с сайта», на которой показана активная интеграция с Вашей формой:

Как на сайте найти селектор кнопки или поля

Обобщенно о селекторах и id-номерах элементов

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

Примечание. Поскольку дизайн сайта может поменяться, селектор элемента интерфейса тоже может поменяться.

При настройке интеграции коллтрекинга вместо селектора Вы можете указать уникальный ID-номер кнопки или поля. ID-номер элемента не меняется при изменении дизайна сайта.

Рекомендации по использованию ID в формах

Для стабильной работы скриптов, которые взаимодействуют с полями ввода и кнопкой отправки, рекомендуем присвоить вашей форме уникальный идентификатор (ID). Значение атрибута id выполняет роль уникального паспорта элемента. Это гарантирует, что скрипт точно найдет нужные поля, даже если на странице присутствует несколько форм.

Использование селектора по ID является наиболее простым и надежным методом. Такой подход точен и устойчив к возможным изменениям в структуре HTML-кода, в отличие от селекторов по классам, которые могут повторяться или применяться к разным типам элементов. Каждая форма или контейнер, содержащий поля, должен иметь свой уникальный ID.

---

<form id="request-help-form">
  Email: <input type="email" class="email">
  Телефон: <input class="phone">
  Имя: <input class="name">
  Комментарий: <textarea class="comment"></textarea>
  <button type="submit" class="submit-button">
    Отправить
  </button>
</form> ---

Например, уникальный идентификатор id="request-help-form". В таком случае селекторы полей будут иметь вид:

#simple-review-form .email
#simple-review-form .review

Селектор кнопки:

#request-help-form .submit-button

Если на сайте будет вторая форма, то вы задаете ей новый уникальный id. Например, id="simple-review-form":

---

<form id="simple-review-form">
  Email: <input type="email" class="email">
  Отзыв: <textarea class="review"></textarea>
  <button type="submit" class="submit-button">
    Отправить
  </button>
</form>

---

В таком случае селекторы полей будут иметь вид:

#simple-review-form .email
#simple-review-form .review

Селектор кнопки:

#simple-review-form .submit-button

Обратите внимание, что несмотря на использование одинаковых классов для элементов (например, email или submit-button), финальные селекторы для работы скрипта не конфликтуют между собой. Это достигается за счет использования разных уникальных ID у родительских форм.

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

Как получить селектор

Получить селектор кнопки или поля Вы можете при помощи браузера. В разных браузерах получение селекторы происходит по-разному.

Google Chrome

Чтобы определить селектор кнопки или поля, размещенного на форме, в браузере Google Chrome нужно:
1) наведите курсор на кнопку / поле, селектор которого хотите получить, и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите пункт «Посмотреть код»:

2) открыта консоль браузера Google Chrome, в которой подсвечена строка с параметрами кнопки / поля (см. рисунок ниже). Наведите курсор на выделенную строку и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите «Copy -> Copy selector»:

В результате будет скопирован селектор выбранного Вами ранее элемента (кнопки или поля). Теперь Вы можете вернуться к настройке соответствия полей и селекторов формы и вставить скопированный селектор в соответствующее поля настроек интеграции.

Mozilla Firefox

Чтобы определить селектор кнопки или поля, размещенного в форме, в браузере Mozilla Firefox нужно:
1) наведите курсор на кнопку / поле, селектор которого хотите получить, и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите пункт «Исследовать элемент»:

2) открыта консоль браузера Mozilla Firefox, в которой подсвечена строка с параметрами кнопки / поля (см. рисунок ниже). Наведите курсор на выделенную строку и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите «Копировать -> CSS-селектор»:

В результате будет скопирован селектор выбранного Вами ранее элемента (кнопки или поля). Теперь Вы можете вернуться к настройке соответствия полей и селекторов формы й и вставить скопированный селектор в соответствующее поля настроек интеграции.

Opera

Чтобы определить селектор кнопки или поля, размещенного на форме, в браузере Opera нужно:
1) наведите курсор на кнопку / поле, селектор которого хотите получить, и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите пункт «Посмотреть код элемента»:

2) открыта консоль браузера Opera, в которой подсвечена строка с параметрами кнопки / поля (см. рисунок ниже). Наведите курсор на выделенную строку и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите «Copy -> Copy selector»: