Настройка коллтрекинга для работы с заявками с сайта (формой обратной связи)
Содержание:
1 Обзор
1.1 Что такое форма обратной связи?
1.2 Настройка соответствия полей и селекторов формы
1.3 Что позволяет отслеживание заявок с сайта?
1.4 Два способа настроить интеграцию
Способ #1. Размещение скрипта на Вашем сайте
Способ #2. Настройка интеграции в Личном кабинете MANGO OFFICE
1 Порядок действий
2 Как на сайте найти селектор кнопки или поля
2 Управление интеграцией
2.1 Смена статуса интеграции
2.2 Редактирование параметров интеграции
2.3 Удаление интеграции
3 Отчетность
4 Как автоматически передать данные из формы в CRM-систему
1 Обзор
1.1 Что такое форма обратной связи?
1.2 Настройка соответствия полей и селекторов формы
1.3 Что позволяет отслеживание заявок с сайта?
1.4 Два способа настроить интеграцию
Способ #1. Размещение скрипта на Вашем сайте
Способ #2. Настройка интеграции в Личном кабинете MANGO OFFICE
1 Порядок действий
2 Как на сайте найти селектор кнопки или поля
2 Управление интеграцией
2.1 Смена статуса интеграции
2.2 Редактирование параметров интеграции
2.3 Удаление интеграции
3 Отчетность
4 Как автоматически передать данные из формы в CRM-систему
Заявки с сайта или форма обратной связи (далее по тексту - форма) - это элемент Вашего сайта,
помогающий Вашим Клиентам отправлять Вам запросы на интересующие их темы или свои контактные данные,
или иные данные. Пример внешнего вида формы:
При настройке интеграции Вы указываете соответствие полей и селекторов полей формы, которое объединяет существующие данные в базе коллтрекинга с загружаемыми данными из полей формы.
В базе коллтрекинга есть 4 поля для сохранения данных формы: имя, email, телефон, комментарий. Чтобы импортировать данные, коллтрекинг ищет соответствия между селекторами полей в Вашей форме и полями базы. Когда соответствие найдено, данные из поля с определенным селектором добавляются в соответствующее поле базы коллтрекинга и становятся доступны в отчетах.
В базе коллтрекинга есть 4 поля для сохранения данных формы: имя, email, телефон, комментарий. Чтобы импортировать данные, коллтрекинг ищет соответствия между селекторами полей в Вашей форме и полями базы. Когда соответствие найдено, данные из поля с определенным селектором добавляются в соответствующее поле базы коллтрекинга и становятся доступны в отчетах.
Настроив интеграцию, Вы сможете получать данные о количестве поступающих
заявок с Вашего сайта, в разрезе рекламных каналов, источников, кампаний, ключевых слов в Сквозной аналитике и в Журнале, на вкладке «Все обращения». При этом, коллтрекинг автоматически
приплюсует заявки с сайта к звонкам, чатам и обратным звонкам и Вы увидите "общую картину"
по количеству обращений и лидов.
Если Вы используете amoCRM или Битрикс24, то при поступлении заявки с сайта Вы сможете настроить автоматическое создание сделок на выбранных менеджеров в Вашей CRM-системе, данные по сделкам автоматически подтянуться в отчеты коллтрекинга.
Если Вы используете amoCRM или Битрикс24, то при поступлении заявки с сайта Вы сможете настроить автоматическое создание сделок на выбранных менеджеров в Вашей CRM-системе, данные по сделкам автоматически подтянуться в отчеты коллтрекинга.
Примечания:
1) как наладить передачу заявок в CRM-систему и создание по ним сделок, читайте в разделе "Интеграция с AmoCRM" или "Интеграция с Битрикс24";
2) если Вам удобнее использовать собственные формы для сайта внутри Вашей CRM-системы, можно использовать их. CRM поддерживает передачу маркетинговых данных по сделкам из собственных форм и данные по таким сделкам автоматически подтянуться в Сквозную аналитику.
1) как наладить передачу заявок в CRM-систему и создание по ним сделок, читайте в разделе "Интеграция с AmoCRM" или "Интеграция с Битрикс24";
2) если Вам удобнее использовать собственные формы для сайта внутри Вашей CRM-системы, можно использовать их. CRM поддерживает передачу маркетинговых данных по сделкам из собственных форм и данные по таким сделкам автоматически подтянуться в Сквозную аналитику.
Настроить отслеживание заявок с сайта можно одним из следующих способов.
Способ 1. Размещение скрипта на Вашем сайте. Добавьте на Ваш сайт специальный js-скрипт, который при отправке формы будет передавать данные в коллтрекинг. Для этого следует привлечь Вашего программиста. Если у Вас нет разрешения на изменение кода Вашего сайта или специально обученного сотрудника, Вы можете воспользоваться вторым способом.
Способ 2. Настройка интеграции в Личном кабинете MANGO OFFICE. Подключите интеграцию «Заявки с сайта». Тогда данные, которые введет Клиент в Вашу форму обратной связи будут сохраняться в отчетах коллтрекинга.
Способ 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 | |
| string | Электронный адрес пользователя | ||
| customParam | string | Произвольный параметр, который будет передаваться в выгрузку заявок | comment | string | Комментарий пользователя |
Вот, что Вам нужно сделать в Личном кабинете MANGO OFFICE, в разделе "Коллтрекинг":
1) выберите пункт «Интеграции»;
2) в поле "Сайт" проверьте, правильно ли выбран виджет для подключения интеграции с Заявками с сайта;
3) нажмите на блок «Заявки с сайта»:
1) выберите пункт «Интеграции»;
2) в поле "Сайт" проверьте, правильно ли выбран виджет для подключения интеграции с Заявками с сайта;
3) нажмите на блок «Заявки с сайта»:
1) нажмите кнопку «Добавить форму»:
2) в поле «Укажите название формы» Вам нужно ввести название Вашей
формы (например, форма на главной странице сайта), см. рисунок ниже;
Примечание. Используйте информативное название, по которому, в дальнейшем, при работе с отчетами коллтрекинга, можно будет легко понять назначение формы.
3) в поле «Селектор кнопки отправки формы» укажите селектор кнопки, размещенной в Вашей форме;
Важно. Подробнее о селекторе и где его взять смотрите в тут.
4) настройте соответствие полей коллтрекинга и селекторов Вашей формы.
Важно. В базе коллтрекинга есть 4 поля для сохранения данных формы: имя, email, телефон, комментарий. Их значения автоматически получаются от селекторов формы, размещенной на Вашем сайте. Настройка соответствия полей и селекторов формы необходима, чтобы коллтрекинг мог определять, в какое поле базы сохранять значение, введенное в определенное поле формы.
Чтобы настроить соответствие полей коллтрекинга и Вашей формой, выполните следующие действия:
а) в поле «Тип поля» выберите поле коллтрекинга;
б) скопируйте селектор поля формы из браузера и вставьте его в поле «Селектор поля» окна «Подключение формы»;
в) чтобы добавить еще одно поле, нажмите кнопку «Добавить поле», затем повторите действия а), б);
г) повторите действия а)- в) для всех полей Вашей формы.
а) в поле «Тип поля» выберите поле коллтрекинга;
б) скопируйте селектор поля формы из браузера и вставьте его в поле «Селектор поля» окна «Подключение формы»;
в) чтобы добавить еще одно поле, нажмите кнопку «Добавить поле», затем повторите действия а), б);
г) повторите действия а)- в) для всех полей Вашей формы.
Важно. Коллтрекинг поддерживает сохранение только 4 полей формы: имя, email, телефон, комментарий.
5) после того как Вы настроите соответствие всех полей формы, нажмите кнопку «Подключить»:
Интеграция «Заявки в сайта» подключена на Вашем коллтрекинге.
Открыта страница «Заявки с сайта», на которой показана активная интеграция с Вашей формой:
Селектор - это обязательный параметр кнопки или поля (или иного элемента интерфейса), размещенного в Вашей форме, по которому определяется местонахождения элемента интерфейса в коде сайта. Селектор Вы указываете при настройке соответствия полей и селекторов формы.
Примечание. Поскольку дизайн сайта может поменяться, селектор элемента интерфейса тоже может поменяться.
При настройки интеграции коллтрекинга вместо селектора Вы можете указать уникальный ID-номер кнопки или поля. ID-номер элемента не меняется при изменении дизайна сайта.
Получить селектор кнопки или поля Вы можете при помощи браузера. В разных браузерах получение селекторы происходит по-разному:
Чтобы определить селектор кнопки или поля, размещенного на форме, в браузере Google Chrome нужно:
1) наведите курсор на кнопку / поле, селектор которого хотите получить, и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите пункт «Посмотреть код»:
1) наведите курсор на кнопку / поле, селектор которого хотите получить, и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите пункт «Посмотреть код»:
2) открыта консоль браузера Google Chrome, в которой подсвечена строка с
параметрами кнопки / поля (см. рисунок ниже). Наведите курсор на выделенную строку и
нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите «Copy -> Copy selector»:
В результате будет скопирован селектор выбранного Вами ранее элемента (кнопки или поля). Теперь Вы можете вернуться к настройке соответствия полей и селекторов формы и вставить скопированный селектор в соответствующее поля настроек интеграции.
Чтобы определить селектор кнопки или поля, размещенного в форме, в браузере Mozilla Firefox нужно:
1) наведите курсор на кнопку / поле, селектор которого хотите получить, и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите пункт «Исследовать элемент»:
1) наведите курсор на кнопку / поле, селектор которого хотите получить, и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите пункт «Исследовать элемент»:
2) открыта консоль
браузера Mozilla Firefox, в которой подсвечена строка с параметрами
кнопки / поля (см. рисунок ниже). Наведите курсор на выделенную строку и нажмите правую
кнопку мыши. Будет открыто контекстное меню, в котором выберите «Копировать -> CSS-селектор»:
В результате будет скопирован селектор выбранного Вами ранее элемента (кнопки или поля).
Теперь Вы можете вернуться к настройке соответствия полей и селекторов формы с формой и вставить скопированный селектор в соответствующее поля настроек интеграции.
Чтобы определить селектор кнопки или поля, размещенного на форме, в браузере Opera нужно:
1) наведите курсор на кнопку / поле, селектор которого хотите получить, и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите пункт «Посмотреть код элемента»:
1) наведите курсор на кнопку / поле, селектор которого хотите получить, и нажмите правую кнопку мыши. Будет открыто контекстное меню, в котором выберите пункт «Посмотреть код элемента»:
2) открыта консоль браузера Opera, в которой подсвечена строка с параметрами
кнопки / поля (см. рисунок ниже). Наведите курсор на выделенную строку и нажмите
правую кнопку мыши. Будет открыто контекстное меню, в котором выберите «Copy -> Copy selector»:
В результате будет скопирован селектор выбранного Вами ранее элемента (кнопки или поля).
Теперь Вы можете вернуться к настройке соответствия полей и селекторов формы и вставить
скопированный селектор в соответствующее поля настроек интеграции.
Вы можете управлять Вашими интеграциями с формой:
1) для каждой формы Вы можете настроить отдельную интеграцию. Тогда данные по заявкам из разных форм будут учитываться отдельно в отчетах коллтрекинга;
2) Вы можете присвоить один из следующих статусов:
- Активна: интеграция включена, данные по заявками из формы поступают в коллтрекинг;
- Не активна: интеграция выключена, но не удалена. Если Вы присвоите этот статус, то данные по заявкам из определенной формы перестанут поступать в коллтрекинг. Данные по заявкам, поступившим ранее, не будут удалены из отчетов коллтрекинга.
3) редактировать настройки интеграции;
4) удалить интеграцию с формой.
1) для каждой формы Вы можете настроить отдельную интеграцию. Тогда данные по заявкам из разных форм будут учитываться отдельно в отчетах коллтрекинга;
2) Вы можете присвоить один из следующих статусов:
- Активна: интеграция включена, данные по заявками из формы поступают в коллтрекинг;
- Не активна: интеграция выключена, но не удалена. Если Вы присвоите этот статус, то данные по заявкам из определенной формы перестанут поступать в коллтрекинг. Данные по заявкам, поступившим ранее, не будут удалены из отчетов коллтрекинга.
3) редактировать настройки интеграции;
4) удалить интеграцию с формой.
Чтобы временно прекратить передачу данных по заявкам из формы в коллтрекинг, нужно присвоить интеграции статус «Не активна». Тогда данные по заявкам из формы перестанут поступать в коллтрекинг, однако данные, поступившие ранее, не будут удалены из отчетов коллтрекинга.
Чтобы сменить статус интеграции с формой, в Личном кабинете MANGO OFFICE выполните:
1) откройте настройки интеграции с формой;
2) в строке с данными нужной интеграции с формой, передвиньте переключатель:
- налево, чтобы деактивировать интеграцию;
- направо, чтобы активировать интеграцию:
Чтобы сменить статус интеграции с формой, в Личном кабинете MANGO OFFICE выполните:
1) откройте настройки интеграции с формой;
2) в строке с данными нужной интеграции с формой, передвиньте переключатель:
- налево, чтобы деактивировать интеграцию;
- направо, чтобы активировать интеграцию:
Чтобы редактировать параметры интеграции с формой, в Личном кабинете MANGO OFFICE выполните:
1) откройте настройки интеграции с формой;
2) в строке с данными нужной интеграции с формой нажмите на кнопку
;
3) в открывшемся окне «Редактирование формы», поменяйте нужные Вам параметры подключения, затем нажмите на кнопку «Сохранить»:
1) откройте настройки интеграции с формой;
2) в строке с данными нужной интеграции с формой нажмите на кнопку
;3) в открывшемся окне «Редактирование формы», поменяйте нужные Вам параметры подключения, затем нажмите на кнопку «Сохранить»:
После удаления интеграции с формой, данные по заявкам из определенной формы перестанут поступать в коллтрекинг. Данные по заявкам, поступившим ранее, не будут удалены из отчетов коллтрекинга.
Чтобы удалить интеграцию с формой, в Личном кабинете MANGO OFFICE выполните:
1) откройте настройки интеграции с формой;
2) в строке с данными нужной интеграции с формой нажмите на кнопку
;
3) нажмите кнопку «Удалить»:
Чтобы удалить интеграцию с формой, в Личном кабинете MANGO OFFICE выполните:
1) откройте настройки интеграции с формой;
2) в строке с данными нужной интеграции с формой нажмите на кнопку
;3) нажмите кнопку «Удалить»:
После того как Вы настроили интеграцию с формой, в Сквозной аналитике Вы увидите количество заявок с сайта и общее количество лидов.
Кроме этого, данные по заявкам с сайта будут отображаться в Журнале на вкладке «Все обращения». Ниже показан пример обращения по заявке с сайта:
Кроме этого, данные по заявкам с сайта будут отображаться в Журнале на вкладке «Все обращения». Ниже показан пример обращения по заявке с сайта:
1) 
(комментарий)
Нажав на эту иконку можно открыть комментарий, оставленный Клиентом в поле «Комментарий» Вашей формы. Комментарий состоит из:
а) название Вашей формы, введенное при настройке интеграции;
б) текста, введенного Клиентом в поле «Имя» Вашей формы;
в) контактов, введенных Клиентом в поля «Телефон» и «Электронный адрес». Контакты указываются в формате телефон|электронный адрес;
г) текст, введенный Клиентом в поле «Комментарий»
(комментарий)Нажав на эту иконку можно открыть комментарий, оставленный Клиентом в поле «Комментарий» Вашей формы. Комментарий состоит из:
а) название Вашей формы, введенное при настройке интеграции;
б) текста, введенного Клиентом в поле «Имя» Вашей формы;
в) контактов, введенных Клиентом в поля «Телефон» и «Электронный адрес». Контакты указываются в формате телефон|электронный адрес;
г) текст, введенный Клиентом в поле «Комментарий»
Важно. Если в строке с данными заявки показана иконка , а при нажатии на нее окно с комментарием НЕ открывается, причина может быть в следующем:
- Клиент не оставил комментарий;
- на Вашей форме нет поля «Комментарий»;
- в скрипте не реализована передача параметра «comment», если, конечно, интеграция с формой настроена, путем размещения скрипта на Вашем сайте.
, а при нажатии на нее окно с комментарием НЕ открывается, причина может быть в следующем:- Клиент не оставил комментарий;
- на Вашей форме нет поля «Комментарий»;
- в скрипте не реализована передача параметра «comment», если, конечно, интеграция с формой настроена, путем размещения скрипта на Вашем сайте.
2) дата и время, когда обращение было получено;
3)
- тип обращения «Заявка с сайта»;
4) телефон Клиента;
5) длительность звонка (не актуально для заявок с сайта);
6) параметры «Источник / Канал», «Кампания», «Ключевое слово» и «Регион» заполняются на основе utm-меток в ссылке, по которой Клиент перешел на Ваш сайт;
7) группа (сотрудников ВАТС), на которых завершился звонок Клиента;
8) тег – это слово или словосочетание, которым охарактеризовано обращение в Вашу компанию. Подробнее о тегах коллтрекинга…
9) признак, является ли данное обращение Лидом или нет. Подробнее о корректировке лидов…
3)
- тип обращения «Заявка с сайта»;4) телефон Клиента;
5) длительность звонка (не актуально для заявок с сайта);
6) параметры «Источник / Канал», «Кампания», «Ключевое слово» и «Регион» заполняются на основе utm-меток в ссылке, по которой Клиент перешел на Ваш сайт;
7) группа (сотрудников ВАТС), на которых завершился звонок Клиента;
8) тег – это слово или словосочетание, которым охарактеризовано обращение в Вашу компанию. Подробнее о тегах коллтрекинга…
9) признак, является ли данное обращение Лидом или нет. Подробнее о корректировке лидов…
Данные по заявкам с сайта могут автоматически передаваться в Вашу CRM-систему (или иную аналитическую систему), если Вы подключите и настроите опцию «Вебхуки» коллтрекинга.
Режим передачи данных - real time.
Вот как это работает. Когда Клиент оставляет Вам свои данные в форме обратной связи, коллтрекинг передает вебхук в Вашу CRM-систему. В результате обработки вебхуков, в CRM-системе создается обращение с типом «ФОС» и настроенными параметрами.
Подробнее о том, как настроить передачу вебхуки с данными формы, читайте в этой статье.
Режим передачи данных - real time.
Вот как это работает. Когда Клиент оставляет Вам свои данные в форме обратной связи, коллтрекинг передает вебхук в Вашу CRM-систему. В результате обработки вебхуков, в CRM-системе создается обращение с типом «ФОС» и настроенными параметрами.
Подробнее о том, как настроить передачу вебхуки с данными формы, читайте в этой статье.
