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

Заявки с сайта или форма обратной связи (далее по тексту - форма) - это элемент Вашего сайта, помогающий Вашим Клиентам отправлять Вам запросы на интересующие их темы или свои контактные данные, или иные данные. Пример внешнего вида формы:
При настройке интеграции Вы указываете соответствие полей и селекторов полей формы, которое объединяет существующие данные в базе коллтрекинга с загружаемыми данными из полей формы.
В базе коллтрекинга есть 4 поля для сохранения данных формы: имя, email, телефон, комментарий. Чтобы импортировать данные, коллтрекинг ищет соответствия между селекторами полей в Вашей форме и полями базы. Когда соответствие найдено, данные из поля с определенным селектором добавляются в соответствующее поле базы коллтрекинга и становятся доступны в отчетах.
Настроив интеграцию, Вы сможете получать данные о количестве поступающих заявок с Вашего сайта, в разрезе рекламных каналов, источников, кампаний, ключевых слов в Сквозной аналитике и в Журнале, на вкладке «Все обращения». При этом, коллтрекинг автоматически приплюсует заявки с сайта к звонкам, чатам и обратным звонкам и Вы увидите "общую картину" по количеству обращений и лидов.

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

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

   Способ 2. Настройка интеграции в Личном кабинете MANGO OFFICE. Подключите интеграцию «Заявки с сайта». Тогда данные, которые введет Клиент в Вашу форму обратной связи будут сохраняться в отчетах коллтрекинга.
Вы можете выбрать любой способ настройки. Однако нельзя на одном и том же сайте настроить интеграцию с формой одновременно двумя способами, поскольку это приведет к дублированию данных о заявках с сайта. Вам нужно выбрать только один способ и настроить интеграцию выбранным способом.
Допустим, у Вас на сайте есть форма, которая открывается при нажатии кнопки "Оформить заказ". Допустим, в этой форме Клиенту предлагается ввести имя, 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>
и в тег
<form>
добавить атрибут onsubmit, например так:
   <form onsubmit="submitHandler()">
В качестве параметра принимает объект формы с полями:
Название Тип Описание
 
name string Имя пользователя
number string Номер телефона пользователя в формате 79451112233
email string Электронный адрес пользователя
customParam string Произвольный параметр, который будет передаваться в выгрузку заявок
comment string Комментарий пользователя
Вот, что Вам нужно сделать в Личном кабинете MANGO OFFICE:
1) выберите ВАТС;
2) перейдите в раздел «Коллтрекинг»;
3) выберите пункт «Интеграции»;
4) выберите виджет коллтрекинга, для подключения интеграции «Заявки с сайта»;
5) нажмите на блок «Заявки с сайта»:
1) нажмите кнопку «Добавить форму»:
2) в поле «Укажите название формы» Вам нужно ввести название Вашей формы (например, форма на главной странице сайта), см. рисунок ниже;
Используйте информативное название, по которому, в дальнейшем, при работе с отчетами коллтрекинга, можно будет легко понять назначение формы.
3) в поле «Селектор кнопки отправки формы» укажите селектор кнопки, размещенной в Вашей форме;
Подробнее о селекторе и где его взять смотрите в тут.
4) настройте соответствие полей коллтрекинга и селекторов Вашей формы. Для этого, выполните следующие действия:
В базе коллтрекинга есть 4 поля для сохранения данных формы: имя, email, телефон, комментарий. Их значения автоматически получаются от селекторов формы, размещенной на Вашем сайте. Настройка соответствия полей и селекторов формы необходима, чтобы коллтрекинг мог определять, в какое поле базы сохранять значение, введенное в определенное поле формы.
Чтобы настроить соответствие полей коллтрекинга и Вашей формой, выполните следующие действия:
   а) в поле «Тип поля» выберите поле коллтрекинга;
   б) скопируйте селектор поля формы из браузера и вставьте его в поле «Селектор поля» окна «Подключение формы»;
   в) чтобы добавить еще одно поле, нажмите кнопку «Добавить поле», затем повторите действия а), б);
   г) повторите действия а)- в) для всех полей Вашей формы.
