Скрипты сбора меток и других данных в доп.поля

1. СКРИПТ для сбора меток и данных в доп.поля

Сам скрипт вшивается в раздел скриптов. На Геткурсе он здесь https://millerscours.online/pl/cms/layout

В скрипте deal - это доп.поля заказа, а user - доп.поля пользователя.

Для примера возьмем одну любую строку. Жирные цифры в этом примере:
['utm_source', 'input[name="formParams[dealCustomFields][1298134]']

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

Сам скрипт для одного из моих проектов (заменить мои поля и их id на свои):

window.addEventListener('DOMContentLoaded', () => {
const UTMS = [
['utm_source', 'input[name="formParams[dealCustomFields][1298134]'],
['utm_medium', 'input[name="formParams[dealCustomFields][1298135]'],
['utm_campaign', 'input[name="formParams[dealCustomFields][1298136]'],
['utm_content', 'input[name="formParams[dealCustomFields][1298137]'],
['utm_term', 'input[name="formParams[dealCustomFields][1298138]'],
['utm_source', 'input[name="formParams[userCustomFields][1417449]'],
['utm_medium', 'input[name="formParams[userCustomFields][1417450]'],
['utm_campaign', 'input[name="formParams[userCustomFields][1455237]'],
['utm_content', 'input[name="formParams[userCustomFields][1455238]'],
['utm_term', 'input[name="formParams[userCustomFields][1455239]'],
['sid', 'input[name="formParams[userCustomFields][1468885]'],
['vkparam', 'input[name="formParams[userCustomFields][1556957]'],
];

// Функция для получения параметров UTM
const getUTM = (name, inputSelector) => {
const inputs = document.querySelectorAll(inputSelector);

if (inputs.length === 0) return;

// Записываем в переменную полное значение ссылки в поисковой строке и преобразовываем ее в нормальный вид
const searchParams = decodeURIComponent(window.location.href);

// В переменную записываем итог регулярного выражения
const result = searchParams.match(new RegExp(name + '=([^&=]+)'));

// Если нашлось соответствие, то записываем в input значение
if (result && result !== null) {
inputs.forEach(input => {
input.value = decodeURI(result[1]);
});
}
};

const setOrderSettings = () => {
// Задаем интервал для проверки появления input на странице раз в 0.5 миллисекунд
setInterval(() => {
UTMS.forEach(([utm, fieldId]) => getUTM(utm, fieldId));
}, 500);
};
setOrderSettings();
});

Вносится скрипт сюда:

Далее копируем ссылку на файл скрипт тут:

Эту ссылку нужна вставить в раздел настроек аккаунта в поле "Счетчики и прочие скрипты". Шаблон для прописывания ссылки.

<!-- СКРИПТ ДЛЯ ЗАХВАТА UTM-МЕТОК -->
<script src="https://zolotoiportnoiru.getcourse.ru/pl/cms/layout/js?id=26874&hash=8db1333e21749d38f9926976d569e60c&bundle=1"></script>

Заменить в шаблоне ссылку на ту, которую скопировали в разделе выше.

Все сохранить.

Скрипт сбора меток в аккаунт добавлен. При появлении новых доп.полей, в которые нужно записывать данные, нужно добавить в скрипт новую строку deal - для доп.поля заказа, или user - для доп.поля пользователя.
И изменить в этой новой строке данные.

Например, у нас 2 отдела продаж. Менеджеры ОП дают ссылку на лендинг клиентам и те делают заказы. Мы хотим записывать в заказ данные о том, от какого ОП человек совершил заказ.

Для этого мы добавили в аккаунте новое доп.поле заказа "ОП", в которое будем записывать код ОП.

Теперь нужно прописать данные этого нового доп.поля в скрипт.

Скопируем подходящую имеющуюся в скрипте строку доп.поля заказа. Жирным выделено то, что нужно будет заменить:
['utm_source', 'input[name="formParams[dealCustomFields][1298134]']

Сейчас эта строка записывает из всех ссылок значение utm_source в доп.поле с id 1298134. Меняем параметры.

'utm_source' - название параметра, который у нас будет прописан в ссылке, которую ОП даст клиенту. Дадим название нашему параметру 'op' и пропишем его в строке.

1298134 - id поля заказа, в которое мы записываем значение utm_source из ссылок. Нам нужно узнать id нашего нового доп.поля "ОП" и прописать его в строке.
Предположим, что id будет 0000000.

Тогда получим ссылку вида
['op', 'input[name="formParams[dealCustomFields][0000000]']

Добавляем новую строку в скрипт и сохраняем.

Теперь мы можем добавлять во всех нужных формах доп.поле заказа "ОП" и записывать в него данные из ссылки.

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

ТАКОЙ:

https://millerscours.online/?utm_source=test&utm_medium=test&utm_campaign=test&utm_content=test&utm_term=test&op=opalina

Наверх

2. Захват и автоподстановка в форму имени, почты и телефона человека из ссылки

На Геткурсе добавляется так же, как описано выше.

Сам скрипт добавляем в раздел со скриптами: https://millerscours.online/pl/cms/layout/index

