Разрешение на использование cookie по законам ЕС

Разъяснения по закону Европейского Союза на разрешение использования файлов cookie на сайтах веб-мастеров. Ситуация с Blogger и несколько готовых решений, которые я рекомендую использовать на сторонних сайтах.

Разрешение на использование cookie по законам ЕС

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

О ситуации с cookie на Blogger

Пока эту тему я встречал только на Blogger. На странице «Обзор» в панели управления блога на Blogger появилось сообщение (см. скриншот ниже). Подробней читайте тут.


Сообщение о cookie для пользователей из ЕС на Blogger

Скрипт cookiechoices.js

Для тех, у кого блог на Blogger хочу сразу сообщить приятную новость – скрипт cookiechoices.js автоматически встраивается в страницы блога, так что вам ненужно беспокоиться!

Для пользователей из ЕС на блоге выводится вот такое сообщение:

Сообщение об использовании cookie на блогах Blogger
Сообщение об использовании cookie на блогах Blogger

Управлять этим скриптом можно через JavaScript переменную cookieOptions, прописанную в теге SCRIPT секции HEAD, например:

<head>
<script>//<![CDATA[
cookieOptions = {
  msg: 'This site uses cookies to store information on your computer.',
  close: 'OK',
  learn: 'Details',
  link: 'https://www.blogger.com/go/blogspot-cookies'
};
//]]></script>
</head>

Параметры JavaScript переменной cookieOptions:

  • msg – текст сообщения,
  • close – текст на кнопке «Закрыть»,
  • learn – текст на кнопке «Подробнее»,
  • link – ссылка на страницу с подробной информацией.

Чтобы отключить это сообщение, используйте JavaScript переменную cookieChoices, прописанную в теге SCRIPT секции HEAD, например:

<head>
<script>//<![CDATA[
cookieChoices = {};
//]]></script>
</head>

Примечание: я не рекомендую использовать cookieChoices и отключать такое сообщение, т. к. в этом случае вы нарушите закон или вам придётся самому создать такое сообщение.

Как посмотреть сообщение о cookie?

Для просмотра сообщения, отображаемого скриптом cookiechoices.js, воспользуйтесь европейским поддоменом, например: .blogspot.fr.

Если блог с персональным доменом или это сторонний ресурс, воспользуйтесь PageSpeed Insights.

Просмотр сообщения о разрешении на использование файлов cookie в PageSpeed Insights
Просмотр сообщения о разрешении на использование
файлов cookie в PageSpeed Insights

Продвинутым пользователям рекомендую и web-sniffer.net.

Примечание: обратите внимание – сообщение, которое используется в cookiechoices.js (по умолчанию) – мультиязычное, но занимает много места, особенно в мобильной версии сайта. Поэтому я рекомендую прописать опцию cookieOptions (см. пример выше).

О ситуации с cookie на других ресурсах

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

Cookie Control CIVIC

Из того, что предложено Google, я бы отметил сервис Cookie Control CIVIC. Хотя бы потому, что у них имеется тариф «Free». С ограничениями, но тем не менее.

Перед началом, рекомендую создать страницу «Правила в отношении пользователей из ЕС» (т. е. privacy police). Подробней об этом читайте здесь.

К делу.

  • Зайдите на страницу Cookie Control CIVIC и кликните кнопку «Grab your code!».
  • Выберите тариф (например «Free») и кликните кнопку «Configure».
  • Заполните форму и кликните кнопку «Collect your code».
  • Вы получите код и краткую инструкцию по размещению.

    Примечание: потребуется скачать и разместить у себя на сайте JavaScript файл cookieControl-X.X.min.js, для работы которого необходима библиотека jQuery (желательно версии 1.4.4).

    Хитрость заключается в том, что я использовал jQuery с Google хостинга, а скрипт с сайта CIVIC. Получилось так:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="http://www.civicuk.com/assets/js/cookieControl-6.2.min.js"></script>

    Остальной код – это настройка. Главное там – это apiKey. Подробней об этом читайте в документации.

  • Проверьте указанный e-mail, придёт письмо с «Your API key» и ссылкой, кликнув по которой вы попадёте на страницу, где введите e-mail, пароль и API key для подтверждения регистрации на сервисе.

Результат использования этого сервиса выглядел так.

виджет разрешения на использование cookie CIVIC
Виджет разрешения на использование cookie CIVIC

