Настройка коллтрекинга для работы с заявками с сайта (формой обратной связи)


1 Обзор

1.1 Что такое форма обратной связи (ФОС)?

Заявки с сайта или форма обратной связи, сокращенно ФОС (далее по тексту - форма) - это элемент Вашего сайта, помогающий Вашим Клиентам отправлять Вам запросы на интересующие их темы или свои контактные данные, или иные данные. Пример внешнего вида формы:

1.2 Настройка соответствия полей и селекторов формы

При настройке интеграции Вы указываете соответствие полей и селекторов полей формы, которое объединяет существующие данные в базе коллтрекинга с загружаемыми данными из полей формы.
В базе коллтрекинга есть 4 поля для сохранения данных формы: имя, email, телефон, комментарий. Чтобы импортировать данные, коллтрекинг ищет соответствия между селекторами полей в Вашей форме и полями базы. Когда соответствие найдено, данные из поля с определенным селектором добавляются в соответствующее поле базы коллтрекинга и становятся доступны в отчетах.


1.3 Что позволяет отслеживание заявок с сайта?

Настроив интеграцию, Вы сможете получать данные о количестве поступающих заявок с Вашего сайта, в разрезе рекламных каналов, источников, кампаний, ключевых слов в Сквозной аналитике и в Журнале, на вкладке "Все обращения". При этом, коллтрекинг автоматически приплюсует заявки с сайта к звонкам, чатам и обратным звонкам и Вы увидите "общую картину" по количеству обращений и лидов.
Если Вы используете amoCRM или Битрикс24, то при поступлении заявки с сайта Вы сможете настроить автоматическое создание сделок на выбранных менеджеров в Вашей CRM-системе, данные по сделкам автоматически подтянуться в отчеты коллтрекинга.
Примечания:
1) как наладить передачу заявок в CRM-систему и создание по ним сделок, читайте в разделе "Интеграция с AmoCRM" или "Интеграция с Битрикс24";
2) если Вам удобнее использовать собственные формы для сайта внутри Вашей CRM-системы, можно использовать их. CRM поддерживает передачу маркетинговых данных по сделкам из собственных форм и данные по таким сделкам автоматически подтянуться в Сквозную аналитику.

1.4 Два способа настроить интеграцию

Настроить отслеживание заявок с сайта можно одним из следующих способов.

Способ 1. Размещение скрипта на Вашем сайте. Добавьте на Ваш сайт специальный js-скрипт, который при отправке формы будет передавать данные в коллтрекинг. Для этого следует привлечь Вашего программиста. Если у Вас нет разрешения на изменение кода Вашего сайта или специально обученного сотрудника, Вы можете воспользоваться вторым способом.

Способ 2. Настройка интеграции в Личном кабинете MANGO OFFICE. Подключите интеграцию "Заявки с сайта". Тогда данные, которые введет Клиент в Вашу форму обратной связи будут сохраняться в отчетах коллтрекинга.
Вы можете выбрать любой способ настройки. Однако нельзя на одном и том же сайте настроить интеграцию с формой одновременно двумя способами, поскольку это приведет к дублированию данных о заявках с сайта. Вам нужно выбрать только один способ и настроить интеграцию выбранным способом.

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

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

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


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

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


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

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



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

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":
В результате будет скопирован селектор выбранного Вами ранее элемента (кнопки или поля). Теперь Вы можете вернуться к настройке соответствия полей и селекторов формы и вставить скопированный селектор в соответствующее поля настроек интеграции.



Способ 2. Размещение скрипта на Вашем сайте

Допустим, у Вас на сайте есть форма, которая открывается при нажатии кнопки "Оформить заказ". Допустим, в этой форме Клиенту предлагается ввести имя, e-mail и телефон. Когда клиент заполнит форму и нажмет кнопку "Отправить", Вам нужно вызвать метод коллтрекинга:
   mgo.postForm({name: 'Иван', email: 'ivan@mail.ru}).
Для этого следует привлечь Вашего программиста. Код на сайт по настоящей инструкции должен вставлять программист, иначе результат может быть неудачный.
Далее, допустим у Вас на сайте есть форма следующего вида:
<form>

   <input type="text" id="username">

   <input type="text" id="email">

   <input type="text" id="phone">

   <input type="text" id="customParam">

   <input type="text" id="comment">

   <input type="submit" value="Оставить заявку">

</form>

тогда Вам  нужно вставить следующий код ОДИН раз ПОСЛЕ кода Вашей формы:

<script>

   function submitHandler() {

              mgo.postForm({

              name: document.getElementById('username').value,

              email: document.getElementById('email').value,

              number: document.getElementById('phone').value,

              customParam: document.getElementById('customParam').value,

              comment: document.getElementById('comment').value

              })

              }

</script>

Кроме  этого, в коде Вашей формы Вам нужно найти тег

<from>

добавить в этот тег атрибут onsubmit, например так:
<form onsubmit="submitHandler()">

В результате код Вашей формы будет иметь следующий вид: 
<form onsubmit="submitHandler()">

    <input type="text" id="username">

    <input type="text" id="email">

    <input type="text" id="phone">

    <input type="text" id="customParam">

    <input type="text" id="comment">

    <input type="submit" value="Оставить заявку">

</form>

В качестве параметра принимает объект формы с полями:

Название Тип Описание
 
name string Имя пользователя
number string Номер телефона пользователя в формате 79451112233
email string Электронный адрес пользователя
customParam string Произвольный параметр, который будет передаваться в выгрузку заявок
comment string Комментарий пользователя

2 Управление интеграцией

Вы можете управлять Вашими интеграциями с формой:
1) для каждой формы Вы можете настроить отдельную интеграцию. Тогда данные по заявкам из разных форм будут учитываться отдельно в отчетах коллтрекинга;
2) Вы можете присвоить один из следующих статусов:
  • Активна: интеграция включена, данные по заявками из формы поступают в коллтрекинг;
  • Не активна: интеграция выключена, но не удалена. Если Вы присвоите этот статус, то данные по заявкам из определенной формы перестанут поступать в коллтрекинг. Данные по заявкам, поступившим ранее, не будут удалены из отчетов коллтрекинга.
