UTM метки в коде
Шаг 1. Сохраняем и переносим метки из query в localStorage, что бы получить их позже.
Хелперы.
Можно оставить их рядом с инитом или вынести в какой то глобальный обьект (в примере window.lib)
Можно оставить их рядом с инитом или вынести в какой то глобальный обьект (в примере window.lib)
// Получает utm метки из квери параметров
const getUtmFromQuery = () => {
const utmList = [...new URL(location).searchParams]
.filter(([name]) => /utm_/.test(name));
const utmData = {
...Object.fromEntries(utmList)
};
if (document.referrer) {
utmData.referrer = document.referrer;
}
return Object.keys(utmData).length ? utmData : null;
}
// Получает сохраненные utm метки из localStorage
const getUtmFromLocalStorage = () => {
try {
return JSON.parse(localStorage.getItem('client_utm') || 'null');
}
catch (err) {
console.error(err);
return null;
}
}
// Получает utm метки (объединяет данные, квери приоритетнее)
const getUtmData = () => {
return {
...getUtmFromLocalStorage(),
...getUtmFromQuery()
};
}
// Сохраняет UTM метки в localStorage
const saveUtmToLocalStorage = (utmData) => {
return localStorage.setItem('client_utm', JSON.stringify(utmData));
}
// Сохраним хелперы для реиспользования в дальнейшем
window.lib = {
getUtmData,
getUtmFromQuery,
getUtmFromLocalStorage,
saveUtmToLocalStorage
};
Инициализация.
Данный код должен быть на всех страницах сайта, что бы переносить квери в localStorage
Данный код должен быть на всех страницах сайта, что бы переносить квери в localStorage
const fromQuery = lib.getUtmFromQuery();
const fromLocalStorage = lib.getUtmFromLocalStorage();
// Нет данных в локальном хранилище, но есть в квери (первое посещение вероятно)
// Сохраняем в локальный стор
if (!fromLocalStorage && fromQuery) {
lib.saveUtmToLocalStorage(fromQuery);
}
Шаг 2. Читаем метки из localStorage и используем как вздумается
// Квери
document.querySelector('#query').innerHTML = JSON.stringify(
lib.getUtmFromQuery(),
null,
2
);
// localStorage
document.querySelector('#localStorage').innerHTML = JSON.stringify(
lib.getUtmFromLocalStorage(),
null,
2
);
// total
document.querySelector('#total').innerHTML = JSON.stringify(
lib.getUtmData(),
null,
2
);
Пример
Метки из квери:
Метки из localStorage:
Суммарно: