Денис Герасимов

Политика конфиденциальности для сайта или лендинга

Заставка к видео - Политика конфиденциальности для сайта или лендинга

В этой статье мы поговорим о политике конфиденциальности на сайте.

Политика конфиденциальности (далее ПК) — это политика обработки персональных данных на вашем сайте. То есть вы, как владелец сайта используете и защищаете личные данные полученные от пользователей (например, емайл или номер телефона).

Политика конфиденциальности для сайта или лендинга?

Зачем нужна ПК?

Для того, чтобы пройти модерацию в рекламных сетях.

Если вы рекламируетесь или планируете создать рекламу в Яндекс.Директ, Гугл АдВордс, Вконтакте, Таргет Майл ру и собираете на вашем лендинге персональные данные посетителей (имя, email, номер телефона и т.п.), то вам необходимо добавить на сайт политику конфиденциальности, чтобы пройти модерацию (чтобы вас допустили к показам) в этих сетях.

Потому что в России есть Федеральный Закон № 152 — ФЗ РФ «О персональных данных». По закону необходимо персональные данные собирать только с определенной целью и их необходимо защитить, то есть они не должны быть переданы другим людям.

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

Политика конфиденциальности для лендинга

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

Далее я использую фреймворк бутстрап от создателей twitter, чтобы из него взять скрипты для создания модального окна (смотрите в видео в начале статьи)

Шаги для создания модального окна:

  1. Открыть лендинг
  2. Открыть документацию bootstrap (на английском)
  3. Найти код в документации bootstrap «модальное окно» (Modal) и вставить на наш лендинг.

При этом модальное окно состоит из 2 частей:

  1. ссылки или кнопки, которое добавляет и открывает это модальное окно;
  2. само модальное окно.

Один важный момент: кроме стилей bootstrap необходимо чтобы подгружался bootstrap JavaScript и JQuery. Тогда на лендинге будет корректно открываться модальное окно.

Если вы рекламируетесь Вконтакте, модератор не всегда воспринимает ссылку «Политика конфиденциальности». Поэтому в ссылке лучше написать «Политика обработки персональных данных».

Итак, что у нас должно получится

Политика обработки персональных данныхМодальное окно на лендинге, которое открывается при нажатии на ссылку ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ на примере моего лендинга 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 есть пример текста

<!-- 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">&times;</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>

Результат

Перейдем на наш лендинг, и обновим страницу в браузере. Внизу под формой с кнопкой появилась ссылка ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ. Нажмем на ссылку. Открывается модальное окно с текстом политики. На моем лендинге по ссылке в модальном окне можно скачать pdf файл с текстом политики конфиденциальности. Если вы хотите сделать так же, скопируйте текст на моем лендинге, вставьте в документ Word, измените текст под себя.

Если вы собираете на сайте email, то в политике конфиденциальности обязательно должны указать свой email. Также и с номером телефона.

Политика конфиденциальности для сайта

Для сайта все проще, потому что вам не нужно создавать модальное окно. Берете просто текст ПК и создаете отдельную страницу. На новой странице публикуете текст и внизу сайта в подвале ставите ссылку на страницу с текстом ПК.

Заключение

Таким образом добавляется ПК на сайт с помощью фреймворка bootstrap.

Посмотреть, как работает модальное окно с политикой конфиденциальности можете на сайте lp.rek9.ru

↓ Презентация drive.google.com (pdf 335 КБ)

Подпишитесь на YouTube канал

  • https://plus.google.com/110514184186324982177 Денис Майнер

    Спасибо. Много нового для меня открыли. Я уже чуть программу для лендинга не купил. Теперь думаю сам буду пробовать.