КЕЙСЫ
May 20, 2022

Как я организовал передачу данных анкеты в amoCRM из GetCourse и солянки сервисов

ВВОДНЫЕ ДАННЫЕ О ПРОЕКТЕ

Клиент в проекте использует «солянку» из сервисов: Salebot/Senler + GetCourse + amoCRM + Bizon365Чувствуешь боль?))

Чтобы все это между собой работало и как-то «общалось» мы используем сервис-интегратор vakas-tools

От себя сразу скажу, что этот сервис как палочка-выручалочка для самых быстрых интеграций и рекомендую каждому его изучить

КАКАЯ ЗАДАЧА СТОЯЛА ОТ КЛИЕНТА

1. Сделать так, чтобы пользователь в воронке N на этапе M заполнял анкету L и ее данные передавались в определенный этап в amoCRM и менеджеры видели в сделке всю информацию по ней

2. После заполнения анкеты, пользователь должен получать доступ на 7 дней к курсу R, который лежит на GetCourse

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

ВВОДНЫЕ ДАННЫЕ ПО ЗАДАЧЕ

Пользователь изначально регистрируется в сервисах Salebot/Senler (все зависит от рекламы и где ее увидел), попадает в воронку, данные передаются об этом в GetCourse (создается профиль пользователя + нулевой заказ с регистрацией + utm-метки) и передаются потом в amoCRM для обработки менеджерами

На определенном этапе воронки пользователю предлагается заполнить анкету (6 вопросов) и получить за это доступ к бесплатному мини-курсу

Задачка вызывает примерно такие эмоции
Это я, когда присылают очередное тз на 100+ сервисов))

КАК БЫЛО СДЕЛАНО ДО МЕНЯ

Анкета была сделана на лендинге Tilda в виде формы и с последующей переадресацией на другую форму (Страница на GetCourse) с доступом к курсу

Главный экран страницы с мини-курсом
Пример анкеты
Форма на GetCourse с получением доступа к курсу после анкеты

Какие проблемы были при такой реализации?

Данные пользователя оставались только на Tilda и пользователю приходилось заполнять данные о себе 2 раза: в самой анкете и в форме получения доступа на GetCourse…

Просто жесть, да?) Доходили до конца только самые заряженные, а это, между прочим, холодный трафик

Это создавало как минимум 3 проблемы

1. Потеря данных
Тильда не интегрирована с amoCRM и данные об анкете остаются только в Tilda. Менеджеры не видят ответы на анкету

2. Дубли пользователей
Пользовать вводит разные почты на разных этапах воронки и от этого страдает аналитика и теряется история взаимодействия пользователя с проектом

3. Негатив пользователя
Он же и так заполнил данные, зачем ему еще раз их заполнять

Какие есть варианты решения данной проблемы?

1. Сделать интеграцию Tilda — amoCRM и передавать туда данные анкеты после заполнения формы

Не подходит

Почему? — Потому что данные просто передаются в amoCRM в определенный этап без проверки на дубли и т. д.
— Пользователю все равно приходится заполнять данные в формах 2 раза

2. Сделать интеграцию Tilda — amoCRM и после заполнения анкеты сохранять данные пользователя из формы Tilda и с помощью скрипта передать данные на форму GetCourse

Не подходит

Почему?
— Пользователь мог в форме с анкетой ввести другие данные, не такие как при регистрации и надо было бы написать минимум 2 скрипта: перехват данных в URL на TIlda, которые прикреплялись бы из мессенджеров + перехват данных и перенос их на форму GetCourse
— Очень запарно

3. Сделать анкету на GetCourse, сразу выдавать доступ к курсу после ее заполнения + передать ее данные через процесс и vakas в amoCRM

💫 Хороший вариант, но анкеты из ГК нельзя никуда не передать)) Это просто не предусмотрено сервисом

Все это полурешения… Томить не буду и рассказываю что предложил сделать я

МОЕ РЕШЕНИЕ

1. Оставить лендинг на Tilda, чтобы пользователь видел информацию о мини-курсе, который получит, если заполнит анкету

2. Саму анкету перенести на страницу GetCourse, чтобы клиент там заполнял данные и в форме запускались все нужные обработчики: выдача доступа к курсу, отправка данных в amoCRM, уведомления об открытии доступа. То есть кнопки на лендинге Tilda ведут на лендинг с анкетой в GetCourse

