Установка и чтение 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, используйте следующий код:

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

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

24 комментария(ев) к “Установка и чтение 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 (в нашем случае чтение из куки)?
    Заранее большое спасибо!!!

Добавить комментарий

Current month ye@r day *