YouTube, Google Maps и другие встраивания: как загружать их после получения согласия

Встроенные видео YouTube, Google Maps и публикации из соцсетей загружают сторонний код сразу после отрисовки страницы, и этот код может устанавливать файлы cookie и отправлять данные посетителя поставщику. Чтобы законно встраивать их в ЕС и Великобритании, сначала показывайте локальную заглушку и загружайте настоящее встраивание только после того, как посетитель даст согласие или нажмет кнопку загрузки. Режим повышенной конфиденциальности YouTube помогает, но не заменяет согласие.

Почему для встраиваний нужно согласие?

Встраивание — это окно в чужой сайт. Когда браузер отрисовывает iframe с youtube.com или google.com, он запрашивает страницу, скрипты и изображения поставщика, передает IP-адрес и данные браузера посетителя и позволяет поставщику считывать и записывать собственные файлы cookie и данные в хранилище. Ничто из этого не ждет вашего баннера.

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

Кроме того, вы несете ответственность за само решение встроить контент. В деле Fashion ID (C-40/17) Суд ЕС постановил, что сайт, встроивший кнопку «Нравится» Facebook, является совместным с Facebook контролером в части сбора данных посетителя и их передачи в Facebook. Та же логика применима и к другим встраиваниям, которые отправляют данные своему поставщику.

Достаточно ли youtube-nocookie.com?

Нет. Режим повышенной конфиденциальности YouTube, который включается заменой домена встраивания на www.youtube-nocookie.com, означает, что просмотры встроенного видео не используются для персонализации YouTube для зрителя или рекламы, которую он видит в других местах. Это реальное улучшение.

Но этот режим не мешает плееру загружаться с серверов Google и использовать хранилище браузера, а данные посетителя все равно попадают в Google при загрузке iframe. Используйте режим повышенной конфиденциальности как URL, который загружается после получения согласия, а не как повод загружать плеер без него.

Что загружает каждое из распространенных встраиваний?

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

Встраивание	Что загружается до взаимодействия	Альтернатива без согласия
Видео YouTube	Страница плеера, скрипты, миниатюры, файлы cookie или хранилище Google	Миниатюра на вашем сервере с кнопкой загрузки по клику
Видео Vimeo	Страница плеера, скрипты, аналитика	Миниатюра на вашем сервере или опция плеера Vimeo do-not-track — после проверки того, что она охватывает
Google Maps	Фрагменты карты, скрипты, файлы cookie Google	Статичное изображение карты и ссылка для построения маршрута
Публикации из соцсетей (X, Instagram, Facebook)	Скрипт поставщика, который перерисовывает публикацию	Статический резервный HTML, который предоставляет поставщик
Виджеты чатов и бронирования	Скрипт поставщика, часто с отслеживанием сеанса	Кнопка, которая открывает виджет по запросу

Как сделать заглушку с загрузкой по клику?

Отрисуйте заглушку, которая выглядит как встраивание, объясняет, что произойдет, и содержит настоящую кнопку. Храните URL встраивания в data-атрибуте, чтобы браузер его не запрашивал.

<div class="embed" data-consent="marketing"
     data-embed-src="https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1"
     data-embed-title="Демонстрационное видео о продукте">
  <img src="/images/demo-thumbnail.jpg" alt="" width="560" height="315">
  <p>Это видео размещено на YouTube. При воспроизведении загружается контент от Google,
     который может устанавливать файлы cookie. <a href="/cookie-policy">Подробнее</a></p>
  <button type="button" class="embed-load">Воспроизвести видео</button>
  <label><input type="checkbox" class="embed-remember"> Всегда разрешать видео YouTube</label>
</div>

Затем по клику заменяйте заглушку на iframe — или заменяйте все заглушки категории, как только посетитель даст согласие через баннер:

