Как добавить баннер согласия на cookie на свой сайт
Пошаговое руководство: как добавить баннер согласия на cookie одним тегом скрипта, через GTM, WordPress или Shopify и проверить, что он блокирует трекеры.
Что на самом деле делает баннер согласия на cookie
Баннер согласия на cookie — это небольшое уведомление, которое появляется, когда человек впервые попадает на ваш сайт, и спрашивает, согласен ли он на необязательные cookie и трекеры. По таким законам, как GDPR, правила UK PECR и индийский DPDPA, баннер — лишь видимая верхушка системы. Настоящая работа идёт под ней: необязательные скрипты — аналитика, рекламные пиксели и чат-виджеты — не должны запускаться, пока посетитель не даст согласие.
Это различие важно, потому что баннер, который лишь показывает сообщение, но позволяет Google Analytics или пикселю Meta сработать при загрузке страницы, не соответствует требованиям. Регуляторы ясно дали понять, что согласие должно быть получено до загрузки трекера, а не после. Поэтому цель добавления баннера — сделать две вещи одновременно: показать понятный выбор и блокировать трекеры, пока этот выбор не сделан.
Вариант 1: один тег скрипта (любой сайт)
Самый быстрый способ добавить баннер — вставить один скрипт в <head> вашего HTML. После того как вы создадите сайт в панели управления ConsentX, вы получите фрагмент для встраивания, который выглядит как одна строка со ссылкой на embed.js и ключом вашего сайта. Вставьте его как можно выше в <head>, чтобы он загружался раньше остальных ваших скриптов.
Разместите его выше тегов аналитики и рекламы. Порядок важен, потому что ConsentX должен зарегистрироваться первым, чтобы сдерживать расположенные ниже трекеры, пока посетитель не примет решение. Если вы правильно разметите свои трекеры в панели управления, загрузчик будет держать их заблокированными при первом визите и освободит их в тот момент, когда согласие будет дано.
Этот подход работает на любом написанном вручную сайте, генераторе статических сайтов или фреймворке, где вы контролируете <head> в HTML. Он же и самый чистый, потому что между ними нет промежуточной прослойки в виде плагина.
Вариант 2: Google Tag Manager
Если ваши трекеры уже управляются в Google Tag Manager, вы можете добавить ConsentX и через GTM. Создайте новый тег Custom HTML, вставьте в него фрагмент для встраивания и настройте его срабатывание по триггеру Consent Initialization, чтобы он выполнялся раньше всего остального.
Более чистый вариант — связать баннер с Google Consent Mode. Вместо того чтобы позволять тегам GTM срабатывать свободно, вы ставите их в зависимость от состояния согласия, а ConsentX обновляет это состояние, когда посетитель делает выбор. Тогда сам GTM сдерживает теги, пока согласие не получено, — а это именно то поведение, которого ждут регуляторы.
Избегайте распространённой ошибки: загружать ConsentX через GTM, пока ваш тег аналитики по-прежнему срабатывает на All Pages без проверки согласия. Если трекер не поставлен в зависимость от согласия, баннер декоративен, и вы остаётесь под угрозой.
Вариант 3: WordPress
В WordPress тяжёлый плагин вам не нужен. Самый простой путь — добавить фрагмент для встраивания в шапку темы через плагин для кода в header и footer или через поле темы для произвольного кода в <head>, чтобы он загружался в <head> на всём сайте.
Если вы используете SEO-плагин или плагин кеширования, разместите фрагмент там, где он не вырезается и не откладывается, потому что отложенная загрузка загрузчика согласия может позволить трекерам проскочить до его инициализации. После добавления очистите кеш страниц, чтобы посетители получили новую разметку <head>.
Сайты на WordPress часто загружают трекеры сразу через несколько плагинов, поэтому используйте обнаружение трекеров в панели управления, чтобы найти каждый скрипт и разметить его, прежде чем полагаться на баннер.
Вариант 4: Shopify
В Shopify добавьте фрагмент для встраивания в тему: отредактируйте theme.liquid и вставьте его внутрь элемента <head> ближе к началу. Темы Shopify загружают несколько собственных скриптов и скриптов приложений, поэтому важно разместить загрузчик высоко в <head>.
У Shopify также есть собственный API приватности и согласия покупателей для витрины. По возможности подключите ConsentX к этому сигналу, чтобы нативные пиксели Shopify учитывали выбор посетителя наравне с остальными вашими трекерами. Протестируйте на сценарии оформления заказа, потому что страницы оформления заказа иногда загружают скрипты, которых нет на страницах витрины.
Как проверить, что баннер действительно блокирует трекеры
Тестирование — это тот шаг, который чаще всего пропускают команды, и именно он решает, соответствуете ли вы требованиям на самом деле. Откройте свой сайт в новом окне приватного просмотра, затем откройте инструменты разработчика в браузере и следите за вкладкой Network во время загрузки страницы. Пока вы ничего не нажали на баннере, вы не должны видеть ни одного запроса к доменам аналитики или рекламы.
Затем нажмите «Отклонить» и перезагрузите страницу. Трекеры должны по-прежнему отсутствовать, а маркетинговые cookie не должны появляться во вкладке Application или Storage. После этого нажмите «Принять» и убедитесь, что теперь трекеры загружаются, а cookie появляются. Если трекеры срабатывают до того, как вы сделали выбор, значит скрипт либо расположен слишком низко в <head>, либо трекер не размечен для блокировки.
Повторите тест на нескольких ключевых типах страниц, включая главную, страницу товара или материала и любую страницу с чат-виджетом или встроенным видео, поскольку они часто подтягивают дополнительные сторонние скрипты.
Это руководство представляет собой краткое изложение простым языком для общего сведения и не является юридической консультацией. Уточните свои обязанности у квалифицированных юристов.
Связанное на ConsentX
Примените это руководство на практике
Начните бесплатно, просканируйте свой сайт или свяжитесь с нашей командой.