Установка и чтение cookie с помощью Google Tag Manager

Для чего может понадобится подобная функция? Например для отслеживания последовательности действий пользователя.

Прежде чем перейдем к установке и чтению cookie в Google Tag Manager, определим что такое cookie. За информацией обратимся к wikipedia.org.

Куки (от англ. cookie — печенье) — небольшой фрагмент данных, отправленный веб-сервером и хранимый на компьютере пользователя. Веб-клиент (обычно веб-браузер) всякий раз при попытке открыть страницу соответствующего сайта пересылает этот фрагмент данных веб-серверу в виде HTTP-запроса. Применяется для сохранения данных на стороне пользователя…

Теперь практика, вначале немного JavaScript. Для установки cookie необходимо использовать следующий вызов:

  • name – имя для cookie;
  • value – значение присваиваемое cookie
  • expires – до какого времени будет “жить” cookie;
  • path – путь, внутри которого будет доступ к cookie;
  • domain - домен, на котором доступно cookie;
  • secure - cookie можно передавать только по HTTPS.

Secure обычно не используются, domain не указывается, если cookie устанавливается для текущего домена, а для path значение / означает, что cookie доступно со всех страниц сайта.

Expires – время (дата) истечения куки в формате GMT. Если дату не указать, то cookie удаляется при закрытии браузера. Если дата в прошлом, то cookie будет удалена.

Чтобы сделать работу с cookie более удобной используют различные функции, облегчающие повседневные операции. Функция установки значения может быть следующей:

Удобство описанной функции в том, что вы можете передать в качестве expires количество секунд, на которое необходимо установить cookie.

Если вам необходимо получить значение ранее установленной cookie используется следующий вызов:

Выполнение этого кода вернет строку, которая будет содержать список пар имя/значение, разделенных точкой с запятой для всех cookie, которые существуют для текущей страницы:

Как и ранее, для облегчения получения значения ранее установленной cookie используют дополнительные функции, например:

Чтобы при необходимости удаления куки не высчитывать каждый раз нужное значение времени/даты, возможно использование следующей функции:

Теперь у нас есть необходимый набор функций для установки, чтения и удаления cookie. Несколько практических примеров использования описанных выше функций.

Установка cookie с именем name до закрытия браузера:

Чтение ранее уставленной cookie с именем name:

Удаление cookie с именем name:

Установка cookie с именем name на сутки:

Для того чтобы использовать названные функции на страницах сайта, необходимо создать новый тег в Google Tag Manager.

Задайте удобное для вас имя тега, например Функции JavaScript, укажите тип тега Пользовательский тег HTML, затем в поле ввода содержимого тега добавьте первую строку <script> затем разметите функции записи, изменения и удаления cookie, после чего завершающей строкой укажите </script>.

Тег Google Tag Manager с функциями JavaScript

Тег Google Tag Manager с функциями JavaScript

Заполнив поля настройки тега не забудьте указать правила активации, если вам необходима активация тега на всех страницах сайта используйте существующее правило – Все страницы.

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

Создайте новый тег типа Пользовательский тег HTML, укажите произвольное имя и правило активации Все страницы. В поле HTML введите следующий код:

 Краткое пояснение алгоритма:

  1. получаем значение cookie;
  2. проверяем значение cookie и если не установлено, то присваиваем значение 1, если ранее установлено, то увеличиваем значение на единицу больше;
  3. сохраняем обновленное значение cookie.

Обратите внимание на строку:

Отсутствует третий параметр, это значит, что cookie будет “жить” до закрытия браузера, установив его значение, например, в 3600, мы сможем получать cookie в течении часа с момента последнего открытия страницы сайта:

Пример работы описанного процесса в Google Chrome:

Пример работы тега

Пример работы тега

Если Вам понадобится удалить cookie, используйте следующий код:

Если материал оказался полезным и интересным для вас, прошу поделиться им в социальных сетях.

Кейсы и инструкции по настройке в вашем ящике. Подпишитесь сейчас!

