Бизнесу

Пошаговая инструкция: настраиваем расширение для управления правами файлов 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.

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

разширение файлы cookie ringostat

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

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

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

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

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

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

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

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

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

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

расширение файлы cookie ringostat

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

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

расширение файлы cookie ringostat

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

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

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

Ringostat-locale

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

расширение файлы cookie ringostat

Вставьте в переменную 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 ringostat
  • cookie detailed disclaimer — детальное описание типов cookie, которые мы используем: расширение файлы cookie ringostat
  • cookie disclaimer  — краткое предупреждение о cookie: расширение файлы cookie ringostat
  • cookie preferences button — текст на кнопке для подробной настройки: расширение файлы cookie ringostat

Page Hostname

расширение файлы cookie ringostat

CookieControlAnalytics

расширение файлы cookie ringostat

CookieControlMarketing и СookieControlSupport

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

AnonimizeIP

расширение файлы cookie ringostat
расширение файлы cookie ringostat

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

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

расширение файлы cookie ringostat

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

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

расширение файлы cookie ringostat

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

расширение файлы cookie ringostat
расширение файлы cookie ringostat

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

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

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

расширение файлы cookie ringostat

Последняя настройка касается сайтов, которые, как и 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, установка на сайт виджета обратного звонка, коллтрекинга и многое другое — пишите в чат, расположенный справа.

Об авторе

Редактор блога Ringostat. Автор статей для изданий о диджитал и больших СМИ про бизнес. Изучала журналистику в Одесском национальном университете имени И. И. Мечникова.

5 комментариев

Комментарии закрыты.