Как настроить передачу рекламных источников с вашего сайта в Upservice
Upservice умеет собирать информацию откуда пришел клиент (рекламные источники) и выводить ее прямо в переписке с клиентом. Сбор информации о клиентах работает для каналов Чат на сайте и Форма на сайте.
В данной инструкции мы расскажем, как настроить передачу рекламных источников (UTM-меток и параметра referral) с вашего сайта на страницу с формой сбора контактных данных от Upservice.
Для начала нужно подключить канал «Форма на сайте».
Далее нужно разместить специальный код в HEAD на всех страницах сайта:
<script>
if (document.readyState !== 'loading') {
saveUtmToSessionStorage();
us_clickInterception();
} else {
document.addEventListener('DOMContentLoaded', () => {
us_clickInterception();
saveUtmToSessionStorage();
});
}
function saveUtmToSessionStorage() {
const url = new URL(window.location.href);
const searchParams = new URLSearchParams(url.search);
const utmObject = {};
searchParams.forEach((value, key) => {
if (key.startsWith('utm')) {
const utmKey = key;
utmObject[utmKey] = value;
}
});
const sessionUtm = JSON.parse(sessionStorage.getItem('utmObject'));
const referrer = JSON.parse(sessionStorage.getItem('referrer'));
if (!sessionUtm || !Object.keys(sessionUtm).length) {
sessionStorage.setItem('utmObject', JSON.stringify(utmObject));
}
if (!referrer && !document.referrer.includes(url.origin)) {
sessionStorage.setItem('referrer', JSON.stringify(document.referrer));
}
}
function us_clickInterception() {
var links = document.querySelectorAll('a');
Array.prototype.forEach.call(links, function (link) {
if (link.href.includes('app.upservice.io')) {
const originalHref = link.href;
link.addEventListener('click', function () {
const url = new URL(window.location.href);
const searchParams = new URLSearchParams(url.search);
const utmObject = JSON.parse(sessionStorage.getItem('utmObject')) || {};
const referrer = JSON.parse(sessionStorage.getItem('referrer'));
searchParams.forEach((value, key) => {
if (key.startsWith('utm')) {
const utmKey = key
utmObject[utmKey] = value
}
})
if (referrer && link.href.includes('app.upservice.io')) {
searchParams.set('referrer', referrer);
}
for (const key in utmObject) {
if (utmObject.hasOwnProperty(key)) {
searchParams.set(key, utmObject[key]);
}
}
const paramsString = searchParams.toString();
link.href = paramsString ? link.href + '?' + paramsString : link.href;
setTimeout(() => { link.href = originalHref }, 100);
});
}
});
}
</script>
Ниже приводится пошаговый пример подключения скрипта для сайта на Tilda:
1. Нажмите на троеточие и выберите пункт «Ещё».
2. Нажмите на кнопку «Редактировать код».
3. Вставьте в пустую область скопированный скрипт.
4. Проверьте скрипт, чтобы он не был вложен в другие скрипты или теги.
5. После того как изменения были внесены, нажмите справа вверху экрана кнопку «Сохранить».
6. После сохранения изменений ОБЯЗАТЕЛЬНО зайдите на страницу «Мои сайты» и перейдите в «Редактировать сайт».
7. Нажмите кнопку «Опубликовать все страницы».
Чтобы проверить передачу рекламных источников в Upservice, перейдите на страницу вашего сайта, где разместили скрипт, заполните форму и отправьте заявку.
Данные заполненной формы на сайте придут в Upservice. Перейдите в раздел «Контакты» и в нужном диалоге наведите на иконку ⓘ. Проверьте, что рекламные источники отображаются.