В этой статье мы поговорим о политике конфиденциальности на сайте.
Политика конфиденциальности (далее ПК) — это политика обработки персональных данных на вашем сайте. То есть вы, как владелец сайта используете и защищаете личные данные полученные от пользователей (например, емайл или номер телефона).
Политика конфиденциальности для сайта или лендинга?
Зачем нужна ПК?
Для того, чтобы пройти модерацию в рекламных сетях.
Если вы рекламируетесь или планируете создать рекламу в Яндекс.Директ, Гугл АдВордс, Вконтакте, Таргет Майл ру и собираете на вашем лендинге персональные данные посетителей (имя, email, номер телефона и т.п.), то вам необходимо добавить на сайт политику конфиденциальности, чтобы пройти модерацию (чтобы вас допустили к показам) в этих сетях.
Потому что в России есть Федеральный Закон № 152 — ФЗ РФ «О персональных данных». По закону необходимо персональные данные собирать только с определенной целью и их необходимо защитить, то есть они не должны быть переданы другим людям.
В этой политике, которую вы добавите на сайт, вы как раз должны прописать то, что вы собираете контактные данные с целью, например, подписки на email рассылку и что эти контактные данные ни в коем случае не будут переданы третьим лицам. После того как вы добавите данную политику на ваш лендинг, то вы увеличите вероятность прохождения модерации в рекламных сетях.
[button url=»https://rek9.ru/s17z» class=»btn btn-danger btn-big btn-block» target=»_blank»]Сгенирировать Политику Конфиденциальности[/button]
Политика конфиденциальности для лендинга
Как добавить ПК на лендинг в всплывающем окне (модальном окне). Для лендинга (подразумевается одностраничный сайт для рекламы) важно, чтобы пользователь не уходил на другие странице, поэтому мы разберем на примере создания всплывающего окна.
Далее я использую фреймворк бутстрап от создателей twitter, чтобы из него взять скрипты для создания модального окна (смотрите в видео в начале статьи)
Шаги для создания модального окна:
- Открыть лендинг
- Открыть документацию bootstrap (на английском)
- Найти код в документации bootstrap «модальное окно» (Modal) и вставить на наш лендинг.
При этом модальное окно состоит из 2 частей:
- ссылки или кнопки, которое добавляет и открывает это модальное окно;
- само модальное окно.
Один важный момент: кроме стилей bootstrap необходимо чтобы подгружался bootstrap JavaScript и JQuery. Тогда на лендинге будет корректно открываться модальное окно.
[alert class=»alert yellow»]Если вы рекламируетесь Вконтакте, модератор не всегда воспринимает ссылку «Политика конфиденциальности». Поэтому в ссылке лучше написать «Политика обработки персональных данных».[/alert]
Итак, что у нас должно получится
Модальное окно на лендинге, которое открывается при нажатии на ссылку ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ на примере моего лендинга lp.rek9.ru. Сейчас страницу я немного изменил.
Практика
Для работы с лендингом я возьму лендинг «Игры для девочек», который мы с вами создавали в прошлых уроках.
Для удобства работы откройте в браузере окна:
- вашего сервера
- вашего лендинга
- www.getbootstrap.com в меню JavaScript справа выбрать Modal
В документации bootstrap в разделе Modal спуститесь ниже и найдите Live Demo, скопируйте код под этой надписью. Откройте NotePad++ и вставьте код в новое окно. В NotePad++ в меню выберите СИНТАКСИС, H, HTML для удобства работы.
В этом коде меняем «Launch Demo Modal» на «Политика конфиденциальности». Затем меняем кнопку <botton >на ссылку <a href=»»>
Далее необходимо изменить само модальное окно. Найдите в коде ниже «Modal Title» и вместо этой надписи вставьте «Политика конфиденциальности». Вместо «Close» напишите «Закрыть». Полностью удалите код кнопки Save Change. Сохраните.
В коде с тегом <div> вместо троеточия вставляем сам текст политики конфиденциальности. Я копирую этот текст с моего сайта lp.rek9.ru со всеми стилями. Теперь наш код готов, скопируем его и перейдем в редактор файлов на сервере. Откроем файл нашего лендинга. Удостоверимся, что подключены скрипты Java JQuery. Находим эти слова в коде. Если они есть, значит наше модальное окно будет открываться.
Далее находим последний тег </div> и после него вставляем код ссылки на политику конфиденциальности. Теперь нам нужно вырезать код запуска модального окна, который начинается с <a> заканчивается </a> и вставить в то место, где мы хотим разместить ссылку о политике конфиденциальности. У меня есть внизу страницы специальная пустая колонка, куда я вставлю ссылку на политику конфиденциальности. При этом я еще добавлю тег <hr> это разделительная линия. Сохраните изменения.
Пример текста политики конфиденциальности
Скопируйте код ниже, там уже в html есть пример текста
[syntax type=»html»]
<!— Button trigger modal —>
<a href=»» data-toggle=»modal» data-target=»#myModal»>
Политика конфиденциальности
</a>
<!— Modal —>
<div class=»modal fade» id=»myModal» tabindex=»-1″ role=»dialog» aria-labelledby=»myModalLabel» aria-hidden=»true»>
<div class=»modal-dialog»>
<div class=»modal-content»>
<div class=»modal-header»>
<button type=»button» class=»close» data-dismiss=»modal» aria-label=»Close»><span aria-hidden=»true»>×</span></button>
<h4 class=»modal-title» id=»myModalLabel»>Политика конфиденциальности</h4>
</div>
<div class=»modal-body»>
<p>Политика в отношении обработки персональных данных определяет основные принципы и правила по обработке персональных данных, которыми мы руководствуемся в нашей работе, а также в общении с клиентами, поставщиками и сотрудниками. Политика в отношении обработки персональных данных распространяется на всех наших сотрудников.</p>
<p>При обработке персональных данных мы стремимся соблюдать требования законодательства Российской Федерации, в частности Федеральный закон № 152-ФЗ «О персональных данных», а также нормы и правила, установленные в нашей компании.</p>
<div class=»text-center»>
<p>Политика в отношении обработки персональных данных</p>
<p><a target=»_blank» href=»/policy-rek9.pdf»>policy.pdf</a>, 355 КБ</p></div>
<p>По всем вопросам вы можете связаться по email info@rek9.ru</p>
</div>
<div class=»modal-footer»>
<button type=»button» class=»btn btn-default» data-dismiss=»modal»>Закрыть</button>
</div>
</div>
</div>
</div>
[/syntax]
Результат
Перейдем на наш лендинг, и обновим страницу в браузере. Внизу под формой с кнопкой появилась ссылка ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ. Нажмем на ссылку. Открывается модальное окно с текстом политики. На моем лендинге по ссылке в модальном окне можно скачать pdf файл с текстом политики конфиденциальности. Если вы хотите сделать так же, скопируйте текст на моем лендинге, вставьте в документ Word, измените текст под себя.
[alert class=»alert pink»]Если вы собираете на сайте email, то в политике конфиденциальности обязательно должны указать свой email. Также и с номером телефона.[/alert]
Политика конфиденциальности для сайта
Для сайта все проще, потому что вам не нужно создавать модальное окно. Берете просто текст ПК и создаете отдельную страницу. На новой странице публикуете текст и внизу сайта в подвале ставите ссылку на страницу с текстом ПК.
Заключение
Таким образом добавляется ПК на сайт с помощью фреймворка bootstrap.
Посмотреть, как работает модальное окно с политикой конфиденциальности можете на сайте lp.rek9.ru
↓ Презентация drive.google.com (pdf 335 КБ)