3. Анкету сделать в виде доп. полей по пользователю с типом «строка», чтобы эти данные можно было куда-то передать

4. Использовать секретные параметры в ссылках от GetCourse, чтобы данные о пользователе автоматически заполнялись без дополнительных скриптов и пользователь приходил на GetCourse с данными, с которыми изначально зарегистрировался в воронку

5. Данные об анкете передавать через процессы GetCourse в vakas-tools и уже оттуда в amoCRM

Благодаря такому решению, мы сохраним одинаковые данные по пользователю на протяжении всей воронки, даже если он будет переходить из нескольких сервисов, данные по анкете будут храниться на GetCourse (но только самые последние ответы, т. к. поля будут переписываться при новом заполнении) и в amoCRM

Погнали по пунктам

ПУНКТ № 1. Лендинг на TIlda

Когда я записывал курс UTMstarter, то выдал там ученикам скрипт, который переносит из Tilda и не только, данные из URL на любые страницы. То есть UTM-метки и другие параметры могут передаваться без проблем между страницами, что так не хватает при построении правильной аналитики в проектах. Тут он идеально пригодился, т. к. я попросил маркетолога в воронках разметить ссылки специальным образом (об этом дальше)

По итогу клиент приходит на лендинг, нажимает на кнопку и уже попадает на страницу GetCourse со всеми заполненными данными (магия, не иначе)

ПУНКТ № 2. Создание доп. полей по пользователям для анкеты

Создал доп.поля на GetCourse со всеми вопросами по анкете с типом «строка». В целом, можно было и сделать «текст», но вопросы в анкете с короткими ответами и «строка» идеально подходят друг другу

Доп. поля по пользователю для анкеты

Такие «страшные» заголовки потому что на GetCourse заголовок поля = переменная, которую можно передать в другой сервис и нужно заголовки писать без пробелов и слова разделять знаками «_» или «-» для удобства. Добавил «описание» как раз для того, чтобы понимать к какому вопросу относится доп. поле. На самом лендинге с формой скрываю описание, оно там полям не нужно

Эти поля и используем в следующих пунктах

ПУНКТ № 3. Верстка и тех. настройка анкеты на GetCourse

Как выглядит анкета на GetCourse

С лендинга Tilda пользователь приходит страницу-анкету и отвечает на вопросы. Сверстал + немного подогнал дизайн под проект

Получилось неплохо + на мобильных устройствах выглядит тоже достойно

Но! Есть нюанс

Сколько можно? Этих нюансов целая книга что ли? Да, все так. Когда мы используем много сервисов, то работы прибавляется в разы, т. к. чтобы продумать все нюансы и задача хотя бы «работала» нужно потратить много времени

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

Поэтому я написал скрипт, который берет и очищает все поля, которые имеют класс .need-clear

Каждый новый заход на страницу = очищенные поля, т. е. полная имитация типичной анкеты

Демонстрация как работает скрипт

А вот и сам скрипт, еще один в коллекцию для расширения функционала GetCourse. Я поставил его на все страницы сразу

// ОЧИЩАЕМ ПОЛЯ НА СТРАНИЦЕ С ФОРМОЙ
var clearFieldsValue = function clearFieldsValue() {
	//////////////////////////////////////////////////////////////////////////////////////
	// НАЧАЛО ПАНЕЛИ УПРАВЛЕНИЯ СКРИПТОМ

	// Указываем селектор для определения полей, которым нужна очистка
	NEED_CLEAR_FIELDS_SELECTOR = '.need-clear .f-input';

	// КОНЕЦ ПАНЕЛИ УПРАВЛЕНИЯ СКРИПТОМ
	/////////////////////////////////////////////////////////////////////////////////////

	fieldsToClear = document.querySelectorAll(NEED_CLEAR_FIELDS_SELECTOR);
	fieldsToClear.forEach(function (item) {
		if (item.value.trim()) {
			item.value = '';
		}
	});
};
window.addEventListener('DOMContentLoaded', clearFieldsValue);

В настройках формы все как писал выше: Запуск процесса по передачи данных в amoCRM, открытие доступа к курсу и переадресация через 3 секунды в тренинг

Настройки формы на GetCourse

ПУНКТ № 4. Использование секретных переменных от GetCourse для автозаполнения данных