Примечание: это виджет отображается для всех стран, что не удобно. Для использования продвинутых функций – придётся заплатить немалую сумму.

Как использовать cookiechoices.js на других сайтах?

Скрипт cookiechoices.js не завязан на домене. Используйте его и на сторонних сайтах. Это круто, т. к. другие решения платные.

Разместите, ниже приведённый, код перед закрывающимся тегом BODY.

<script src="//googlerussiablog.blogspot.com/js/cookiechoices.js" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
  window.cookieChoices && cookieChoices.showCookieConsentBar && cookieChoices.showCookieConsentBar(
    (window.cookieOptions && cookieOptions.msg) || 'This site uses cookies to store information on your computer.',
    (window.cookieOptions && cookieOptions.close) || 'OK',
    (window.cookieOptions && cookieOptions.learn) || 'Details',
    (window.cookieOptions && cookieOptions.link) || 'https://www.blogger.com/go/blogspot-cookies');
});
</script>

Примечание: здесь я использовал домен официального блога Google Россия, но можно использовать и другой домен блога на Blogger.

Как настроить скрипт – я уже рассказал. Прописать нужные значения можно и в самом коде вызова скрипта.

Короткая ссылка: http://goo.gl/feMeof

Вика
Вика комментирует...

Константин, но с блоггером вроде и всё понятно. Подскажи единственное, сейчас мы можем нажать на крестик и отключить это оповещение в админке. Вот тут я как-то связать не могу - Чтобы отключить это сообщение,....и ...Примечание: я не рекомендую использовать cookieChoices и отключать такое сообщение, Растолкую, пожалуйста для особо одарённых.

wmascat
wmascat комментирует...

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

Вика
Вика комментирует...

Всё Костя, спасибо большое. Я разобралась. Всё ведь нам надо по полочкам раскидать.

Olga Protasova
Olga Protasova комментирует...

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

wmascat
wmascat комментирует...

2Olga Protasova Контроль позиции сообщения о разрешении на использовании cookie в том скрипте, что используется на Blogger пока, увы, не предусмотрено. Можно только менять его содержание. cookieOptions – это JavaScript переменная, а JavaScript код должен быть прописан или вызван через <SCRIPT> тег. Просто этот фрагмент надо помещать в секцию <HEAD>.

Olga Protasova
Olga Protasova комментирует...

Так я вставила скрипт в раздел хеад, ничего для мобильных при проверке в программе не изменилось. Пишут "Полученного HTML недостаточно для отображения верхней части страницы-включите весь необходимый контент непосредственно в HTML-ответ". И резко упал процент скорости для компов.

wmascat
wmascat комментирует...

2Olga Protasova на каком блоге вставили?

Olga Protasova
Olga Protasova комментирует...

Вставляла в Блог для Блогов, но уже удалила после проверки в программе. Для мобильных ничего не изменилось, а для компов хуже стало.

wmascat
wmascat комментирует...

2Olga Protasova тогда я не могу сказать что-то определенное. Проверьте мой блог, там всё норм.

Olga Protasova
Olga Protasova комментирует...

Костя, почему у Вас уведомление на английском, а у меня на всех трех блогах (вставила скрипт снова) на русском. Текст на русском занимает больше места.

wmascat
wmascat комментирует...

2Olga Protasova потому, что я настроил так скрипт. Это делается путём вставки кода с переменной cookieOptions. Вы убрали этот код и я могу теперь вам подсказать в чём была проблема.

Olga Protasova
Olga Protasova комментирует...

Костя, скрипт вставлен с переменной cookieOptions. Что еще нужно сделать, не пойму.

wmascat
wmascat комментирует...

2Olga Protasova сказать мне на каком блоге вставлено и я посмотрю в чём проблема.

Olga Protasova
Olga Protasova комментирует...

Костя, посмотрите на этом http://www.bdblogov.ru

wmascat
wmascat комментирует...

2Olga Protasova Всё нормально. Просто PageSpeed Insigt кэширует результат и показывает старое изображение. Нужно подождать и снова проверить.

Как вариант, можно использовать browshot.com - только сейчас нашел. Вот скриншот который я получил с вашего блога:

[img]https://lh3.googleusercontent.com/-ZdrJypPiXJQ/Vbo0bqS2tlI/AAAAAAAAFhw/qXZUzMZoci4/w600-h450-no/33070630.png[/img]

Olga Protasova
Olga Protasova комментирует...

