Как настроить аналитику Google и сбор куки на сайте при помощи AI-ассистента

Лид

Привет! 2025 год для меня начался с решимости стать веб-мастером. Этот сайт — моя лаборатория и личный кабинет. Как любой уважающий себя веб-мастер, однажды я решила подключить аналитику Google. Как любой исследователь интернета — делюсь опытом. Ниже вы найдёте промпт для AI-ассистента (я использовала Cursor), инструкцию, что сделать в интерфейсах Google, и алгоритм подключения, на который можно ориентироваться.

---

1) Промпт для AI-ассистента

Мне нужно настроить полную систему аналитики и cookie consent для Astro SSR сайта с доменной локализацией (oldasweb.com/ru/nl).

Требования:

1. GDPR/CCPA-совместимый cookie-баннер с i18n (EN/RU/NL)
2. Интеграция Google Tag Manager
3. Google Analytics 4 через GTM
4. Consent Mode v2 с корректными настройками
5. Совместимость с CSP (через nonce)
6. A11y: focus trap, ESC, role="dialog"
7. SSR-safe реализация
8. localStorage для хранения выбора

Архитектура:

• Astro SSR с middleware.ts
• Доменная локализация
• SuperLayout.astro — базовый layout
• Типы в env.d.ts

Пошагово:

1. Сначала CSP и настройка nonce
2. Компонент CookieBanner с полным функционалом
3. Встраивание GTM в SuperLayout
4. Consent Mode v2 (по умолчанию — denied)
5. TypeScript типы
6. Тестирование и проверка

Важно: consent по умолчанию — denied, все скрипты с nonce, код — SSR-safe.

---

2) Пошаговая настройка в интерфейсах Google (без AdSense)

2.1 Google Tag Manager (GTM)

Создать контейнер

• Перейдите на tagmanager.google.com
• Создайте контейнер:
  • Название: OldasWeb Production
  • Тип: Web
  • Получите Container ID вида GTM-XXXXXXX

Включить Consent Mode по умолчанию

• Workspace → Tags → New
• Tag Configuration → Consent Mode
• Default Consent State:
  • ad_storage: denied
  • ad_user_data: denied
  • ad_personalization: denied
  • analytics_storage: denied
  • wait_for_update: 500 (даём баннеру показаться и обновить согласие)
• Triggering: All Pages
• Tag Name: Consent Mode – Default

Триггер для обновления согласия

• Triggers → New
• Trigger Configuration → Custom Event
• Event Name: consent_update
• This trigger fires on: All Custom Events
• Trigger Name: Consent Update Event

Примечание: баннер при выборе пользователя должен отправлять событие consent_update в dataLayer.

---

2.2 Google Analytics (GA4)

Создать свойство

• Перейдите на analytics.google.com → Admin → Create Property
• Заполните:
  • Property Name: OldasWeb
  • Reporting Time Zone: ваш часовой пояс
  • Currency: USD
• Получите Measurement ID вида G-XXXXXXXXXX

Добавить GA4 в GTM

• Tags → New
• Tag Configuration → Google Analytics: GA4 Configuration
• Вставьте Measurement ID (G-XXXXXXXXXX)
• Откройте Consent Settings и убедитесь, что тег уважает состояние согласия (в новых контейнерах включено по умолчанию).
• Triggering:
  • All Pages (первичная инициализация)
  • + триггер Consent Update Event (чтобы GA4 «переподхватил» состояние после решения пользователя)
• Tag Name: GA4 – Configuration

(Опционально) Дополнительные события

• Scroll Depth, Outbound Links, Form Submissions — добавляйте через отдельные теги/шаблоны. Привяжите их к тем же триггерам, чтобы события отправлялись только после согласия на analytics_storage.

---

2.3 Публикация и проверка

Публикация в GTM

• Submit → Publish
• Version Name: Initial Setup – Consent + GA4
• Version Description: Default Consent denied; GA4 via All Pages + consent_update

Проверка на сайте

• Откройте сайт в инкогнито.
• Убедитесь, что баннер появляется.
• Проверьте варианты:
  • Accept all — GA4-теги активируются.
  • Reject — GA4 не использует куки; события не персонализируются.
  • Preferences — частичный выбор (например, только аналитика).
• Перезайдите: выбор должен сохраниться, баннер не мешает.

---

3) Алгоритм, если совсем коротко

1. Сначала безопасность: настроить CSP и nonce, разрешить только нужные домены.
2. Потом — баннер согласия: по умолчанию всё выключено до выбора пользователя.
3. Подключить GTM: все теги живут и управляются внутри GTM.
4. Добавить GA4 через GTM и привязать к событию consent_update.
5. Проверить все сценарии (принял / отклонил / частично) и повторный визит.

Итог: законно, прозрачно и управляемо.