Как заставить формы Tilda всегда прокидывать utm-метки в лиды в стандартной интеграции Битрикс24
Проблема: когда клиенты переходят на ваш сайт на Tilda из различных площадок, часто в URL можно увидеть так называемые utm-метки, например
https://example.com/page?utm_source=google&utm_medium=cpc&utm_campaign=search&utm_content=shower&utm_term=1
если клиент,находясь на этой же странице, откроет стандартную тильдовскую форму обратной связи и отправит заявку(при условии что вы уже сделали стандартное подключение к Битрикс24 по инструкции https://help-ru.tilda.cc/forms/bitrix) то UTM-метки передадутся в лид
Но! если клиент вздумает побродить по вашему сайту, переходя по различным страницам и только после этого действия заполнит форму обратной связи то никаких UTM меток в лиде не будет
Причина кроется в том, что в этом случае изначальные utm-метки в адресной строке браузера не сохраняются и не уходят в Тильду и соответственно Тильда не отправит их дальше в ваш Битрикс24
Решение:
1) при первом посещении сайта проверять url на наличие utm-меток и записывать их в куки, тогда utm-метки сохранятся между переходами по страницам
2) повесить обработчик который будет следить за тем, открыли ли вы любую форму и начали ли вводить в поле ввода свои данные. именно в этот момент автоматически подставлять в адресную строку браузера сохраненные в куки utm-метки
3) готово! теперь utm-метки всегда передаются в лид в Битрикс24 и вы спокойно можете отслеживать сквозную аналитику
Ниже скрипт который необходимо разместить в админке тильды(Настройка сайта->Еще->Html-код для вставки внутрь HEAD), после этого он будет работать на всех страницах сайта
<script>
// Функция для установки куки
function setCookie(name, value, days) {
const expires = new Date(Date.now() + days * 24 * 60 * 60 * 1000).toUTCString();
document.cookie = `${name}=${value}; expires=${expires}; path=/;`;
}
// Получение значения куки по имени
function getCookie(name) {
const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
return match ? match[2] : null;
}
// 1. Запись utm-меток из URL
const urlParams = new URLSearchParams(window.location.search);
const utmParams = ['utm_medium', 'utm_source', 'utm_term', 'utm_content', 'utm_campaign'];
utmParams.forEach(param => {
const value = urlParams.get(param);
const existingCookie = getCookie(param);
// Перезаписываем куки, если utm-метка есть в URL
if (value) {
setCookie(param, value, 30);
} else if (!value && existingCookie) {
// Не перезаписываем, если метки нет в URL, но есть в куках
return;
}
});
// 2. Обработка случая отсутствия utm_source и utm_medium
const referrer = document.referrer;
if (!urlParams.get('utm_source') && !urlParams.get('utm_medium')) {
const existingUtmSource = getCookie('utm_source');
const existingUtmMedium = getCookie('utm_medium');
let utmSource = existingUtmSource || '(direct)';
let utmMedium = existingUtmMedium || '(none)';
const currentDomain = window.location.hostname;
if (referrer && new URL(referrer).hostname !== currentDomain){
if ((utmSource === '(direct)' && utmMedium === '(none)')) {
const referrerDomain = new URL(referrer).hostname;
const sourceMapping = {
'google.com': 'google',
'www.google.com': 'google',
'google.ru': 'google',
'www.google.ru': 'google',
'google.kz': 'google',
'www.google.kz': 'google',
'www.google.co.uk': 'google',
'bing.com': 'bing',
'www.bing.com': 'bing',
'duckduckgo.com': 'duckduckgo',
'yandex.ru': 'yandex',
'yandex.ru': 'yandex',
'www.yandex.ru': 'yandex',
'yandex.kz': 'yandex',
'www.yandex.kz': 'yandex',
'ya.ru': 'yandex',
'www.ya.ru': 'yandex',
'ya.kz': 'yandex',
'www.ya.kz': 'yandex',
'www.yahoo.com': 'yahoo',
'yahoo.cn': 'yahoo',
'm.yahoo.com': 'yahoo'
};
const organicSources = Object.keys(sourceMapping);
if (organicSources.some(domain => referrerDomain.includes(domain))) {
utmSource = sourceMapping[organicSources.find(domain => referrerDomain.includes(domain))] || referrer;
utmMedium = 'organic';
} else {
utmSource = referrer;
utmMedium = 'referral';
}
setCookie('utm_source', utmSource, 30);
setCookie('utm_medium', utmMedium, 30);
}
}
if (!existingUtmSource && !existingUtmMedium) {
setCookie('utm_source', utmSource, 30);
setCookie('utm_medium', utmMedium, 30);
}
// 3. Подстановка значений utm-меток из куков в URL при вводе в любой input
function addUtmParamsToUrl() {
const utmParams = ['utm_medium', 'utm_source', 'utm_term', 'utm_content', 'utm_campaign', 'client_id'];
const currentUrl = new URL(window.location.href);
let urlModified = false;
utmParams.forEach(param => {
const cookieValue = getCookie(param);
if (cookieValue && !currentUrl.searchParams.has(param)) {
currentUrl.searchParams.set(param, cookieValue);
urlModified = true;
}
});
if (urlModified) {
window.history.replaceState({}, '', currentUrl);
}
}
// Слушатель событий для ввода в любой input на странице
document.addEventListener('input', (event) => {
if (event.target.tagName === 'INPUT') {
addUtmParamsToUrl();
}
});
</script>
После размещения скрипта не забудьте заново опубликовать все страницы