Как поставить баннер cookie на сайт и не сломать аналитику: пошагово

Частая ошибка с баннером cookie выглядит так. Баннер стоит, посетитель видит кнопки «Принять» и «Отклонить», а Google Analytics уже отправил данные. Ещё до того, как человек что-то нажал.

Мы проверили это на тестовой странице. Сначала поставили строку нашего баннера Consent первой в <head>, а ниже тестовый тег аналитики, вставленный в страницу как есть. Баннер появился, а запрос аналитики ушёл сразу, без всякого выбора.

Причина простая: баннер не может остановить скрипт, который уже вставлен в страницу и выполняется сам. После четырёх шагов ниже баннер действительно управляет тегами. Зачем вообще нужно согласие и какая аналитика его требует, мы разбирали в статье о правилах ЕС для баннеров cookie.

Шаг 1. Выпишите все теги

Прежде чем что-то вставлять, составьте список всего, что сайт подключает:

• аналитика: Google Analytics, Яндекс Метрика, Microsoft Clarity;
• реклама: Google Ads, Meta Pixel, LinkedIn и другие пиксели;
• Google Tag Manager, если через него подключено остальное;
• чаты, встроенные видео с YouTube, карты.

Отдельно проверьте настройки самой платформы. Аналитику часто подключают не кодом, а полем в настройках конструктора или плагином. Такой тег тоже вставляется в страницу, и баннер о нём не знает.

Шаг 2. Поставьте строку баннера первой в <head>

Баннер должен выполниться раньше всех остальных скриптов. Только так он успеет придержать теги до выбора посетителя. В Consent это одна строка из вкладки Install:

<script src="https://fewbase.com/consent/s/ВАШ-ID.js"></script>

Не добавляйте к ней async и defer. С ними браузер может выполнить строку позже других тегов.

Куда вставлять на разных платформах.

Next.js

Документация Next.js советует для менеджеров согласия компонент Script со стратегией beforeInteractive (nextjs.org). Мы проверили, что получается на деле (Next.js 16.4.3, React 19.3.1). Такой скрипт попадает в <head> только как предзагрузка, а запускает его позже сам Next.js. В нашем тесте тег, вшитый прямо в <head>, выполнился раньше баннера.

Надёжнее обычный тег в <head> корневого layout, первым среди ваших скриптов:

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <script src="https://fewbase.com/consent/s/ВАШ-ID.js"></script>
      </head>
      <body>{children}</body>
    </html>
  );
}

В готовом HTML это обычный <script src> без async и defer, и в нашем тесте он выполнился первым.

Tilda

Код для всех страниц вставляется в настройках сайта: Site Settings → More → HTML code for the head section. После этого страницы нужно опубликовать заново, иначе код не появится (справка Tilda).

Webflow

Site settings → вкладка Custom code → раздел Head code, затем Save changes. Код заработает только после публикации сайта. Поле для своего кода есть, если у вас Workspace уровня Core, Growth, Agency или Freelancer или активный Site plan (справка Webflow).

Webflow в той же справке советует добавлять скриптам в <head> async или defer, чтобы страница грузилась быстрее. Для строки баннера это как раз исключение: оставьте её без этих атрибутов.

WordPress

В самом WordPress нет поля для кода в <head>. Скрипт выводят через хук wp_head или подключают через wp_enqueue_scripts (документация WordPress), обычно в дочерней теме или маленьком плагине. С версии 6.3 у wp_enqueue_script есть параметр strategy со значениями defer и async (документация). Для строки баннера его не задавайте.

Шаг 3. Отдайте теги баннеру

Теперь каждый тег из списка нужно передать баннеру. Есть два способа.

Убрать код и указать ID

Для популярных сервисов это проще всего. Удалите их код со страниц и укажите ID во вкладке Connectors: Google Tag Manager, Google Analytics 4, Google Ads, Meta Pixel и Microsoft Clarity. Баннер сам загрузит каждый сервис после того, как посетитель разрешит его категорию.

Пометить тег

Если код должен остаться в HTML, поменяйте у тега тип на text/plain и добавьте категорию:

<!-- было: выполняется сразу -->
<script src="/tracker.js"></script>

<!-- стало: ждёт выбора посетителя -->
<script type="text/plain" data-category="analytics" src="/tracker.js"></script>

Браузер не выполняет скрипт с типом text/plain. Баннер запустит его после того, как посетитель разрешит аналитику. Так же работают встроенные скрипты. У видео и карт в <iframe> адрес переносят из src в data-src и добавляют data-category.

На той же тестовой странице с помеченным тегом до выбора не ушло ни одного запроса.

Если у вас Google Tag Manager

Через Tag Manager работают с режимом согласия Google (Consent Mode). Схема такая: баннер сначала выставляет состояние согласия по умолчанию, раньше всех тегов, в Tag Manager для этого есть триггер Consent Initialization. А после выбора посетителя передаёт обновлённое состояние (Google). У тегов Google проверка согласия встроена, для остальных в Tag Manager можно включить дополнительную проверку (справка Tag Manager).

У Consent Mode два варианта. В базовом теги Google не загружаются, пока посетитель не дал согласие. В расширенном они загружаются сразу, а при отказе отправляют в Google запросы без cookie (Google; справка Analytics).

В Consent режим согласия встроен. Tag Manager загружается после любого выбора, даже после «Отклонить всё», потому что дальше согласие проверяет он сам для каждого тега.

Если Meta Pixel вставлен вручную

Если пиксель остаётся в коде, Meta предлагает свой способ: вызвать fbq('consent', 'revoke') до fbq('init') на каждой странице, а после согласия вызвать fbq('consent', 'grant') (документация Meta). Проще отдать пиксель баннеру по ID, как в шаге 3.

Шаг 4. Проверьте, что работает

Откройте сайт в новом приватном окне Chrome. После закрытия приватного сеанса Chrome не хранит данные сайтов (справка Chrome), поэтому в новом сеансе вы видите баннер как новый посетитель.

1. Откройте DevTools, вкладку Network, включите Preserve log, чтобы запросы не терялись при перезагрузке, и Disable cache (Chrome DevTools).
2. Перезагрузите страницу и, пока баннер на экране, найдите в фильтре запросы к сервисам аналитики и рекламы. Их быть не должно.
3. Во вкладке Application → Storage → Cookies не должно быть cookie аналитики, например _ga (Chrome DevTools).
4. Нажмите «Отклонить всё»: запросов по-прежнему нет.
5. Откройте новое приватное окно и нажмите «Принять всё»: запросы пошли.

В Consent есть ещё одна проверка: после первого выбора на вашем сайте вкладка Install показывает статус «Working», время последнего согласия и домен, с которого оно пришло.

Чек-лист

• Выписаны все теги, включая подключённые через настройки платформы.
• Строка баннера стоит первой в <head>, без async и defer.
• Каждый тег либо подключён через баннер по ID, либо помечен type="text/plain" и data-category.
• Видео и карты в <iframe> помечены через data-src.
• В приватном окне до выбора нет запросов к аналитике и cookie вроде _ga.
• После «Отклонить всё» запросов нет, после «Принять всё» они идут.

Чего Consent не делает: он не сканирует сайт и не находит теги сам. Тег, который вы не подключили и не пометили, будет работать как раньше. Поэтому шаги 1 и 4 важнее всего.

Начать можно бесплатно.