$(document).ready(function(){
var $input_email = $('input[name="formParams[email]"]') || false;
if ($input_email && $input_email.val() !== undefined && $input_email.val().length <= 0) {
var searchParams = new URLSearchParams(window.location.search);
if (searchParams.get('email') && searchParams.get('email').length > 0 ) {
$input_email.val(searchParams.get('email'));
}
}

var $input_phone_number = $('input[name="formParams[phone]"]') || false;
if ($input_phone_number && $input_phone_number.val() !== undefined && $input_phone_number.val().length <= 0) {
var searchParams = new URLSearchParams(window.location.search);
if (searchParams.get('phone') && searchParams.get('phone').length > 0 ) {
$input_phone_number.val(searchParams.get('phone'));
}
}

var $input_first_name = $('input[name="formParams[full_name]"]') || false;
if ($input_first_name && $input_first_name.val() !== undefined && $input_first_name.val().length <= 0) {
var searchParams = new URLSearchParams(window.location.search);
if (searchParams.get('first_name') && searchParams.get('first_name').length > 0 ) {
$input_first_name.val(searchParams.get('first_name'));
}
}

var $input_first_name = $('input[name="formParams[first_name]"]') || false;
if ($input_first_name && $input_first_name.val() !== undefined && $input_first_name.val().length <= 0) {
var searchParams = new URLSearchParams(window.location.search);
if (searchParams.get('first_name') && searchParams.get('first_name').length > 0 ) {
$input_first_name.val(searchParams.get('first_name'));
}
}
});

Дальше также вставляем ссылку на него в настройки аккаунта Геткурс:

<!— СКРИПТ ДЛЯ ЗАХВАТА почт из ссылки в форму -->
<script src="https://millerscours.online/pl/cms/layout/js?id=26264&hash=3e4264f3b205848e8b1cf30eacb33f28&bundle=1"></script>

Наверх

3. СКРИПТ для Тильды - проброска меток и данных из ссылки в Сейлбот

Для чего: имеем лендинг на Тильде.
В ссылку на лендинг вшити utm-метки - для передачи данных о трафике.
Дальше человек заполняет форму в виджете Геткурс - вводит туда имя, фамилию, почту и телефон.
А после человек должен попасть на страницу Спасибо и выбрать мессенджер - Телеграм или ВК.

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

Это даст вот что - человека можно будет идентифицировать в Сейлботе и на Геткурсе. Прекрасно понимать, кто он в Сейлботе. И процессом с Геткурса отправлять ему все нужные сообщения через Сейлбот.

Для того, чтобы вшить эти данные в ссылку и передать их в Сейлбот, нужен скрипт.

Для Тильды он вставляется в конце страницы.

В нашем примере настраиваем так.

В виджет формы Геткурс для лендинга в обработчик вставить переадресацию на страницу Спасибо.

Ссылка должна быть вида:
https://millerartemii.online/thanks12/?utm_source={monitor_utm_source}&utm_campaign={monitor_utm_campaign}&utm_medium={monitor_utm_medium}&utm_content={monitor_utm_content}&utm_term={monitor_utm_term}&email={email}&phone={phone}&first_name={name}

❗️ Обязательно включить "Заменять переменные в URL".

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

На страницу Спасибо, с которой люди пойдут в Сейлбот, нужно в самом низу вшить такой скрипт:

Он подставить все данные из ссылки в поля минилендинга Сейлбот.

Настроить минилендинг Сейлбот.

Дописать инструкцию - как настроить?

Наверх

4. СКРИПТ для лендинга Геткурс - проброска меток и данных ссылки в Сейлбот

Скрипт от Тильды подходить и для проброски данных с лендинга Геткурс при условии, что кнопка будет добавлена на страницу не как элемент "кнопка", а кодом.

Потому что скрипт прописан для элементов a href, а кнопки на Геткурс прописаны как элемент buttom. Поэтому передать по кнопке с этим скриптом не получается.

Я экспериментировала с этой настройкой 1 раз - был какой-то косяк в передаче. Кажется, не передалось имя. Не буду тратить время и уточнять.

Допилю инструкцию при случае.

У меня получилось пробрасывать данные так:

В самом низу - скрипт из раздела про Тильду в блоке JacaScipt-код.

Кнопка прописана кодом в блоке "Стандартный блок".

<div style="text-align: center;">
<a href="https://salebot.site/razbor3003_1?phone={phone}&email={email}&first_name={name}" class="telegram-btn"><strong>Подключить бота</strong></a>
</div>

Ссылка ведет на минилендиг Сейлбот и тащит туда все параметры со страницы.
В коде прописан класс элемента - telegram-btn

Обязательно включить "Заменять переменные пользователя".

Последняя настройка - стиль кнопки в раздел блока "Стиль" под тот класс, который мы присвоили кнопке в коде (у нас telegram-btn):

.telegram-btn {
background-color: #6E9ECF;
color: #ffffff !important; /* Установка белого цвета текста с помощью !important *//* Цвет текста ссылки */
padding: 20px 15px;
text-decoration: none; /* Убираем подчеркивание у ссылок по умолчанию */
border-radius: 9px; /* Добавляем скругление углов, если это необходимо */
font-size: 16px;
text-align: center; /* Центрирование текста в кнопке */
display: inline-block; /* Для центровки текста нужен блочно-строчный элемент */
transition: background-color 0.3s, color 0.3s;
/* Добавление тени: горизонтального смещения, вертикального смещения, радиуса размытия и цвета */
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
}

.telegram-btn:hover {
color: #ffffff !important; /* Установка белого цвета текста с помощью !important *//* Цвет текста при наведении */
background-color: #85b9ed;
}

Этот способ нужно докручивать и дописывать инструкцию. Ура

Наверх

Вернуться в оглавление