function loadEmbed(placeholder) {
  const frame = document.createElement('iframe');
  frame.src = placeholder.dataset.embedSrc;
  frame.title = placeholder.dataset.embedTitle;
  frame.width = '560';
  frame.height = '315';
  frame.allow = 'autoplay; encrypted-media; picture-in-picture';
  frame.allowFullscreen = true;
  placeholder.replaceWith(frame);
  frame.focus(); // фокус остается там, где был пользователь клавиатуры
}

document.addEventListener('click', (event) => {
  const button = event.target.closest('.embed-load');
  if (!button) return;
  const placeholder = button.closest('.embed');
  if (placeholder.querySelector('.embed-remember')?.checked) {
    grantConsent(placeholder.dataset.consent); // ваш уровень управления согласием; загружает остальное
  }
  loadEmbed(placeholder);
});

// Вызывайте из обработчиков баннера, когда категория разрешена
function activateEmbeds(category) {
  document.querySelectorAll(`.embed[data-consent="${category}"]`).forEach(loadEmbed);
}

Несколько деталей отличают заглушку, которая работает, от той, что раздражает людей:

• Размещайте превью у себя. Загрузка миниатюры YouTube по прямой ссылке отправляет запрос в Google до того, как сделан какой-либо выбор.
• Резервируйте место. Задайте заглушке те же размеры, что и у iframe, чтобы избежать смещения макета при замене.
• Называйте поставщика. Именно конкретное уведомление («размещено на YouTube») делает клик информированным выбором.
• Сохраняйте долгосрочный выбор. Если посетитель отметил «всегда разрешать», сохраните это через уровень управления согласием и занесите в журнал, как любой выбор в баннере.

Общий подход к задержке скриптов описан в статье как блокировать сторонние скрипты до получения согласия.

Как быть с публикациями из соцсетей и картами?

У большинства встраиваний из соцсетей уже есть статический резервный вариант. Например, встроенная публикация из X — это blockquote с текстом публикации, который скрипт виджета поставщика затем превращает в расширенную карточку. Оставьте blockquote и загружайте скрипт виджета только после получения согласия:

<blockquote class="twitter-tweet">
  <p>Текст публикации, автор и дата — в том виде, в каком их дает код встраивания.</p>
  <a href="https://x.com/example/status/1234567890">Открыть публикацию</a>
</blockquote>

<!-- Неактивен, пока не разрешена категория marketing -->
<script type="text/plain" data-consent="marketing"
        src="https://platform.twitter.com/widgets.js"></script>

Для карт в большинстве случаев достаточно статичного изображения местоположения и ссылки «Открыть в Google Maps» — без загрузки чего-либо от Google. Если нужна интерактивная карта, используйте ту же заглушку с загрузкой по клику, что и для видео.

Улучшает ли загрузка по клику производительность?

Да. Видеоплееры и виджеты карт — одни из самых тяжелых элементов на многих страницах: зачастую это сотни килобайт JavaScript. Если загружать их, только когда кто-то об этом просит, эти затраты исчезают для каждого посетителя, который просто прокручивает страницу дальше, а это улучшает такие метрики, как Largest Contentful Paint и Interaction to Next Paint. Подробнее о том, как сохранить быстродействие инструментов согласия, читайте в статье баннеры cookie и Core Web Vitals.

Итоги

Каждое встраивание — это сторонний запрос и, как правило, стороннее хранилище, поэтому относитесь к нему как к любому другому трекеру: до получения согласия ничего не загружается. Заменяйте встраивания доступными заглушками, размещенными на вашем сервере, загружайте настоящий контент, когда посетитель нажимает кнопку или дает согласие, и сохраняйте статические резервные варианты для публикаций из соцсетей и карт. Такие инструменты, как Cookiesh, могут задерживать iframe, например с видео и картами, до получения согласия, а сканер Cookiesh показывает поставщиков встраиваемого контента вместе с другими сторонними запросами, чтобы вы видели, на каких страницах нужны заглушки.

Эта статья носит общий информационный характер и не является юридической консультацией. Для решений, касающихся вашей конкретной ситуации, обратитесь к квалифицированному специалисту по защите данных.