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

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

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

Еженедельная рассылка кейсов!