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

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

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

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

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

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

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

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

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


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

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

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


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

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

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

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

При настройке интеграции коллтрекинга вместо селектора Вы можете указать уникальный 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":


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

Допустим, у Вас на сайте есть форма, которая открывается при нажатии кнопки "Оформить заказ". Допустим, в этой форме Клиенту предлагается ввести имя, 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>

Вы можете управлять Вашими интеграциями с формой:
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) Длительность звонка (не актуально для заявок с сайта);

7) параметры "Источник / Канал", "Кампания", "Ключевое слово" и "Регион" заполняются на основе utm-меток в ссылке, по которой Клиент перешел на Ваш сайт;

8) Группа (сотрудников ВАТС), на которых завершился звонок Клиента;

9) Теги: это слово или словосочетание, которым охарактеризовано обращение в Вашу компанию. Подробнее о тегах коллтрекинга…

10) Лид? - признак, является ли данное обращение Лидом или нет. Подробнее о корректировке лидов…

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