Пошаговая инструкция: настраиваем расширение для управления правами файлов cookie в рамках GDPR

Файлы cookie всего один раз упоминаются в Общем регламенте о защите персональных данных. Но от этого не легче, ведь по GDPR они считаются идентификаторами — а значит, пользователь должен дать согласие на их сбор. Аля Сурикова, Junior Software Engineer Ringostat, делится лайфхаком, как настроить расширение для соблюдения требований GDPR. Для его внедрения вам понадобится Google Tag Manager и минимальные навыки работы в нем.

Сайт и блог Ringostat, как и другие аналогичные ресурсы, собирает и хранит cookie посетителей. Cookie и персональные данные напрямую связаны. Поэтому, как только началась подготовка к вступлению в силу GDPR, нам понадобилось специальное расширение для cookie consent плашки. Сначала мы изучили имеющиеся варианты, но ни один из них не устроил полностью.

Во-первых, у нас все внешние скрипты подключаются в Google Tag Manager (GTM) и внедрение сторонних разработок влекло бы к сильному изменению структуры нашего GTM. Во-вторых, мог вообще потребоваться перенос скрипта из GTM в код контейнера, создаваемого расширением и т. д.

Поэтому мы решили разработать свое решение, которое будет не сложным для внедрения и позволит решить наши задачи. Теперь мы хотим поделиться им, чтобы вам было проще соответствовать требованиям GDPR.

Для посетителя расширение выглядит как плашка, которая размещается на сайте и в развернутом виде выглядит так:

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

Полезный материал по теме — инфографика о GDPR. Что это такое, как он защищает права пользователей интернета и что изменилось с его вступлением в силу.

Преимущества нашего решения

1. Простота установки. Готовые решения, которые уже есть на рынке, устанавливаются в основном через код или требуют сложного импорта в Google Tag Manager (GTM). Что еще больше затрудняется, если у вас в GTM множество настроек, как в нашем случае (более 60 тегов, 75+ переменных и примерно столько же триггеров).
2. Поддержка запуска Google Analytics в анонимном режиме. Наиболее подходящие сервисы, которые мы нашли, не были на это способны — хотя это и не противоречит GDPR.
3. Это бесплатно. В то время, как за готовое решение придется заплатить — и да, если вы воспользуетесь нашей инструкцией, то сэкономите 🙂 Плюс, готовое решение все равно придется настраивать.

Кроме того, у настройки расширения в GTM есть и свои плюсы:

• это возможность обойтись без разработчика и установить скрипт на сайт самостоятельно;
• перед публикацией изменений можно в режиме предпросмотра посмотреть и проверить работу нового функционала и всех старых;
• история версий — если что-то пойдет не так, можно легко отменить изменения и вернуться к предыдущей более стабильной версии.

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

Инструкция по настройке

1. Создание тега

Откройте GTM, выберите в меню слева раздел Теги и нажмите на кнопку Создать. Выберите тип тега “Пользовательский HTML”.

В него необходимо скопировать код, который находится по ссылке.

В коде существует 3 переменные, в которых хранятся cookie определенной группы. В нашем случае это Analytics, Support и Marketing — в коде они выделены синим цветом. Вы можете добавить/удалить/изменить содержимое этих переменных, чтобы подогнать наше решение под ваши нужды.

Вам нужно изменить массивы данных, в зависимости от типа cookie, которые собирает ваш сайт. В строку domain подставьте список всех доменов сайта.

2. Создание переменных

Создайте переменные, перечисленные ниже, и настройте их по аналогии с приведенными скриншотами, но с учетом особенностей вашего сайта.

Ringostat-locale

Эта переменная нужна, если вы используете локализацию плашки, в зависимости от местоположения пользователя. Это переменная типа “Собственный JavaScript”:

Вставьте в переменную ringostat-locale следующий код:

function() {

var locale = ((/\/ru\//).test(document.location.href)?"ru":((/\/uk\//).test(document.location.href)?"uk":"en"));

return locale;}

Эта переменная нужна для того, чтобы подменять язык плашки, в зависимости от локали домена. Например, пользователям, которые находятся на домене example.ru, она будет показывать русский текст. После настройки она должна дать идентификатор языка для таких переменных:

• cookie accept button — кнопка “Принять”, эта переменная и следующие три относятся к виду Lookup table: 
• cookie detailed disclaimer — детальное описание типов cookie, которые мы используем: 
• cookie disclaimer  — краткое предупреждение о cookie: 
• cookie preferences button — текст на кнопке для подробной настройки: 

Page Hostname

CookieControlAnalytics

CookieControlMarketing и СookieControlSupport

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

AnonimizeIP

UserId GA
Нужен, если вы отслеживаете этот параметр в Google Analytics.

Если у вас еще нет переменной типа Google Analytics Settings, то самое время ее создать. На скриншоте указано, что необходимо изменить в настройках переменной типа Google Analytics Settings. Если вы не используете переменную и указываете настройки по каждому тегу в отдельности, нужно настроить аналогично все ваши теги типа Universal Analytics.

3. Создаем триггеры

Далее перейдите в раздел Триггеры и создайте 6 триггеров, которые нужны для проверки, ставил ли посетитель галочки в чек-боксах:

Ниже пример настройки двух из них — остальные триггеры настраиваются аналогично:

Эти триггеры  отвечают за проверку соответствующих файлов cookie или реагируют на то, когда галочка определенного типа становится отмеченной.

Измените в тегах триггеры для запуска по соответствию с их типом. Так вы зададите событие, когда он будет запускаться. Например, если человек устанавливает галочку в чек-боксе Support, срабатывает триггер Cookie Support Event.

Вместо стандартных триггеров DOMready или Pageview, мы создаем новые, которые теперь должны запускать теги только в случае, если подобный тип скриптов разрешен. Ниже пример настройки триггеров для сервисов, которые используются на нашем сайте:

Последняя настройка касается сайтов, которые, как и Ringostat, используют коммуникационную платформу Intercom. Если какие-то из тегов после изменения перестают запускаться, возможна ситуация, что инициатором их запуска является событие body.onLoad или подобный момент, который в данном случае произошел ранее, чем инициация этого тега. В этом случае нужно переписать этот блок в теге на мгновенный запуск. Например, в нашем случае такая ситуация возникла с тегом Intercom, где нужно было просто упростить последнюю функцию.

Также в скрипте есть обращение к geoplugin.net для определения, находится ли пользователь в Евросоюзе.

<script language="JavaScript" src="http://www.geoplugin.net/javascript.gp" type="text/javascript"></script>

Если ваш сайт на https, то нужна будет платная версия этого сервиса за 12 евро в год и строка подключения изменится на строку вида:

<script language="JavaScript" src="https://ssl.geoplugin.net/javascript.gp?k=YOUR_KEY" type="text/javascript"></script>

И внизу есть проверка, которая делает автоматический акцепт, если пользователь не из EU и не отзывал этого акцепта. Таким образом, если пользователь из EU — он увидит плашку и должен будет сделать акцепт, а если не из Евросоюза, то увидит уголок, нажав на который, сможет отозвать акцепт.

Также эти блоки можно просто удалить, если большинство ваших клиентов находится в Евросоюзе. И, соответственно, вам нет смысла делать лишнюю проверку.

Благодаря этой инструкции и Google Tag Manager вы сможете сэкономить не только на платном решении, но и сбережете 20 миллионов евро 🙂 Но еще раз обращаем ваше внимание, что мы показали настройку на примере cookie, которые собирает наш собственный сайт. У вас может быть совсем другая ситуация, и поэтому инструкцию нужно будет адаптировать под нее. Если у вас возникнут вопросы — пишите в комментарии, и мы постараемся помочь советом.

Если вас интересует Ringostat, установка на сайт виджета обратного звонка, коллтрекинга и многое другое — пишите в чат, расположенный справа.