28 комментария(ев) к “Установка и чтение cookie с помощью Google Tag Manager

  1. Мне вот интересно. А на роботов поисковых машин можно вешать куки? Например на Googlebot или Yandexbot. Вы не в курсе? Спасибо.

  2. Добрый день, Иван!
    С подобной задачей не сталкивался. Вопрос в технической реализации, ведь cookie хранится на стороне того, кто заходит на страницу. Они могут быть настроены таким образом, что не будут приниматься браузером клиента, а как устроены пауки поисковиков – это только гадать можно.

  3. Боты поисковиков ходят на сайты не через браузеры, соответственно ни о каких cookie речи быть не может.

  4. Спасибо за статью, очень интересно.

    А можно ли как то создать правило активации тега, при наличии определенного кука у пользователя? если да,то как ? )

    • Да возможно. Нужно использовать код, который прочитает нужную cookie и получит из нее значение. Дальше все строится на основе полученного значения

  5. Иван, спасибо за публикацию!

    Вопрос: в правой части выражения document.cookie = … – это же обычная строка? Есть у вас идеи, почему здесь не использовался объект? Ведь структура “ключ : значение” к тому располагала.

    • Ярослав, я использую документацию в таких случаях. Согласно документации значения описываются так, как приведено у меня в материале. Возможен дли другой вариант? Не знаю, я не пробовал другой реализации

      • Ярослав 25.08.2015 в 18:09 -

        Иван, я не имел в виду, что у вас что-то неправильно:) просто для себя хотел понять внутреннюю особенность кукис (почему строка, а не объект – чем обусловлен такой выбор разработчиками? наверное, чем-то обусловлен таки).

  6. Иван, скажите, а можно получится ли таким образом записывать куку для другого домена?
    У меня страница регистрации вынесена на поддомен, задача что бы при регистрации на поддомене срабатывал пиксель по определенной куке

      • даже если на домене и поддомене у меня установлен один и тот же GTM?
        А можно каким-то образом пробрасывать какой-нибудь другой параметр, по которому можно было бы запускать тег на поддомене

      • Установка и область “чтения/видимости” cookie, это вопрос безопасности на уровне браузера. Для того, чтобы решить Вашу задачу нужно изучать реальный сайт и настройки

  7. Иван, подскажите, пожалуйста, почему расчет переменной может вызываться много раз?
    Для примера похожего на описанный выше я получаю “Здравствуйте! Это ваше первое посещение!” – 12 раз. Как проверить когда происходит “расчет” переменной?

    • Ян, проверьте устанавливаются ли у Вас cookie, скорее всего не происходит ее запись, скрипт пытается прочитать данные и не находит их

      • Если я правильно понял, то скрипт не находит cookie и выводит ‘Здравствуйте! Это ваше первое посещение! – это правильно, но почему 12 раз не понятно.

        Сейчас проверил на другом примере {{myCounterTest}}
        “function ()
        {
        var myCounterTest = 0;
        console.log(myCounterTest);
        return;
        }”
        вызов этой переменной происходит 12 раз.
        Ни в каком из тегов новая переменная не участвует.

      • Ян, посмотрите в отладчике, сколько раз и при каких условиях активируется тег содержащий код работы с Cookie

      • Иван, спасибо, разобрался.
        Не внимательно читал статью и запись в куку делал в переменной, а не в теге.
        А так как переменные считается несколько раз (до сих пор не понятно почему), то итоговый результат выходил больше (на кол-во расчетов переменной).

  8. Иван, огромное спасибо за Ваши статьи! Очень доступно всегда излагаете!
    Вопрос: а как быть, если нам значение прочитанное из куки нужно передать в аналитику, например, в качестве параметра. Т.е. вопрос даже шире, как присвоить какой-либо переменной из GTM значение кастомного JS (в нашем случае чтение из куки)?
    Заранее большое спасибо!!!

  9. Иван, добрый день. Требуется установить куку на 14 дней каждому пользовальзователю зашедшему из яндекс директ в гугланалитк с utm-metkami. Как можно ето реализовать в техническом плане например через GTM, какую функцию для етого и скрипт использовать.
    Заранее спасибо

    • Сергей, нужно по источнику ссылки определить нужный Вам источник и параметры, далее по этим данным настроить логику работы

  10. Добрый день,
    Есть задача.
    Необходимо записывать в память пользователей информацию в кукис информация с другого домена. Но эта информация постоянна.
    Тоесть любой посетитель зашедший на сайт должен “схватить” нужную кукис.
    Как реализовать ?
    bkkex2023@gmail.com

    • Добрый день, Максим! Не совсем понятна задача. Если я правильно ее понял, то нужно из одной куки получить значение и записать в нужную, но “чужие” куки сайт не сможет считать

Добавить комментарий для Иван Отменить ответ

Current month ye@r day *