Поняла Костя, будем ждать. Я тоже проверила отображение блога в разных браузерах здесь
http://browsershots.org - отличается уведомление в разных версиях хрома.

wmascat
wmascat комментирует...

Вы ещё не получили «письма счастья» от Google #adsense ? Не беспокойтесь, получите. Спасибо большое Евгению за предоставленный скриншот. Как я и говорил, весь этот бред – это всё серьёзно! Не важно, где зарегистрированная ваша компания, хостится ваш сайт и т. д. Это не обойдёт вас мимо, даже не надейтесь. Это затронет всех!

[img]https://lh3.googleusercontent.com/-XZR3Zik-DJc/VbtTwuKJyuI/AAAAAAAA-Bk/XvFlH9Dyqt8/w797-h776-no/adsense-message-cookie.png[/img]

stanskorik
stanskorik комментирует...

Короч у меня Блоггер и мне ничо делать не надо)
Щикарно)))

wmascat
wmascat комментирует...

2Станислав Скорик Разве что прописать cookieOptions, но это если ты заморачивашься с PageSpeed Insight рекомендациями для мобильной версии блога.

chebur1
chebur1 комментирует...

Это сообщение показывается один раз одному пользователю? Или через какое то время оно покажется снова?

wmascat
wmascat комментирует...

2chebur1 Если говорить о сообщении в админке Blogger – то оно будет показываться до тех пора, пока вы не кликните крестик.

Если говорить о сообщении с запросом на разрешение использования cookie, то, как я понял, оно будет показываться всем пользователям ЕС (наверное, определяется по IP) и будет показываться до тех пор, пока не будет выбран соответствующий вариант. Скорей всего, положительный выбор – будет сохранён в куку и спустя некоторое время или после очистки куков браузера, пользователю придётся снова делать свой выбор; отрицательный выбор, скорей всего – приведёт к закрытию страницы.

Чем-то мне это напоминает предупреждение, которое выводится на сайтах для взрослых ;)

Unknown
Unknown комментирует...

Привет! Я совсем начинающий блогер, сейчас учусь в Германии. Я правильно поняла, если у меня блог на Blogger, то там все автоматически. Мне не стоит париться?!
Заранее большое спасибо!

wmascat
wmascat комментирует...

2Le Ro Если ты не хочешь заморачиваться с мобильной версией, то не стоит.

chebur1
chebur1 комментирует...

