Файлы 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. Что это такое, как он защищает права пользователей интернета и что изменилось с его вступлением в силу.
Преимущества нашего решения
- Простота установки. Готовые решения, которые уже есть на рынке, устанавливаются в основном через код или требуют сложного импорта в Google Tag Manager (GTM). Что еще больше затрудняется, если у вас в GTM множество настроек, как в нашем случае (более 60 тегов, 75+ переменных и примерно столько же триггеров).
- Поддержка запуска Google Analytics в анонимном режиме. Наиболее подходящие сервисы, которые мы нашли, не были на это способны — хотя это и не противоречит GDPR.
- Это бесплатно. В то время, как за готовое решение придется заплатить — и да, если вы воспользуетесь нашей инструкцией, то сэкономите 🙂 Плюс, готовое решение все равно придется настраивать.
Кроме того, у настройки расширения в 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, установка на сайт виджета обратного звонка, коллтрекинга и многое другое — пишите в чат, расположенный справа.