Долго тут не задержусь, т.к. это тема, которой нужно отдельное освещение, но суть такая:

🔥 На GetCourse можно заполнять данные форм, используя в URL специальные параметры

Например, параметр sv[email] отвечает за поле с почтой и если есть какое-то значение, то это поле в форме будет заполнено автоматически

💡 Пример на пальцах

Ссылка без параметров: https://[email protected]

Ссылка с параметром для автозаполнения: https://[email protected]?sv[email][email protected]

В итоге форма будет предзаполнена почтой [email protected]

Всего на GetCourse можно использовать такие параметры в URL:

sv[email] - Email пользователя
sv[full_name] - Полное имя пользователя
sv[phone] - Телефон
sv[first_name] - Имя пользователя
sv[last_name] - Фамилия пользователя
sv[country] - Страна
sv[city] - Город

💡 Пример из реальной практики

Пользователь регистрируется в Salebot с почтой [email protected]. Когда мы даем пользователю ссылку, то нужно в самой ссылке прописать параметры sv[email]=переменная_почты_в_боте, sv[phone]=переменная_телефона_в_боте и тогда данные из бота будут заполнены при заходе на лендинг с формой от GetCourse

ПУНКТ № 5. Настройка процесса на GetCourse для передачи данных по анкете

Процесс на GetCourse для передачи данных по анкете в amoCRM

На скриншоте типичный процесс по отправке данных в другие сервисы

В блоке «Вызвать URL» добавляю поля и отправляю их. Так выглядит итоговая ссылка

https://ssylka?name={object.name}&email={object.email}&phone={object.phone}&getcourse_user_id={object.id}&utm_source={object.utm_source}&utm_medium={object.utm_medium}&utm_campaign={object.utm_campaign}&utm_content={object.utm_content}&utm_term={object.utm_term}&funnel_os_a_pp_vt_m_anketa_tnm_question_1={object.funnel_os_a_pp_vt_m_anketa_tnm_question_1}&funnel_os_a_pp_vt_m_anketa_tnm_question_2={object.funnel_os_a_pp_vt_m_anketa_tnm_question_2}&funnel_os_a_pp_vt_m_anketa_tnm_question_3={object.funnel_os_a_pp_vt_m_anketa_tnm_question_3}&funnel_os_a_pp_vt_m_anketa_tnm_question_4={object.funnel_os_a_pp_vt_m_anketa_tnm_question_4}&funnel_os_a_pp_vt_m_anketa_tnm_question_5={object.funnel_os_a_pp_vt_m_anketa_tnm_question_5}&funnel_os_a_pp_vt_m_anketa_tnm_question_6={object.funnel_os_a_pp_vt_m_anketa_tnm_question_6}

ПУНКТ № 6. Настройка базы в Vakas-tools для передачи данных по анкете

Когда данные из GetCourse отправлены, их нужно еще настроить для передачи в amoCRM в сервисе vakas-tools

Подробно здесь не буду останавливаться, но на скриншоте видно, что в amoCRM менеджеры получают в сделку вот такое примечание после каждой заполненой анкеты

Настройка базы в Vakas-tools для передачи данных по анкете

ПУНКТ № 7. Передача данных в amoCRM и проверка

После заполнения анкеты сделка в amoCRM перемещается в специальный этап «Заполнили анкету»

💡 Менеджеры понимают на каком этапе находятся клиенты и что делают в воронке

Этап воронки "Заполнили анкету"

Вот так хранится история по сделке в amoCRM и данные по анкете. Очень удобно!

История в сделке amoCRM

А вот так все выглядит, если перейти во вкладку "Анкеты" в сделке

Заполненная анкета в сделке

Вот и все))

Если ты дошел до конца, то выдаю тебе медаль 💥

Можно ли это все улучшить? Ну конечно можно! Например, можно использовать анкеты на GetCourse, а ответы с помощью скрипта записывать в скрытые доп. поля пользователя… Это я уже понял после реализации данной задачи и в будущем буду использовать этот вариант

Напиши мне и вместе реализуем задачу любой сложности в твоем проекте

TELEGRAM: https://t.me/NiktarioN

VK: https://vk.com/niktarion1

Мой канал в Telegram: https://t.me/borodach_getcourse

Мой канал на YouTube: https://www.youtube.com/channel/UCkI_5scRF3PAMeyD06EphTQ