Tilda. Как пробросить UTM-метки на другую страницу?

Вероятно, у вас появилась проблема с потерей UTM-меток клиентов, которые гуляют по страницам сайта либо переходят на другой ресурс. В этой статье будет представлен скрипт для решения данной проблемы.

Как это работает? Когда пользователь переходит на ваш сайт с UTM-метками, скрипт сделает все возможное, чтобы сохранить эти метки при перемещении пользователя между различными разделами вашего сайта или переходе на другой сайт. Таким образом, у вас по-прежнему будет доступ к данным о первоначальном источнике трафика даже после многочисленных переходов.

Переброска меток по ссылкам на странице

Данный код нужно указать в блок: Другое ⟶ T123 ⟶ HTML-код

				
					<script>
t_onReady(function () {
    var search = "?" + window.location.search.split("&").filter(function(val) {
        var value = val.replace(/\?/, '');
        return value.indexOf("s_") === -1 && value.indexOf("tfc_") === -1;
    }).join("&").replace(/\?/, "");
    
    if (search !== "?") {
        var aLinks = document.querySelectorAll('a');
        var arrayLinks = Array.from(aLinks);
        arrayLinks.forEach(function (el) {
            var href = el.getAttribute("href");
            if (href && href.indexOf("learngenius.ru") > -1 && href.indexOf("#") === -1) {
                if (href.indexOf("?") === -1) {
                    el.setAttribute("href", href + search);
                } else {
                    el.setAttribute("href", href + search.replace("?", "&"));
                }
            }
        });
    }

});
</script>
				
			

Замените «learngenius.ru» на ваш собственный домен, в рамках которого вы хотите передавать метки. Также, вместо «learngenius.ru» можно ввести символ точки (.), чтобы метки передавались для всех страниц.

Проброска меток из формы на страницу успеха

Данный код нужно указать в блок: Другое ⟶ T123 ⟶ HTML-код

				
					<script>
$(document).ready(function () {
    $("form[data-success-url]").each(function () {
        var url = $(this).attr("data-success-url");
        var search = "?" + window.location.search.split("&").filter(val => val.replace('?', '').indexOf('s_') !== 0).join("&").replace('?', '');
        if (search !== "?" && url != undefined && !url.includes("#")) {
            if (!url.includes("?")) {
                $(this).attr("data-success-url", url + search);
            } else {
                $(this).attr("data-success-url", url + search.replace("?", "&"));
            }
        }
    });
});
</script>
				
			
Проброска меток на определенную ссылку через амперсанд

Был у меня еще один запрос — на сайте были кнопки на чат-боты ВКонтакте и Телеграм. Если с телеграмом, первый скрипт срабатывал верно, то с ВК — нет, потому что там была ссылка следующего вида: vk.com/app…#test&force=1

Соответственно, этот скрипт превращал ссылку в vk.com/app…#test&force=1?utm_source=…, что, соответственно, неправильно, и оно просто не работало. Поэтому для решения этой проблемы нужен был скрипт, который добавит метки к кнопке с ВК не через знак вопроса (?), а через амперсанд (&), но при этом не заденет остальные кнопки.

Ниже сам скрипт. Возможно, кому-то он также будет нужен.

Данный код нужно указать в блок: Другое ⟶ T123 ⟶ HTML-код

				
					<script>
const paramsString = window.location.search.slice(1);
const buttonLink = document.querySelector('a[href="https://vk.com/app...#...&force=1"]');


if (paramsString) {
  buttonLink.href += `&${paramsString}`;
} else {
  buttonLink.href += paramsString;
}
</script>
				
			

Замените «https://vk.com/app…#…&force=1» на нужную ссылку, куда вы хотите передавать метки.

На этом всё. Если что-то будет появляться новое, то дополню статью. Надеюсь было полезно :)

Оставьте контакты и мы свяжемся с вами​