Cookie и Google Tag Manager

13 апреля, 2020

Куки (Cookie) – небольшой фрагмент текста, передаваемый в браузер с сайта, который посещаете вы или ваши пользователи. В этой статье подробнее остановимся на их применении cookies в Google Tag Manager.

Что можно делать с помощью cookie?

Поскольку cookie - это просто текстовая информация с ограничением по размеру до 4Кбайт, то они сами по себе ничего делать не могут. Однако сервер может считывать содержащуюся в куки информацию и на ее основе совершать те или иные действия. Cookie применяются при сборе данных для инструментов веб-аналитики, персонализации рекламы и контента на сайте, для авторизации пользователей, для хранения информации о предпочтениях пользователей на сайте, местоположении, языке интерфейса и во многих других задачах.

Читайте вместе с этой публикацией:

С точки зрения веб-аналитики основное назначение файлов cookie – идентификация пользователей с помощью уникального идентификатора (Client ID, cid), который создается для каждого посетителя сайта. Client ID также можно использовать между различными сервисами (например, CRM-системой и счетчиком) в качестве ключа объединения при построении сквозной аналитики.

Подробнее о том, как настроить Client ID, читайте в других статьях:

Существует два типа файлов cookie: основные и сторонние.

  • основной файл cookie (first-party, 1st party) – это файл, который создается одним доменом веб-сайта. Посетитель запрашивает его когда вводит URL в адресную строку браузера или выполняет переход по ссылке. Только этот сайт их может прочитать и определить, посещаете ли вы его не в первый раз. Это функция обеспечения безопасности встроена во все браузеры;
  • сторонний файл cookie (third-party) – это файл, который создается другими сайтами, размещающими свой контент.

В последние годы появилась тенденция к постепенной блокировке кук различными браузерами по умолчанию. Это затрудняет идентификацию пользователя в интернете. Например, разработчики браузера Firefox в 2019 году выпустили версию (69), в которой блокируется слежение за пользователями для показа навязчивой рекламы. Функция называется Enhanced Tracking Protection. Или Google, который 3 февраля 2020 года в своем блоге анонсировал новые правила отслеживания действий пользователей. Браузер будет блокировать cookie-файлы, но только если у них не прописаны параметры для подтверждения безопасности. А к 2022 году команда Google Chrome планируют полностью запретить отслеживание действий пользователей по файлам cookie.

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

Благодаря связке cookie и Google Tag Manager вы сможете создавать более сложные триггеры и условия активации тегов. Например:

Вариантов настройки великое множество. Все ограничивается конкретными задачами.

Куки бывают:

  • постоянные cookie (persistent cookies) – те, которые остаются доступными после закрытия браузера и повторного его открытия (например, если поставить галочку «Запомнить меня» при вводе логина и пароля);
  • сеансовые cookie (temporary cookies, session cookies) – те, которые сохраняются только на протяжении посещения посетителя на сайте.

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

Установка cookie (Set-Cookie)

У куки есть ряд настроек, которые должны быть установлены. Они указываются после пары ключ=значение и отделены друг от друга ; (точкой с запятой). Куки можно создавать через JavaScript при помощи свойства document.cookie. Пример:

Каждая пара представляет собой отдельное куки:

  • name – имя для cookie;
  • cookieName – пример значения имени для cookie.

Не допускается использование двоеточия, запятой и пробела;

  • path - URL-префикс пути, по которому куки будут доступны для страниц.

Чаще всего указывают path=/ , чтобы куки были доступны на всех страницах сайта. Если куки установлены с path=/category, то они будут доступны и на подкатегориях, например, /category/products, /category/products/item и т.д. По умолчанию значением является текущая директория, из которой куки устанавливаются в браузер.

  • domain - домен, на котором доступны наши куки.

По умолчанию доступно лишь тому домену, который его установил. То есть куки, которые были установлены сайтом site1.ru, не будут доступны на сайте site2.ru. Опция domain позволяет использовать куки и для поддоменов;

  • site.ru - значение домена для куки;
  • expires / max-age - срок жизни куки.

Если не установлен ни один из этих параметров, то куки удаляются при закрытии браузера (сеансовые куки). Чтобы они стали постоянными (постоянные куки), остались доступными после закрытия браузера и повторного его открытия, необходимо установить значение опций expires или max-age.

expires

Дата истечения срока действия куки, когда браузер удалит его автоматически. При установке expires=Sun, 12 Apr 2020 13:41:56 GMT куки будут удалены 12 апреля 2020 года в 13:41:56 по Гринвичу.

Если мы установим в expires прошедшую дату, то срок действия куки истекает прямо сейчас.

Примечание: использование expires не гарантирует сохранность куки в течение заданного периода времени, поскольку клиент (браузер) может удалить запись из-за нехватки выделенного места или каких-либо других причин.

max-age

Альтернатива expires. Определяет срок действия куки в секундах с текущего момента. При записи max-age=7200 куки будут удалены через 2 часа. Если задан ноль или отрицательное значение, то срок действия куки истекает прямо сейчас.

  • Tue, 19 Jan 2038 03:14:07 GMT - пример значения хранения куки (может быть другим).

Предпочитаемый формат согласно спефицикации RFC 7234.

  • secure - параметр указывает браузеру, что куки должны передаваться на сервер только по защищенному https-соединению (HTTPS-протоколу).

По умолчанию куки, установленные сайтом http://site.ru, также будут доступны на сайте https://site.ru и наоборот. Они опираются на доменное имя и не обращают внимания на протоколы. Но если для сайта https://site.ru будут установлены cookie со значением secure, то они не будут доступны на том же сайте http://site.ru с протоколом HTTP.

Примечание: начиная с Chrome 52 и Firefox 52, незащищенные сайты (http:) не могут создавать куки с флагом secure.