Константин. Либо вы меня не поняли, либо не понимаете сам код файла cookiechoices.js.
Во первых там нет крестика, там есть лишь ОК, при нажатии которого ты как бы соглашаешься с тем, что тебе будут проставлены куки. Другая кнопка, по идее должна вести на страницу, которая объясняет, что за куки и для чего будут проставлены. Причём в коде этой страницы нет. Так как я начал делать это по рекомендации от google adsense, то я и прописал в коде адрес их страницы, обясняющей политику проставления куков. Прошерстив весь код файла cookiechoices.js я не обнаружил ни определения местоположения пользователя, ни срока действия куки, которая вешается этим файлом. Причём надпись о предупреждении на сайтах выскакивает как то несистематически, то есть, то нет. Вот и возник вопрос собственно о том, как присвоить этой куке срок действия к примеру в месяц, что бы эта надпись не так часто появлялась для одного и того же пользователя. Ну и вообще бы идеально было, если получится настроить показ предупреждения только для нероссийских IP. Завтра займусь этим вопросом. Если достигну каких то результатов отпишусь.
Да, кстати, а вы (пользователи Blogger'а) из-за чего задумались над новыми законами ЕС? Я то ладно, мне гугл адсенс сказал, что в связи с принятием этого закона я должен предупреждать пользователей иначе адсенс ругать меня будет. А вам то что грозит от несоблюдения и зачем захламлять сайт ненужными скриптами из-за дурацкого буржуйского законотворчества?

wmascat
wmascat комментирует...

2chebur1 Ну, давай разбираться. Я ж тоже особо в детали программные не вдавался. Да и как там вдаваться, если исходника, кроме JavaScript нет? Да ещё предпросмотр этой шняги, не будучи товарищем из ЕС, я получить могу только корявым способом.

Т. е. я вполне допускаю, что cookiechoices.js просто генерируется на лету в зависимости от IP. Как тот же редирект на мобильную версию блога, есть JavaScript и есть HTTP- редирект в зависимости от устройства.

Можно конечно глянуть куки сайта и копать дальше, но так ли это важно? Важно ли крестик или страница с описание куки? Готовых решений и так валом, а у меня есть и другие, более интересные занятия.

Скрипт cookiechoices.js интегрируется в блоги на Blogger автоматически, это даже нельзя изменить в шаблоне. Т. е. всё серьёзно и они позаботились о том, чтобы тему не могли обойти, причём даже хаками.

В целом у меня на блоге тоже, если ты заметил, AdSense. К тому же не важно же, что AdSense, что Google Analytics, что ещё что-то, что создаёт cookie – всё это подпадает под закон. Так что париться надо и париться всем. AdSense - чисто для примера привёл. Масштабы бреда тут серьёзные.

Анонимный
Анонимный комментирует...

Спасибо за статью. Управлять шаблоном алерта можно через стили:

.cookie-choices-info {
background-color: #000 !important;
}

.cookie-choices-text {
color: #fff !important;
}

.cookie-choices-button {
color: #fff !important;
}

.cookie-choices-button:hover {
color: #000 !important;
}

Прокси для тестов http://www.3proxy.de

wmascat
wmascat комментирует...

2Анонимный О, надо будет попробовать. За ссылку на прокси-сервис – отдельное спасибо.

Анонимный
Анонимный комментирует...

Хорошо! А что, если, ну, можно, конечно, без если, но, если я использую соё сообщение отличное от Blogger: "Работая с этим сайтом....". Такое, как, возможно?

wmascat
wmascat комментирует...

2Анонимный Сообщение может быть любим. Главное, чтоб суть оставалась та же. Например, я использую сообщение, которое приметил в виджете (упомянутого в статье) Cookie Control CIVIC – оно более короткое, что важно для мобильной версии блога. Его прописываем через переменную cookieOptions.

Если же хочется использовать сторонний гаджет, того же Cookie Control CIVIC, на блоге в Blogger, придётся в начале отключить стандартный гаджет Blogger (cookiechoices.js), для этого используем переменную cookieChoices. Правда в этом случае сам скрипт всё равно будет подгружаться и (я считаю) нет смысла так заморачиваться.

Анонимный
Анонимный комментирует...

Об этом было сказано на ВестиFM сегодня. И к тому же некоторые представители наших IT-организаций решают предложить аналогичного рода инициативу законодателям РФ.

Galina
Galina комментирует...

Костя, здравствуйте! А как быть. если используются файлы cookie сторонних разработчиков. Пожайлуста!!! Только как для чайников. Я ничего не смыслю в этом. поэтому сделала на своих блогах влот такое сообщпение. Посмотрите - (http://gostinaja-galiny-dremljuh.blogspot.com/p/cookie.html)

wmascat
wmascat комментирует...

2Галина Дремлюх, цитирую: "Для тех, у кого блог на Blogger хочу сразу сообщить приятную новость – скрипт cookiechoices.js автоматически встраивается в страницы блога, так что вам ненужно беспокоиться!"

Voljanskaya
Voljanskaya комментирует...

Помогите мне пожалуйста,я в полном отчаянии, ничего мне не понятно:((((((
Если я выставляю видео с ютуб в свой блог или фото, мне ничего в кукис дописывать не надо на блоггере?
Вот мой блог, по который идет речь: voljanskaya.blogspot.com.ee

Артур
Артур комментирует...

Костя, как прописать, чтобы это уведомление открывалось внизу страницы?

wmascat
wmascat комментирует...

Этот элемент имеет идентификатор #cookieChoiceInfo, для его переноса вниз достаточно прописать в CSS:

#cookieChoiceInfo {bottom:0;top:auto;}

Остальные элементы, которые входят в состав этого элемента:

#cookieChoiceInfo .cookie-choices-inner {...}
#cookieChoiceInfo .cookie-choices-text {...}
#cookieChoiceInfo .cookie-choices-buttons {...}
#cookieChoiceInfo .cookie-choices-button {...}

там надо смотреть.

Артур
Артур комментирует...

Путаемся в показаниях http://www.chuvyr.ru/2015/07/cookie-evrosojuz.html#c8349521003774877713 .)
А так да, ответ: можно

Мой вариант https://gist.githubusercontent.com/dokxpi/4975fe1684ac7769ffe988601e5abddd/raw/98c66f55bea23d014f45948e3e17dc6541e8ecbe/index.html

wmascat
wmascat комментирует...

Почему путаюсь? В javascript настройках действительно такой опции не предусмотренно, а через CSS это костыль.