3) редактировать настройки интеграции;
4) удалить интеграцию с формой.

2.1 Смена статуса интеграции

Чтобы временно прекратить передачу данных по заявкам из формы в коллтрекинг, нужно присвоить интеграции статус "Не активна". Тогда данные по заявкам из формы перестанут поступать в коллтрекинг, однако данные, поступившие ранее, не будут удалены из отчетов коллтрекинга.

Чтобы сменить статус интеграции с формой, в Личном кабинете MANGO OFFICE выполните:
1) откройте настройки интеграции с формой;
2) в строке с данными нужной интеграции с формой, передвиньте переключатель:
      - налево, чтобы деактивировать интеграцию;
      - направо, чтобы активировать интеграцию:

2.2 Редактирование параметров интеграции

Чтобы редактировать параметры интеграции с формой, в Личном кабинете MANGO OFFICE выполните:
1) откройте настройки интеграции с формой;
2) в строке с данными нужной интеграции с формой нажмите на кнопку ;
3) в открывшемся окне "Редактирование формы", поменяйте нужные Вам параметры подключения, затем нажмите на кнопку "Сохранить":

2.3 Удаление интеграции

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

Чтобы удалить интеграцию с формой, в Личном кабинете MANGO OFFICE выполните:
1) откройте настройки интеграции с формой;
2) в строке с данными нужной интеграции с формой нажмите на кнопку ;
3) нажмите кнопку "Удалить":

3 Отчетность

После того как Вы настроили интеграцию с формой, в Сквозной аналитике Вы увидите количество заявок с сайта и общее количество лидов.
Кроме этого, данные по заявкам с сайта будут отображаться в Журнале на вкладке "Все обращения". Ниже показан пример обращения по заявке с сайта:

1) кнопка воспроизведения записи разговора, либо комментарий к обращению:

* - воспроизведение записи, светло-серый цвет означает, что запись не доступна \ отсутствует;

- воспроизведение записи, темно-серый цвет означает, что запись доступна для прослушивания. Нажав на эту иконку, вы запустите воспроизведение записи;

* - комментарий (только для заявок с сайта), светло-серый цвет означает, что комментарий не доступен \ отсутствует;

- комментарий (только для заявок с сайта), темно-серый цвет означает, что комментарий доступен для чтения. Нажав на эту иконку можно открыть комментарий, оставленный Клиентом в поле "Комментарий" Вашей формы. Комментарий состоит из:

      а) название Вашей формы, введенное при настройке интеграции;

      б) текста, введенного Клиентом в поле "Имя" Вашей формы;

      в) контактов, введенных Клиентом в поля "Телефон" и "Электронный адрес". Контакты указываются в формате телефон|электронный адрес;

      г) текст, введенный Клиентом в поле "Комментарий".

Если в строке с данными заявки показана иконка , а при нажатии на нее окно с комментарием НЕ открывается, причина может быть в следующем:
  • Клиент не оставил комментарий;
  • на Вашей форме нет поля "Комментарий";
  • в скрипте не реализована передача параметра "comment", если, конечно, интеграция с формой настроена, путем размещения скрипта на Вашем сайте.
2) дата и время, когда обращение было получено;
3) - тип обращения "Заявка с сайта";
4) телефон Клиента;
5) кнопка вызова карточки Клиента, в которой собрана история обращений Клиента;
6) длительность звонка (не актуально для заявок с сайта);
7) параметры "Источник / Канал", "Кампания", "Ключевое слово" и "Регион" заполняются на основе utm-меток в ссылке, по которой Клиент перешел на Ваш сайт;
8) группа (сотрудников ВАТС), на которых завершился звонок Клиента;
9) Теги, это слово или словосочетание, которым охарактеризовано обращение в Вашу компанию. Подробнее о тегах коллтрекинга…
10) признак, является ли данное обращение Лидом или нет. Подробнее о корректировке лидов…


4 Как автоматически передать данные из формы в CRM-систему

Данные по заявкам с сайта могут автоматически передаваться в Вашу CRM-систему (или иную аналитическую систему), если Вы подключите и настроите опцию "Вебхуки" коллтрекинга.
Режим передачи данных - real time.
Вот как это работает. Когда Клиент оставляет Вам свои данные в форме обратной связи, коллтрекинг передает вебхук в Вашу CRM-систему. В результате обработки вебхуков, в CRM-системе создается обращение с типом "ФОС" и настроенными параметрами.
Подробнее о том, как настроить передачу вебхуки с данными формы, читайте в этой статье.

Вы нашли ответы на все свои вопросы в данной статье?