Как понять, собирает ли ваш сайт куки
Если вы следите за эффективностью своего сайта с помощью Google Analytics и Яндекс.Метрики — вы точно собираете куки-файлы. И если ваш сайт подключен к CRM — вы тоже их собираете. Исключение составляют только статичные сайты.
Чтобы наверняка убедиться, собираете вы куки или нет, откройте в вашем браузере панель разработчика и перейдите на вкладку Storage — там хранятся куки. Откройте блок с надписью Cookies. Если в нём есть данные — значит, ваш сайт собирает куки, и вам нужно настроить виджет с сообщением об этом.
В Mozilla Firefox
Меню → Web Developer → Storage Inspector (или Shift + F9)
В Google Chrome
F12 или (Ctrl + Shift + I) → Application → Storage
В Safari
1. Перейдите в раздел Advanced
2. Поставьте галочку напротив опции «Show Developer menu»
3. Нажмите Cmd + option + U
Что вам грозит за сбор куки без формы
В России отношения, связанные с обработкой персональных данных, контролирует 152-ФЗ. Согласно его положениям, получать согласие пользователей на сбор куки должен каждый оператор персональных данных — а это любая организация, в которой официально трудоустроен хотя бы один сотрудник. Дело в том, что, оформляя трудовой договор, работодатель вписывает туда ФИО и паспортные данные сотрудника — а это уже сбор и обработка персональных данных. Все сайты, собирающие телефоны, емейлы, имена и куки пользователей, автоматически попадают под действие этого закона.
За сбор персональных данных без уведомлений пользователей суд может назначить штраф до 75 тысяч рублей, а в отдельных случаях даже заблокировать ресурс.
В Европе действует регламент GDPR — General Data Protection Regulation. Если на ваш ресурс зашёл хотя бы один житель Евросоюза и вы собрали его персональные данные — на вас распространяется действие регламента. За нарушение его требований компании грозит штраф до 20 миллионов евро или 4% от годового оборота компании.
Подробнее о возможных санкциях вы можете прочитать в нашей статье, как избежать штрафов за куки и политику конфиденциальности. Краткий пересказ: настройте виджет о сборе данных — и будет вам счастье.
Можно ли писать сообщение «человеческим» языком, а не в юридических терминах?
Для обработки куки-файлов применяются те же правила, что и для обработки персональных данных. А значит, вы должны получить конкретное, информированное и сознательное согласие пользователя. Уведомление в стиле «продолжая пользоваться сайтом, вы даёте согласие на сбор персональных данных» с крестиком для закрытия формы суд таковым не признаёт. Ведь пользователь всегда может сказать, что не обязан читать никаких ваших всплывающих окошек.
Чтобы обезопасить себя юридически, мы рекомендуем использовать на виджете такие элементы:
- Уведомление об использовании куки и обработке персональных данных
- Ссылку на политику конфиденциальности
- Кнопку «Согласен», «Хорошо», «Окей» без крестика для закрытия формы
Пример:
А как у Лебедева можно?
В интернете можно найти примеры нестандартных, необычно оформленных сообщений о сборе куки. Одно из самых известных принадлежит Студии Артемия Лебедева:
Теоретически, юристы Студии могут сказать, что пользователя предупредили об обработке персональных данных, а значит, продолжая пользоваться сайтом, он даёт своё согласие. Однако реакция суда в таких ситуациях неоднозначна. И мы не рекомендуем ограничиваться фразой «используем куки» — так как большинству людей она ни о чём не говорит.
Ещё один пример неоднозначного сообщения о сборе куки:
Мы не призываем вас писать скучные однообразные сообщения. Однако рекомендуем добавлять к вашим виджетам ссылку на политику конфиденциальности или кнопку, которая более однозначно выражает согласие пользователя на сбор куки.
Как соблюсти грань между стилем и юридической точностью
В этих примерах операторам персональных данных удалось составить необычные и привлекающие внимание сообщения о сборе куки и при этом соблюсти юридические тонкости. Надеемся, наша подборка вдохновит на создание своего необычного и запоминающегося виджета.
Перевод:
То, что вы пользуетесь нашим веб-сайтом, говорит нам, что вы счастливы получить все наши куки. Однако вы можете изменить настройки куки в любое время. Узнать больше.
Кнопка: Закрыть
Перевод:
Ммм, куки (печеньки)
К сожалению, это специальные куки, которыми может питаться только компьютер. Пожалуйста, посмотрите нашу политику куки, чтобы узнать, как мы их используем. Пока вы продолжаете пользоваться нашим сайтом, мы будем собирать их, если вы согласны на использование куки.
Кнопка: Закрыть
Перевод:
Этот веб-сайт использует куки, чтобы улучшить ваш пользовательский опыт. Посмотрите нашу Политику конфиденциальности, чтобы узнать больше.
Кнопка: Принимаю
Перевод:
Наш сайт использует куки (печеньки)
А ещё мы их делаем.
Нажимая на эту кнопку, вы соглашаетесь с нашей политикой конфиденциальности. Посмотреть условия.
Кнопка: Принимаю
Сайт о сельском хозяйстве pioneer.com использует двойную форму подтверждения сбора куки. В первом окне пользователю рассказывают о сборе куки и просят дать согласие, во втором — объясняют, зачем собирать куки и как их используют.
На наш взгляд, текст сообщения можно было бы сделать чуть короче и удобнее для пользователя, но сама идея рассказывать о причинах сбора куки интересна. Большинство пользователей не знает, для чего это нужно, и честное объяснение служит дополнительным убеждающим фактором, чтобы согласиться на сбор данных.
Уж не знаю зачем придумали это недоразумение, т.к. куки используются практически на всех сайтах. Это счетчики посещений, реклама, виджеты соц сетей или обратной связи. авторизация пользователей и т.д.
Нужно ли использовать такое предупреждение и на каких сайтах, я не знаю, в подробности не вдавался. Но можно почитать, например «Обязательно ли на данный момент наличие уведомлений об обработке файлов cookie на сайте интернет-магазина?» или «Как избежать штрафов за куки и политику конфиденциальности» (публикации не новые, может еще законов напридумывали) или поискать в интернетах.
Меня просили пару раз поставить такое окошко, поэтому и решил сделать такую заметку.
Если на сайте используется CMS WordPress, то можно воспользоваться плагином Cookie Notice for GDPR & CCPA (посмотреть скриншот его настроек) или дргуими.
Для самостоятельной установки используем коды ниже
HTML:
Можно расположить в любой части страницы
<div class=«cookie_notice»> Этот сайт использует файлы cookies и сервисы сбора технических данных посетителей (данные об IP-адресе, местоположении и др.) для обеспечения работоспособности и улучшения качества обслуживания. Продолжая использовать наш сайт, вы автоматически соглашаетесь с использованием данных технологий. <div> <a class=«cookie_btn» id=«cookie_close» href=«#close»>Согласиться</a> <a class=«cookie_btn» href=«#politika»>Политика конфиденциальности</a> </div> </div> |
CSS:
Стили кнопок взяты из темы: «Оформление кнопок на CSS». При желании можно выбрать другие или использовать свои.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
.cookie_notice { display: none; position: fixed; z-index: 9999999; bottom: 0; left: 0; right: 0; text-align: center; font-size: 15px; font-family: Verdana, sans-serif; color: #FFF; background: #337AB7; padding: 10px 20px; border-top: 4px solid #BFE2FF; } /* Оформление кнопок */ .cookie_btn { display: inline-block; margin: 10px 6px 4px 6px; text-decoration: none; position: relative; font-size: 13px; padding: 4px 12px; color: #FFF; font-weight: bold; text-transform: uppercase; background: #337AB7; border: 2px solid #BFE2FF; } .cookie_btn:hover { color: #FFF; } .cookie_btn:after, .cookie_btn:before { position: absolute; height: 2px; left: 50%; background: #FFF; bottom: -6px; content: «»; transition: all 280ms ease-in-out; width: 0; } .cookie_btn:before { top: -6px; } .cookie_btn:hover:after, .cookie_btn:hover:before { width: 100%; left: 0; } |
JS:
В примере на сайте не используются куки, и обновив страницу после закрытия окна, оно появится снова.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// функция возвращает cookie с именем name, если есть, если нет, то undefined function getCookie(name) { let matches = document.cookie.match(new RegExp( «(?:^|; )» + name.replace(/([.$?*|{}()[]\/+^])/g, ‘\$1’) + «=([^;]*)» )); return matches ? decodeURIComponent(matches[1]) : undefined; } let cookiecook = getCookie(«cookiecook»), cookiewin = document.getElementsByClassName(‘cookie_notice’)[0]; // проверяем, есть ли у нас cookie, с которой мы не показываем окно и если нет, запускаем показ if (cookiecook != «no») { // показываем cookiewin.style.display=«block»; // закрываем по клику document.getElementById(«cookie_close»).addEventListener(«click», function(){ cookiewin.style.display=«none»; // записываем cookie на 1 день, с которой мы не показываем окно let date = new Date; date.setDate(date.getDate() + 1); document.cookie = «cookiecook=no; path=/; expires=» + date.toUTCString(); }); } |
Этот сайт использует файлы cookies и сервисы сбора технических данных посетителей (данные об IP-адресе, местоположении и др.) для обеспечения работоспособности и улучшения качества обслуживания. Продолжая использовать наш сайт, вы автоматически соглашаетесь с использованием данных технологий.
Все чаще на сайтах появляются диалоги «Мы используем cookie-файлы…», зачем это делают? Cookies, IP-адреса относятся к персональным данным, если сайт их собирает и обрабатывает то он попадает под закон 152-ФЗ «О персональных данных».
В нем говорится что ресурс должен представить клиенту политику сбора и обработки персональных данных, но при этом освобождается от этой обязанности, если сайт уведомил клиента об осуществлении обработки его персональных данных (Статья 18. п.4).
Чтобы уведомить клиента выводят плашку с текстом, которую можно сделать следующим образом:
<?php if (empty($_COOKIE['messages_cookies'])): ?>
<div class="messages_cookies">
<div class="messages_cookies-wrp">
<a href="#" class="messages_cookies-close"></a>
Мы используем cookie-файлы, чтобы получить статистику, которая помогает нам улучшить
сервис для Вас с целью персонализации сервисов и предложений. Вы можете прочитать
подробнее о cookie-файлах или изменить настройки браузера. Продолжая пользоваться
сайтом без изменения настроек, вы даёте согласие на использование ваших cookie-файлов.
</div>
</div>
<?php endif; ?>
HTML
.messages_cookies {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: auto;
overflow: hidden;
background-color: white;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
z-index: 1000;
color: #666;
padding: 15px 0;
font-size: 12px;
}
.messages_cookies-wrp {
position: relative;
width: 80%;
margin: 0 auto;
}
.messages_cookies-close {
position: absolute;
top: 0;
bottom: 0;
right: -20px;
display: inline-block;
width: 16px;
height: 16px;
margin: auto 0;
background: url(https://snipp.ru/img/сlose.png) 0 0 no-repeat;
}
CSS
Обработчик кнопки «Закрыть»
$(document).ready(function(){
$('.messages_cookies-close').click(function(){
$('.messages_cookies').hide(100);
document.cookie = "messages_cookies=true; max-age=31556926";
return false;
});
});
JS
Результат
Привет всем, у кого есть свой сайт. Вы, скорее всего, знаете, что если у вас есть сайт, то он постоянно требует каких-то доработок и улучшений. То закон какой-то новый выйдет, то в SEO что-то изменится и так далее. Сегодня я покажу вам простой способ, как можно добавить на сайт предупреждение об использовании cookie без использования плагинов.
Конечно же, если у вас сайт на какой-то популярной платформе типа WordPress, то для предупреждения об использовании cookie можно установить любой из огромного количества плагинов, которые сделают всю работу за вас. Однако опытные вебмастера прекрасно знают, что чем больше на сайте плагинов, тем медленнее он работает, а это уже напрямую влияет на SEO. Поэтому если вы хоть немного понимаете код (CSS, JS, HTML), то лучше всего сделать предупреждение об использовании Cookie своими руками.
Все ли сайты используют Cookie
Этим вопросом задаются многие владельцы сайтов. Ответ очень простой – почти со 100% вероятностью ДА. Исключением могут быть только сайты, на которых нет вообще ничего, кроме текстового контента: ни счетчиков посещаемости, ни рекламы, ни форм обратной связи и так далее. В общем, если у вас хоть сколько-нибудь нормальное подобие современного сайта, то предупредить об использовании Cookie вы просто обязаны.
Почему я использовал Local Storage при написании предупреждения
Честно вам скажу, перед тем, как сделать такое предупреждение на своем сайте, я просмотрел несколько похожих статей с готовыми решениями. Но они мне не понравились. Объясняю чем. Во всех решениях были использованы cookie для работы этого функционала. Оно и не сильно странно, и даже логично. Но сейчас есть решение гораздо более удобное и простое – локальное хранилище браузера (local storage).
Работа локального хранилища очень похожа на работу cookie, но есть существенные отличия.
- Каждый раз, когда что-то записывается в cookie (или стирается оттуда), то эта информация отправляется на сервер. А это дополнительная нагрузка на сервер. А если вы обрабатываете cookie сервером, а не клиентской частью, то это еще и дополнительные задержки времени. Local Storage же в отличие от Cookie никуда дальше браузера пользователя не уходит и хранится только там.
- С локальным хранилищем удобнее работать, так как это самый обыкновенный объект. Cookie же представляют собой строку, которую постоянно приходится распарсивать, использовать регулярки или подключать дополнительный библиотеки для удобной работы с Cookie. А дополнительные библиотеки опять же негативно влияют на скорость работы вашего сайта.
Вот и во всех примерах, которые я находил в интернете для работы с cookie используют библиотеку jQuery да еще и с дополнительной мини библиотекой, которая позволят jQuery удобнее работать с кукисами. Есть примеры кода и на чистом Java Script, но они, как правило, очень громоздкие и неудобные.
Как я сделал предупреждение об использовании cookie на сайте без плагина
Код будет состоять из трех частей. Первый кусок – html разметка. Его нужно поместить куда-то в футер вашего сайта (в самый низ). Если у вас сайт на CMS, то ищите у него в корне шаблона файл footer.php. Если у вас какой-то простенький одностраничный сайт, то в самом низу найдите тег <footer></footer>. Внутри него обязательно будет еще какой-то код. Нет большой разницы, куда именно вы поместите наш код, но я бы советовал в самом конце этого тега, как раз перед </footer>.
<div id="cookie_notification"> <p>Для улучшения работы сайта и его взаимодействия с пользователями мы используем файлы cookie. Продолжая работу с сайтом, Вы разрешаете использование cookie-файлов. Вы всегда можете отключить файлы cookie в настройках Вашего браузера.</p> <button class="button cookie_accept">Принять</button> </div>
Второй кусок – стили (CSS). Тут все просто. Вам нужно найти файл style.css или main.css и закинуть этот код в самый конец. Теперь ваше «предупреждение» должно выглядеть красиво и стильно, но… но на самом деле вы его не увидите вообще, пока не добавить код Java Script. Кстати стили я написал сразу адаптивными, чтобы ваше предупреждение об использовании Cookie выглядело ровно и адекватно не только на компьютерах, но также и на мобильных устройствах.
#cookie_notification{ display: none; justify-content: space-between; align-items: flex-end; position: fixed; bottom: 15px; left: 50%; width: 900px; max-width: 90%; transform: translateX(-50%); padding: 25px; background-color: white; border-radius: 4px; box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4); } #cookie_notification p{ margin: 0; font-size: 0.7rem; text-align: left; color: $color_text; } @media (min-width: 576px){ #cookie_notification.show{ display: flex; } .cookie_accept{ margin: 0 0 0 25px; } } @media (max-width: 575px){ #cookie_notification.show{ display: block; text-align: left; } .cookie_accept{ margin: 10px 0 0 0; } }
Третья часть – JS (Java Script) – самое вкусное во всем это творении. Как раз тут я использовал локальное хранилище браузера – быстрое, удобное, доступное. Код со скриптами вам нужно добавить в основной скриптовый файл (если у вас их несколько), который срабатывает абсолютно на всех страницах сайта.
function checkCookies(){ let cookieDate = localStorage.getItem('cookieDate'); let cookieNotification = document.getElementById('cookie_notification'); let cookieBtn = cookieNotification.querySelector('.cookie_accept'); // Если записи про кукисы нет или она просрочена на 1 год, то показываем информацию про кукисы if( !cookieDate || (+cookieDate + 31536000000) < Date.now() ){ cookieNotification.classList.add('show'); } // При клике на кнопку, в локальное хранилище записывается текущая дата в системе UNIX cookieBtn.addEventListener('click', function(){ localStorage.setItem( 'cookieDate', Date.now() ); cookieNotification.classList.remove('show'); }) } checkCookies();
Когда вы все закончите, то вот, как у вас будет это выглядеть:
Сразу после использования кода
Cookie предупреждение в контексте сайта и с кнопкой стилизованной под общий стиль сайта
Как работает предупреждение об использование Cookie, которое я сделал
Да, для большинства из вас этот пункт, наверное, будет неинтересен. Вы просто вставите код, все заработает, и вы мысленно скажете мне спасибо. Но для тех из вас, кому интересно разобраться подробнее, я объясню некоторые ключевые моменты скрипта.
При каждой загрузке страницы выполняется коротенькая функция, которая проверяет объект Local Storage по ключу «cookieDate». Значение этого ключа по моей задумке будет какая-то дата в системе UNIX (точнее дата соглашения отдельного пользователя с тем, что ваш сайт использует cookie).
UNIX время — это количество секунд, прошедших с полуночи (00:00:00 UTC) 1 января 1970 года (источник — википедия)
Если прошло уже больше года с момента, когда мы показывали пользователю предупреждение, то есть если дата была получена по ключу и она на год (точнее, на 31536000000 миллисекунд) меньше текущей даты — мы показываем предупреждение, добавив ему класс «.show».
Также мы показываем это предупреждение в случае, если указанного ключа вообще не было в локальном хранилище. Это означает, что человек на нашем сайте впервые.
В противном случае мы ничего не делаем, и пользователь просто не видит предупреждение, потому что по умолчанию оно у нас скрыто, насколько вы помните.
Вывод
Надеюсь, я смог помочь решить вашу проблему, и теперь вы знаете, как сделать на своем сайте предупреждение об использовании Cookie. Если у вас остались какие-то вопросы по поводу использования этого кода, то смело задавайте их в комментариях.
Кстати, если вы знаете, почему традиционно предупреждение о Cookie пишут с использованием самих же Cookie, а не Local Storage, сообщите мне, пожалуйста, об этом. Вдруг я делаю что-то не так. Хотя чисто технически код выполняет именно то, чего от него ждут.
Всем спасибо за внимание.
Все чаще на иностранных и российских сайтах, при первом заходе, нас встречает уведомление об использовании на куки. Такое уведомление на сайты ставят чтобы соблюсти закон о «персональных данных». Европейский регламент GDPR однозначен: если ваш сайт рассчитан на аудиторию из стран Евросоюза, согласие пользователей со сбором куки обязательно. Из российского закона о персональных данных (№ 152-ФЗ) не понятно входят ли куки в эти самые «персональные данные».
В этом законе говориться, что ресурс должен представить посетителю политику сбора и обработки персональных данных (https://www.consultant.ru/document/cons_doc_LAW_61801/cbf4e15b7c330f9372e876cdf2bc928bad7950ef/), но при этом освобождается от этой обязанности, если ресурс уведомил посетителя об осуществлении обработки его персональных данных (Статья 18, пункт 4).
Для уведомление посетителя сайта о куках сделаем плашку внизу сайта, она будет появляться при первом заходе посетителя на сайт, если посетитель нажмет на кнопку «Я согласен», но сайт запомнит его на год и плашка больше показываться не будет. Все это сделаем на чистом JavaScript.
Создадим плашку об уведомлении о Cookie
Обычно для верстки я использую Bootstrap, поэтому кнопку в плашке использую оттуда. Вот CSS стили плашки:
#cookie_note{
display: none;
position: fixed;
bottom: 15px;
left: 50%;
max-width: 90%;
transform: translateX(-50%);
padding: 20px;
background-color: white;
border-radius: 4px;
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);
}
#cookie_note p{
margin: 0;
font-size: 0.7rem;
text-align: left;
color: black;
}
.cookie_accept{
width:20%;
}
@media (min-width: 576px){
#cookie_note.show{
display: flex;
}
}
@media (max-width: 575px){
#cookie_note.show{
display: block;
text-align: left;
}
}
Вот HTML, добавим его ближе к концу body страницы:
<!-- START Cookie-Alert -->
<div id="cookie_note">
<p>Мы используем файлы cookies для улучшения работы сайта. Оставаясь на нашем сайте, вы соглашаетесь с условиями
использования файлов cookies. Чтобы ознакомиться с нашими Положениями о конфиденциальности и об использовании
файлов cookie, <a href="#" target="_blank">нажмите здесь</a>.</p>
<button class="button cookie_accept btn btn-primary btn-sm">Я согласен</button>
</div>
<!-- END Cookie-Alert -->
JavaScript для предупреждения о cookie
Скрипт очень простой, в нем 3 функции для установки, получения и проверки куков, ниже код с комментариями:
<script>
function setCookie(name, value, days) {
let expires = "";
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
let matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([.$?*|{}()[]\/+^])/g, '\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
function checkCookies() {
let cookieNote = document.getElementById('cookie_note');
let cookieBtnAccept = cookieNote.querySelector('.cookie_accept');
// Если куки cookies_policy нет или она просрочена, то показываем уведомление
if (!getCookie('cookies_policy')) {
cookieNote.classList.add('show');
}
// При клике на кнопку устанавливаем куку cookies_policy на один год
cookieBtnAccept.addEventListener('click', function () {
setCookie('cookies_policy', 'true', 365);
cookieNote.classList.remove('show');
});
}
checkCookies();
</script>
В итоге, при первом заходе на сайт, наши посетители будут получать такое уведомление:
JavaScript
Саша Колташова, SVOEMEDIA
Разместите на вашем сайте сообщение о сборе куки-файлов
- /
- /
-
Зачем нужны файлы cookie, что там писать и как их добавить?
Всякий раз, когда пользователь оставляет свои контактные данные (или даже не оставляет, то на сайте происходит сбор и обработка обезличенных данных о посетителях (в т.ч. файлов «cookie») и с помощью сервисов интернет-статистики — Яндекс Метрика и Гугл Аналитика и других), он должен давать на это свое согласие.
В Тильде есть специальный блок, помогающий добавить окно, предупреждающее о сборе cookies (Другое; Уведомление об использовании куки, блок Т657, или, например, блок Т886).
Мы создали бесплатный шаблон с набором таких окон-бамперов, и рассказываем, как их настроить и зачем они нужны. Используйте его или создайте свой блок. Получите доступ к этому и другим бесплатным шаблонам после регистрации
Что там обычно пишут и где его размещать
Текст может быть любым, главное, чтобы было понятно, что речь идет о куки-файлах. Можно написать, например, такой текст:
Используя данный сайт, вы даете согласие на использование файлов cookie, помогающих нам сделать его удобнее для вас. [Подробнее] (Ссылка на описание Политики в отношении файлов cookies).
Обратите внимание, что ваша Политика обработки персональных данных должна содержать информацию о том, зачем и как вы собираете куки.
Сообщение о сборе куки-файлов должно быть на каждой странице сайта. Поэтому, если у вас есть футер, который подгружается к сайту автоматически, удобнее всего разместить его именно там.
Как редактировать шаблон
-
Скопируйте из шаблона нужный блок и разместите его на каждой странице сайта (или в футере, если вы настроили автоматическую подгрузку футера ко всему сайту)
-
Скопируйте любой понравившийся блок в ваш проект, скорректируйте текст при необходимости
-
Измените стиль блока (цвет кнопок, фона)
-
Стиль можно изменить в Настройках блока (например, цвет кнопки)
Опубликуйте все страницы сайта после внесения изменений.
Помогло? Поделитесь мнением здесь, задайте вопросы в комментариях
Здесь расскажу вам про Cookeis (куки), а именно: что это такое, где применяются, какие параметры можно задать для них, с помощью каких способов, методов установить Cookies и рассмотрим простенькие примеры использования cookies.
Скачать исходники для статьи можно ниже
Cookies, Куки (от англ. cookie — печенье) – небольшой (не более 4Кбайт) фрагмент данных, сохраняемый веб-браузером на определенное время и нужный для работы на определенной веб-странице или веб-сайте.
Cookies играют роль памяти веб-браузера.
Они применяются для:
- аутентификации пользователя;
- хранения персональных предпочтений и настроек пользователя;
- отслеживания состояния сессии доступа пользователя;
- ведения статистики о пользователях.
Обычно значения cookies записываются в файл с называнием cookies.txt, который лежит в рабочей директории установленного на компьютер браузера.
Параметры, которые можно задать cookies.
Всего имеется шесть параметров, первый из которых является обязательным:
- name – задает имя, закрепленное за Cookie;
- value – определяет значение Cookie;
- expire – время хранения Cookie. Если данный параметр не указать, то Cookie будут “жить” до конца сессии, то есть до закрытия браузера. Если время указано, то, когда оно наступит, Cookie самоуничтожится.
Остальные три параметра в большинстве случаев не используются.
- path – устанавливает путь на сайте, в рамках которого действует cookie.
- domain – домен, для которого значение cookie действительно;
- secure – передача cookie через защищенное HTTPS-соединение.
Более подробно о параметрах для cookies можно почитать по следующей ссылке:
http://citforum.ru/internet/html/cookie.shtml
http://ruseller.com/lessons.php?rub_id=28&id=593
Способы задания cookies.
Основные способы:
– с помощью HTML (META-тег в заголовке <HEAD> </HEAD>, он подходит для статичных сайтов);
– с помощью PHP;
– с помощью Javascript;
– с использованием Perl/CGI.
На примерах, мы рассмотрим с вами использование cookies с помощью PHP и Javascript.
Практика с применением Cookies.
Здесь попробуем рассмотреть простенькие примерчики.
Пример 1.
Начнем с простого – задания для cookies значения, например слова “Привет!” и вывода его на сайте.
При использовании Cookies необходимо иметь в виду, что Cookies должны устанавливаться до первого вывода информации в браузер (например, оператором echo или выводом какой-либо функции).
Чтобы удовлетворить данному условию для сайтов на WordPress, нам необходимо открыть файл header.php – для этого в панели управления сайтом в левом меню выбираем пункт “Внешний вид”, далее подпункт “Редактор” и справа в списке шаблонов выбираем файл header.php.
В его коде находим тег </head> и после него вставим следующие строчки:
<?php setcookie("test","Hello",time()+3600); ?>
Данной строчкой мы задали для cookie имя – “test”, также мы установили его значение – “Привет” и время его хранения, равным 1 часу (60*60=3600 сек).
Теперь нам осталось вывести значения нашего cookie на сайте, для этого необходимо вставить в шаблон следующие строчки:
<?php echo @$_COOKIE['test']; ?>
Например можно вставить данные строчки в начале шаблона сайдбара, для этого выберите из списка шаблонов файл sidebar.php и вставьте их в нужном месте, ну например так:
<div id="sidebar" class="grid_5"> <ul class="nobullet"> <?php echo @$_COOKIE['test']; ?> <?php /* Widgetized sidebar, if you have the plugin installed. */ if ( !dynamic_sidebar('Sidebar') ) : ?> ...
Теперь открываем свой сайт и смотрим, что получилось.
Так как при первом просмотре странички cookies записываются, то надпись “Привет!”, вы не увидите – для ее вывода на сайте вам необходимо обновить страничку дважды.
Пример 2.
В данном примере мы сделаем страницу, которая запрашивает Ваше имя при первом посещении, затем она сохраняет Ваше имя в куки и показывает его при следующих посещениях.
Если в первом примере мы задавали значение для cookies с помощью PHP, то здесь будем использовать Javascript.
Наглядный пример можно посмотреть по следующей ссылке:
http://ruseller.com/lessons/les593/demo/demo.html
Перед тем как начать, советую прочитать вам мою предыдущую статью о том как подключить Javascript в WordPress!
Начнем!
В данном примере я вставлю javascript в индивидуальный шаблон одной из страниц сайта.
Как создать индвидуальный шаблон можете прочитать в моей предыдущей статье.
Допустим я уже создал индивидуальный шаблон для странички, теперь нужно его открыть в “Редакторе” (в панели управления вашим сайтом в левом меню выбираем пункт “Внешний вид”, далее подпункт “Редактор” и справа в списке шаблонов ищем наш индивидуальный шаблон).
Теперь вставляем в его код следующие строчки javascript, которые и создадут форму для ввода имени посетителя и дальнейшем его приветствии.
Строчки самого скрипта:
<SCRIPT language="JavaScript"> <!-- function set_cookie ( name, value, expires_year, expires_month, expires_day, path, domain, secure ) { var cookie_string = name + "=" + escape ( value ); if ( expires_year ) { var expires = new Date ( expires_year, expires_month, expires_day ); cookie_string += "; expires=" + expires.toGMTString(); } if ( path ) cookie_string += "; path=" + escape ( path ); if ( domain ) cookie_string += "; domain=" + escape ( domain ); if ( secure ) cookie_string += "; secure"; document.cookie = cookie_string; } function delete_cookie ( cookie_name ) { var cookie_date = new Date ( ); //Ткущая дата и время cookie_date.setTime ( cookie_date.getTime() - 1 ); document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString(); } function get_cookie ( cookie_name ) { var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' ); if ( results ) return ( unescape ( results[2] ) ); else return null; } if ( ! get_cookie ( "username" ) ) { var username = prompt ( "Пожалуйста, ведите Ваше имя", "" ); if ( username ) { var current_date = new Date; var cookie_year = current_date.getFullYear ( ) + 1; var cookie_month = current_date.getMonth ( ); var cookie_day = current_date.getDate ( ); set_cookie ( "username", username, cookie_year, cookie_month, cookie_day ); document.location.reload( ); } } else { var username = get_cookie ( "username" ); document.write ( "Привет, " + username + ", добро пожаловать на сайт!" ); document.write ( "<br><a href="javascript:delete_cookie('username'); document.location.reload( );">Забудь обо мне!</a>" ); } // --> </SCRIPT>
И приведу код моего индивидуального шаблона со вставленным вышеуказанным javascript-ом:
<?php /* Template Name: shirokii2 */ ?> <?php get_header(); ?> <div id="box"> <div id="content_wrapper"> <div id="content"> <SCRIPT language="JavaScript"> <!-- function set_cookie ( name, value, expires_year, expires_month, expires_day, path, domain, secure ) { var cookie_string = name + "=" + escape ( value ); if ( expires_year ) { var expires = new Date ( expires_year, expires_month, expires_day ); cookie_string += "; expires=" + expires.toGMTString(); } if ( path ) cookie_string += "; path=" + escape ( path ); if ( domain ) cookie_string += "; domain=" + escape ( domain ); if ( secure ) cookie_string += "; secure"; document.cookie = cookie_string; } function delete_cookie ( cookie_name ) { var cookie_date = new Date ( ); //Ткущая дата и время cookie_date.setTime ( cookie_date.getTime() - 1 ); document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString(); } function get_cookie ( cookie_name ) { var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' ); if ( results ) return ( unescape ( results[2] ) ); else return null; } if ( ! get_cookie ( "username" ) ) { var username = prompt ( "Пожалуйста, ведите Ваше имя", "" ); if ( username ) { var current_date = new Date; var cookie_year = current_date.getFullYear ( ) + 1; var cookie_month = current_date.getMonth ( ); var cookie_day = current_date.getDate ( ); set_cookie ( "username", username, cookie_year, cookie_month, cookie_day ); document.location.reload( ); } } else { var username = get_cookie ( "username" ); document.write ( "Привет, " + username + ", добро пожаловать на сайт!" ); document.write ( "<br><a href="javascript:delete_cookie('username'); document.location.reload( );">Забудь обо мне!</a>" ); } // --> </SCRIPT> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <h2><?php the_title(); ?></h2> <div class="entry"> <?php the_content('<p class="serif">Read the rest of this page »</p>'); ?> <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?> </div> </div> <?php endwhile; endif; ?> <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?> </div> </div> </div>
Пример моей тестовой страничке, на которой я и испробовал данный скрипт можете посмотреть по данной ссылке:
http://mnogoblog2.16mb.com/new/
Можно привести еще множество примеров совместного использования Cookies и Javascript, такие например как:
– Создания различного рода напоминаний.
Например для того, чтобы пользователь создал закладку на ваш сайт, раз в неделю или после определенного количества дней показывается всплывающее окно “Добавить в избранное”.
Также можно создать напоминание подписаться на RSS ленту вашего сайта.
– Создание перенаправлений.
Перенаправление посетителей на разные страницы на основе значения, хранящегося в cookies.
Например посетителю при первом посещении сайта предлагают выбрать любимое животное (кошка, собака и др), после чего соответствующее значение записывается в cookies и при следующем посещении, он попадет уже на страничку или форум данного сайта, непосредственно рассказывающей про его любимое животное.
– Создание возможности посетителю выбрать цвет или картинку фона, а возможно и других дизайнерских элементов сайта, при этом куки запомнят его выбор и при следующем заходе отобразят сайт, так как ему нравится.
– Создание информационного блока для посетителя, в котором отображается его имя, дата последнего посещения, количество посещений данной страницы и прочей информации.
– Вывод Popup (всплывающий окон) и прочей раздражающей рекламы только один раз при первом посещении посетителя.
– Создание ежедневников, адресных книг и прочего.
В одной из следующих статей я приведу пример с использованием Javascript и Cookies, в котором посетитель сможет выбрать понравившийся фон для сайта, и при этом браузер запомнит его выбор благодаря cookies, что позволит при каждом последующем заходе на данный сайт отображать именно выбранный фон – по-моемому это будет классно!