Коллтрекинг поддерживает сохранение только 4 полей формы: имя, email, телефон, комментарий.
5) после того как Вы настроите соответствие всех полей формы, нажмите кнопку «Подключить»:
Интеграция «Заявки в сайта» подключена на Вашем коллтрекинге. Открыта страница «Заявки с сайта», на которой показана активная интеграция с Вашей формой:
Селектор - это обязательный параметр кнопки или поля (или иного элемента интерфейса), размещенного в Вашей форме, по которому определяется местонахождения элемента интерфейса в коде сайта. Селектор Вы указываете при настройке соответствия полей и селекторов формы.
Поскольку дизайн сайта может поменяться, селектор элемента интерфейса тоже может поменяться.
При настройки интеграции коллтрекинга вместо селектора Вы можете указать уникальный ID-номер кнопки или поля. ID-номер элемента не меняется при изменении дизайна сайта.
Получить селектор кнопки или поля Вы можете при помощи браузера. В разных браузерах получение селекторы происходит по-разному.
Чтобы определить селектор кнопки или поля, размещенного на форме, в браузере Google Chrome нужно:
1) наведите курсор на кнопку / поле, селектор которого хотите получить, и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите пункт «Посмотреть код»:
2) открыта консоль браузера Google Chrome, в которой подсвечена строка с параметрами кнопки / поля (см. рисунок ниже). Наведите курсор на выделенную строку и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите «Copy -> Copy selector»:
В результате будет скопирован селектор выбранного Вами ранее элемента (кнопки или поля). Теперь Вы можете вернуться к настройке соответствия полей и селекторов формы и вставить скопированный селектор в соответствующее поля настроек интеграции.
Чтобы определить селектор кнопки или поля, размещенного в форме, в браузере Mozilla Firefox нужно:
1) наведите курсор на кнопку / поле, селектор которого хотите получить, и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите пункт «Исследовать элемент»:
2) открыта консоль браузера Mozilla Firefox, в которой подсвечена строка с параметрами кнопки / поля (см. рисунок ниже). Наведите курсор на выделенную строку и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите «Копировать -> CSS-селектор»:
В результате будет скопирован селектор выбранного Вами ранее элемента (кнопки или поля). Теперь Вы можете вернуться к настройке соответствия полей и селекторов формы с формой и вставить скопированный селектор в соответствующее поля настроек интеграции.
Чтобы определить селектор кнопки или поля, размещенного на форме, в браузере Opera нужно:
1) наведите курсор на кнопку / поле, селектор которого хотите получить, и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите пункт «Посмотреть код элемента»:
2) открыта консоль браузера Opera, в которой подсвечена строка с параметрами кнопки / поля (см. рисунок ниже). Наведите курсор на выделенную строку и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите «Copy -> Copy selector»:
В результате будет скопирован селектор выбранного Вами ранее элемента (кнопки или поля). Теперь Вы можете вернуться к настройке соответствия полей и селекторов формы и вставить скопированный селектор в соответствующее поля настроек интеграции.
Вы можете управлять Вашими интеграциями с формой:
1) для каждой формы Вы можете настроить отдельную интеграцию. Тогда данные по заявкам из разных форм будут учитываться отдельно в отчетах коллтрекинга;
2) Вы можете присвоить один из следующих статусов:
      - Активна: интеграция включена, данные по заявками из формы поступают в коллтрекинг;
      - Не активна: интеграция выключена, но не удалена. Если Вы присвоите этот статус, то данные по заявкам из определенной формы перестанут поступать в коллтрекинг. Данные по заявкам, поступившим ранее, не будут удалены из отчетов коллтрекинга.
3) редактировать настройки интеграции;
4) удалить интеграцию с формой.
Чтобы временно прекратить передачу данных по заявкам из формы в коллтрекинг, нужно присвоить интеграции статус «Не активна». Тогда данные по заявкам из формы перестанут поступать в коллтрекинг, однако данные, поступившие ранее, не будут удалены из отчетов коллтрекинга.

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

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

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

Режим передачи данных - real time.

Вот как это работает. Когда Клиент оставляет Вам свои данные в форме обратной связи, коллтрекинг передает вебхук в Вашу CRM-систему. В результате обработки вебхуков, в CRM-системе создается обращение с типом «ФОС» и настроенными параметрами.

Подробнее о том, как настроить передачу вебхуки с данными формы, читайте в этой статье.

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