Подробнее про куки и document.cookie читайте на learn.javascript.ru.

Мы с вами разобрали основные атрибуты установки куки. Чтобы установить куки в Google Tag Manager, нужно создать тег типа Пользовательский HTML. Он будет содержат код Javascript, который определяет имя файла cookie, срок жизни и т.д.

В этом коде можно отредактировать:

  • cookieName - имя для куки. Придумывайте такое название, чтобы сразу было понятно, за что эта кука отвечает;
  • cookieValue - значение для куки. Может быть числом, текстом, логическом типом (true или false);
  • cookiePath - путь, внутри которого будет доступ к куки. Значение / устанавливает куку на всех страницах сайта;
  • expirationTime - срок жизни куки. В примере выше - 30 дней в секундах (60*60*24*30).

В Google Tag Manager это выглядит так:

Файлы cookie и Google Tag Manager

Установка cookie в GTM

Сохраните настройки тега. Теперь можно проверить установку куки с помощью консоли разработчика. Зайдите на ваш сайт, нажимаем клавишу F12 (для Google Chrome). В открывшемся окне перейдите на вкладку Application и выберете в меню Cookies и домен вашего сайта:

Файлы cookie и Google Tag Manager

Application - Cookies - Сайт

Справа появится таблица, в которой отобразятся все ваши куки (основные и сторонних сервисов). Воспользовавшись фильтром, мы сможем найти установленную на предыдущем шаге куку. В моем примере - это myCookie со значением cookieValue и сроком жизни 30 дней:

Файлы cookie и Google Tag Manager

Установленная с помощью GTM кука

Чтение cookie (Get Cookie)

Теперь нам необходимо научиться читать куки с помощью Google Tag Manager и извлекать их значения в переменные. Делается это с помощью пользовательской переменной типа Основной файл cookie (1st Party Cookie). Все, что необходимо указать, это название cookie (name). Для моего примера переменная будет выглядеть так:

Файлы cookie и Google Tag Manager

Пример 1st Party Cookie

Проверить корректность извлечения значения из файла cookie с именем myCookie можно с помощью режима предварительного просмотра. Если все сделали правильно и не ошиблись в названии куки, то на вкладке Variables вы увидите переменную с установленным значением:

Файлы cookie и Google Tag Manager

Значение cookieValue в переменной myCookie

Аналогично можно извлекать значения любых других кук нашего домена. Например, _ga от Google Analytics или _ym_uid от Яндекс.Метрики:

Файлы cookie и Google Tag Manager

Название cookie _ym_uid (Яндекс.Метрика)

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

Примечание: не все основные файлы cookie (1st Party Cookie) можно извлекать. Например, перейдя на всю ту же вкладку Application в консоли разработчика и выбрав ваш домен в меню Cookies, вы увидите все файлы куки, которые вы можете использовать в Google Tag Manager. Различные скрипты и другие функции на вашем сайте устанавливают эти куки для браузеров ваших посетителей. Однако не все из них могут быть доступны с помощью JavaScript в вашем браузере (включая GTM).

Куки с галочкой HttpOnly и Secure

Если куки имеет флажок в столбцах HttpOnly или Secure, GTM не сможет получить доступ к его значению. Это означает, что если вы добавите название cookie в пользователькую переменную, то GTM вернет undefined.

Файлы cookie и Google Tag Manager

undefined для cookie __ddg1

Удаление cookie (Delete Cookie)

Если вы хотите удалить определенный файл куки, то вам нужно установить срок его жизни за прошедшую дату, например, 1 января 2019 года. Такие куки не могут существовать, поэтому срок их действия немедленно истекает.

Самое простое решение:

Скрипт, который можно использовать:

Замените myCookie на имя куки, который вы хотите удалить. Этот код также должен быть реализован в Google Tag Manager с помощью тега типа Пользовательский HTML и запускаться каждый раз, когда вам необходимо удалить куки.

В Google Tag Manager это выглядит так:

Файлы cookie и Google Tag Manager

Удаление куки

Таким образом, вы можете сохранять необходимую информацию в куки конкретных пользователей и с помощью триггеров активировать теги только для той аудитории, которая попадает под определенные критерии. А чтобы найти идеи того, какие данные можно сохранять в куки, просто зайдите на сайты крупных компаний или своих конкурентов, откройте консоль разработчика, перейдите на вкладку Application - Cookies и посмотрите на перечень установленных куки. Например, mvideo.ru в куки передает тип устройства, ozon.ru - значение User ID, а beru.ru (маркетплейс от Сбербанка и Яндекса) синхронизирует ваши данные с Яндекс.Паспорт и другими сервисами Яндекса.

Файлы cookie и Google Tag Manager

Синхронизация с Yandex

Таким образом, компания знает все ваши данные, которые вы добавили в учетную запись Яндекса, включая логин почты, контактный телефон, пол, возраст. Часть из них на beru.ru автоматически подставляется на странице оформления заказа при заполнении данных.

В качестве альтернативы консоли разработчика и вкладки Application для просмотра кук можно использовать расширение для браузера Google Chrome - EditThisCookie. С его помощью вы можете добавлять, удалять, изменять, искать, защищать и блокировать cookie. Просто установите его, перейдите на нужную страницу на сайте и откройте расширение со значком печенья.

Файлы cookie и Google Tag Manager

Отображение кук в EditThisCookie

В нем вы увидите список всех доступных куки на текущей странице. Развернув нужную, вы сможете просмотреть данные о ней - значение, какому домену принадлежит, путь, срок жизни, есть ли параметр secure и т.д.

В связи с некоторыми ограничениями, с которыми веб-аналитики сталкиваются при работе с cookie, другим решением является использование локальных хранилищ - localStorage и sessionStorage.

Метки: ,

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике