Быстрый старт

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

Перед началом

Вам понадобятся аккаунт Cookiesh и сайт. В панели управления откройте Domains → Add domain, введите свой домен и скопируйте Site ID. Он выглядит так: ck_live_8f2a91.

Cookiesh распределяет всё по четырем категориям согласия:

Категория	По умолчанию	Типичное применение
necessary	Всегда включена	Сессии, безопасность, балансировка нагрузки, сам файл cookie с согласием
preferences	Выключена	Язык, тема и другие запоминаемые настройки
analytics	Выключена	Продуктовая и трафиковая аналитика
marketing	Выключена	Реклама, ретаргетинг и пиксели соцсетей

Перед запуском сайта выполните первое сканирование файлов cookie из панели управления. Тогда Cookiesh будет знать, какие скрипты и файлы cookie к какой категории относятся, и сможет заранее заполнить ваш баннер.

Установка с помощью HTML

Добавьте загрузчик первым скриптом в <head>, чтобы он выполнялся раньше всего, что устанавливает файлы cookie:

<head>
  <script
    src="https://sdk.cookiesh.eu/v1/cookiesh.js"
    data-site-id="ck_live_8f2a91"
    async
  ></script>
  <!-- остальные теги ниже -->
</head>

Затем у каждого скрипта, которому нужно согласие, замените type="text/javascript" на type="text/plain" и добавьте категорию в атрибут data-cookiesh. Когда посетитель разрешит эту категорию, Cookiesh вернет прежний тип и запустит скрипт:

<script
  type="text/plain"
  data-cookiesh="analytics"
  src="https://analytics.example.com/script.js"
></script>

<script type="text/plain" data-cookiesh="marketing">
  // Встроенные скрипты работают так же.
  initAdPixel();
</script>

Можно блокировать и iframe, например встроенные видео и карты. Используйте data-cookiesh-src вместо src, и Cookiesh загрузит их после получения согласия.

Установка с Next.js

Установите React SDK:

npm install @cookiesh/react

Подключите скрипт в корневом layout со стратегией beforeInteractive, чтобы он выполнялся раньше других скриптов, и оберните приложение в CookieshProvider:

// app/layout.tsx
import Script from 'next/script';
import { CookieshProvider } from '@cookiesh/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Script
          src="https://sdk.cookiesh.eu/v1/cookiesh.js"
          data-site-id={process.env.NEXT_PUBLIC_COOKIESH_SITE_ID}
          strategy="beforeInteractive"
        />
        <CookieshProvider>{children}</CookieshProvider>
      </body>
    </html>
  );
}

Отображайте код, зависящий от согласия, только когда категория разрешена. useConsent() перерисовывает компонент каждый раз, когда посетитель меняет свой выбор:

// app/analytics.tsx
'use client';

import Script from 'next/script';
import { useConsent } from '@cookiesh/react';

export function Analytics() {
  const { analytics } = useConsent();
  if (!analytics) return null;

  return <Script src="https://analytics.example.com/script.js" strategy="afterInteractive" />;
}

Для продуктов с авторизацией передайте userId в CookieshProvider, чтобы синхронизировать выбор посетителя между устройствами.

Установка с Google Tag Manager

Community Template от Cookiesh задает состояния Google Consent Mode v2 по умолчанию до срабатывания любых тегов и обновляет их, когда посетитель делает выбор.

1. В контейнере GTM откройте Templates → Tag templates → Search gallery и добавьте Cookiesh CMP.
2. Создайте новый тег на основе шаблона и вставьте свой Site ID.
3. В качестве триггера выберите Consent Initialization – All Pages.
4. Выберите состояние согласия по умолчанию для каждого региона. Для ЕЭЗ, Великобритании и Швейцарии используйте denied.
5. Для каждого тега Google откройте Advanced settings → Consent settings. Оставьте встроенные проверки согласия включенными и потребуйте дополнительное согласие для тегов не от Google.
6. Опубликуйте контейнер.

Если вы подключаете gtag.js без GTM, задайте состояния по умолчанию самостоятельно, до тега Google:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }

  gtag('consent', 'default', {
    ad_storage: 'denied',
    ad_user_data: 'denied',
    ad_personalization: 'denied',
    analytics_storage: 'denied',
    wait_for_update: 500,
  });
</script>

Cookiesh отправляет соответствующий вызов gtag('consent', 'update', …) сразу после того, как посетитель сделает выбор, а также при каждом последующем просмотре страницы.

Проверка установки

1. Откройте сайт в приватном окне. Должен появиться баннер, а в инструментах разработчика браузера пока не должно быть файлов cookie аналитики и маркетинга.
2. Выполните Cookiesh.debug() в консоли. Команда выведет определенный регион, активный баннер, каждый заблокированный скрипт и текущее состояние согласия.
3. Разрешите только аналитику и перезагрузите страницу. Скрипты аналитики запустятся, а маркетинговые останутся заблокированными.
4. В Google Tag Assistant убедитесь, что на вкладке Consent события default и update идут в правильном порядке.

Следующие шаги

• Подстройте баннер под свой бренд: см. Оформление баннера.
• Проверьте, как классифицируются и блокируются ваши файлы cookie: см. Категории cookie.
• Добавьте региональные правила для GDPR, CCPA и LGPD: см. Правила геотаргетинга.
• Узнавайте о согласии и реагируйте на него в собственном коде с помощью JavaScript API и событий.
• Читайте блог: там есть практические руководства по требованиям к согласию.