Как сохранить UTM метки? - Записать в cookies. Проброс utm

Оглавлениение

Сохранение UTM меток в Cookies может быть полезным для последующего анализа трафика, персонализации контента и отслеживания конверсий. В этой статье мы рассмотрим, как сохранить UTM метки в Cookies с помощью JavaScript.

Если вы хотите более точно отслеживать эффективность ваших маркетинговых усилий, я бы настоятельно рекомендовал воспользоваться инструментом — генератор utm меток.

Этот инструмент поможет вам добавить дополнительную информацию к URL-адресам ваших кампаний, что позволит вам узнать, откуда приходит ваш трафик и какие источники или кампании наиболее эффективны.

Пример работы JavaScript по сохранению UTM в куки

Источник, по которому вы пришли на данный сайт —

Текущий визит

utm_source
utm_medium
utm_campaign
utm_content
utm_term

Первый визит

utm_source
utm_medium
utm_campaign
utm_content
utm_term

Готовый JavaScript для сохранения UTM меток в cookies

Для передачи GET параметров между страницами вы можете записывать UTM-метки в Cookies, установив их значения при переходе пользователя на ваш сайт и сохраняя их для последующего использования. Вот пример того, как это можно сделать на JavaScript:

// Задаем поиcковые системы
const serps = [
    {name:"https://yandex.ru/"},
    {name:"https://ya.ru/"},
    {name:"https://www.google.ru/"},
    {name:"https://www.google.com/"},
    {name:"https://yandex.by/"},
    {name:"https://ya.by/"},
    {name:"https://yandex.kz/"},
    {name:"https://ya.kz/"},
    {name:"https://yandex.ru/"},
    {name:"https://ya.ru/"},
    {name:"https://mail.ru/"},
    {name:"https://go.mail.ru/"},
    ];

// Парсим все GET параметры в URL
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

// Вычленяем UTM метки из GET параметров
var source = getParameterByName('utm_source');
var medium = getParameterByName('utm_medium');
var campaign = getParameterByName('utm_campaign');
var content = getParameterByName('utm_content');
var term = getParameterByName('utm_term');
var referrer = document.referrer;

// Задаем время жизни cookies
var date = new Date();
var now = new Date();
var time = now.getTime();
var expiryDays = 30;
var expiryMinutes = 40;
// Устанавливаем на дни
date.setTime(date.getTime()+(expiryDays*24*60*60*1000));
var expires = "expires="+date.toGMTString();
// Устанавливаем на сессию
var expireTime = time+(expiryMinutes*60*1000);
now.setTime(expireTime);
var expiresSession = "expires="+now.toGMTString();

// Читаем ранее записанные cookies
function getCookie(name) {
  var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\\') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

// Первый источник визита
if (typeof getCookie("first_utm_gettotop") === 'undefined') {
    if(source == undefined || source == null || source == "") {
        if (referrer == undefined || referrer == null || referrer == "") {
            document.cookie = "first_utm_source=direct; "+expires+"; path=/";
            document.cookie = "first_utm_medium=direct; "+expires+"; path=/";
            document.cookie = "first_utm_refferal=Прямой заход; "+expires+"; path=/";
        } else {
            const organic = serps.find(({ name }) => name === referrer);
            console.log(organic)
            if (organic != null) {
                document.cookie = "first_utm_source=" +referrer+ ";" +expires+ "; path=/";
                document.cookie = "first_utm_medium=organic; "+expires+"; path=/";
                document.cookie = "first_utm_refferal=" +referrer+ ";" +expiresSession+ "; path=/";
            } else {
                document.cookie = "first_utm_source=" +referrer+ ";" +expires+ "; path=/";
                document.cookie = "first_utm_medium=referrer; "+expires+"; path=/";
                document.cookie = "first_utm_refferal=" +referrer+ ";" +expires+ "; path=/";
            }
        }
    } else {
        document.cookie = "first_utm_source=" +source+ ";" +expires+ "; path=/";
        document.cookie = "first_utm_medium=" +medium+ ";" +expires+ "; path=/";
        document.cookie = "first_utm_campaign=" +campaign+ ";" +expires+ "; path=/";
        document.cookie = "first_utm_content=" +content+ ";" +expires+ "; path=/";
        document.cookie = "first_utm_term=" +term+ ";" +expires+ "; path=/";
        document.cookie = "first_utm_refferal=" +referrer+ ";" +expires+ "; path=/";
    }
}
document.cookie = "first_utm_gettotop=set on 30 days; "+expires+"; path=/";

// Последний источник визита
if (typeof getCookie("utm_gettotop") === 'undefined') {
    if(source == undefined || source == null || source == "") {
        var referrer = document.referrer;
        if (referrer == undefined || referrer == null || referrer == "") {
            document.cookie = "utm_source=direct; "+expiresSession+"; path=/";
            document.cookie = "utm_medium=direct; "+expiresSession+"; path=/";
            document.cookie = "utm_refferal=Прямой заход; "+expiresSession+"; path=/";
        } else {
            const organic = serps.find(({ name }) => name === referrer);
            console.log(organic)
            if (organic != null) {
                document.cookie = "utm_source=" +referrer+ ";" +expiresSession+ "; path=/";
                document.cookie = "utm_medium=organic; "+expiresSession+"; path=/";
                document.cookie = "utm_refferal=" +referrer+ ";" +expiresSession+ "; path=/";
            } else {
                document.cookie = "utm_source=" +referrer+ ";" +expiresSession+ "; path=/";
                document.cookie = "utm_medium=referrer; "+expiresSession+"; path=/";
                document.cookie = "utm_refferal=" +referrer+ ";" +expiresSession+ "; path=/";
            }
        }
    } else {
        document.cookie = "utm_source=" +source+ ";" +expiresSession+ "; path=/";
        document.cookie = "utm_medium=" +medium+ ";" +expiresSession+ "; path=/";
        document.cookie = "utm_campaign=" +campaign+ ";" +expiresSession+ "; path=/";
        document.cookie = "utm_content=" +content+ ";" +expiresSession+ "; path=/";
        document.cookie = "utm_term=" +term+ ";" +expiresSession+ "; path=/";
        document.cookie = "utm_refferal=" +referrer+ ";" +expiresSession+ "; path=/";
    }
}
document.cookie = "utm_gettotop=set on 40 min; "+expiresSession+"; path=/";

скачать скрипт для записи UTM меток в Cookies

Теперь вы можете сохранять utm_source, utm_medium, utm_campaign, utm_content и utm_term в Cookie.

Это позволит отслеживать рекламные каналы по которым оставил заявку или оформил заказ клиент не только со страницы входа, но и на любой другой и даже при повторном входе.

Как работает решение?

При первом входе по URL, который содержит в себе UTM метку, JavaScript записывает эти данные в Cookies.
- utm метки с приставкой first_ в cookies сохраняются на 40 дней и не перезаписываются
- классические utm метки сохраняются на сессию — 40 минут, после чего будут очищены и перезаписаны
При повторном входе проверяется наличие UTM. Если значений нет, то они записываются или перезаписываются.

Теперь вы можете использовать решение, чтобы затем передавать данные из Cookie в формы или оформленные заказы.

Решение только записывает UTM метки в Cookie. Все доработки компонентов форм, оформления заказа и т.д. на получение и хранение этих данных необходимо дорабатывать самостоятельно.

Как пользоваться скриптом?

Скачать скрипт и залить себе на сайт.
Добавьте нижеприведенный код ниже на страницы вашего сайта, разместив его в разделе head
Получайте данные UTM меток из кукиз и используйте их для ваших нужд. К примеру, для передачи UTM в Битрикс24

Как получить UTM из cookies?

Прочитать cookies можно разными способами.

К примеру, при помощи php. Например, вывести одно конкретное значение cookie следующим образом:

if (isset($_COOKIE['utm_source'])) {
	echo $_COOKIE['utm_source']; // вернет записанное значение для utm_source
}

Или, к примеру, при помощи JavaScript. Правда чтение данных из cookeis данным способом не совсем удобное. Функция для получения одного значения cookie по ключу выглядит следующим образом.

function getCookie(name) {
  var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\\') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

if (typeof getCookie('utm_source') !== 'undefined') { 
  var source = getCookie('utm_source');
  console.log(source);
};

Для чего записывать UTM метки в Cookies?

Запись UTM-меток в Cookies может быть полезной в нескольких случаях:

Аналитика: Если пользователь пришел на ваш сайт с UTM-метками, вы можете сохранить эти метки в Cookies для последующего анализа. Это позволяет вам отслеживать, какие источники трафика (utm_source), типы трафика (utm_medium) и кампании (utm_campaign) приводят к наибольшему числу конверсий или другим целям.
Персонализация контента: Используя значения UTM-меток из Cookies, вы можете настроить контент страницы или предложения так, чтобы они лучше соответствовали контексту, из которого пользователь перешел на ваш сайт. Например, вы можете показывать специальные предложения или сообщения, которые отражают кампанию или источник трафика.
Отслеживание конверсий: Запись UTM-меток в Cookies позволяет вам отслеживать конверсии и связывать их с конкретными источниками трафика и кампаниями даже на страницах, где форма отправки или другие действия могут происходить не сразу после перехода.
Улучшение аналитики веб-сайта: Передача UTM-меток между страницами позволяет более точно отслеживать и анализировать путь пользователя по сайту, что может помочь вам понять, как пользователи взаимодействуют с вашим контентом.
Перенос сеансов: Если пользователь перешел на ваш сайт с UTM-метками, но закрыл браузер или перешел на другой сайт, сохранение UTM-меток в Cookies позволит вам сохранить информацию о их источнике трафика и использовать ее при следующем визите пользователя, даже если это произойдет позже.

Заключение

Сохранение UTM меток в Cookies позволяет вам эффективно отслеживать и анализировать источники трафика на вашем веб-сайте. Это также открывает возможности для персонализации контента и улучшения пользовательского опыта. Используйте приведенное выше руководство, чтобы начать сохранять UTM метки в Cookies на вашем сайте уже сегодня!

Пожалуйста, помните, что использование Cookies для хранения UTM-меток может подвергнуть вас ряду правовых ограничений, особенно в контексте регуляторных требований по конфиденциальности данных (например, GDPR в Европе). Убедитесь, что ваше использование Cookies соответствует применимым законам и регуляциям в стране использования.

Понравилась статья? Поделись ей =)

Как сохранить UTM метки в cookies?

Пример работы JavaScript по сохранению UTM в куки

Текущий визит

Первый визит

Готовый JavaScript для сохранения UTM меток в cookies

Как работает решение?

Как пользоваться скриптом?

Как получить UTM из cookies?

Для чего записывать UTM метки в Cookies?

Заключение

Вам также может быть интересно

Как через GTM разместить код в head?

Как определить местоположение по IP адресу пользователя сайта через GTM

Определение изменения положения мобильных устройств в руках пользователей

Настройка User ID через Google Tag Manager

Оставить комментарий Отменить ответ

Хотите быть в курсе новых инструкций и кейсов для вашей работы?

Утилиты

Смотрите также