Как добавить Google Analytics на сайт через AI-агента: header vs footer, GA4, Eleventy (2026) скачать в хорошем качестве

Как добавить Google Analytics на сайт через AI-агента: header vs footer, GA4, Eleventy (2026)

В этом видео подключаю Google Analytics 4 к сайту на Eleventy, задеплоенному на Cloudflare Pages, с помощью браузерного агента Claude (Haiku) прямо из PyCharm. Разбираем реальную работу AI-агента без купюр: куда ставить код аналитики — в header или footer, почему async-скрипт GA4 не блокирует загрузку страницы, и как правильно настроить счётчик (часовой пояс, валюта, категория сайта, цели бизнеса). Интеграция через base.njk — единственный layout для всех страниц — и финальный commit + push в GitHub. ── ЗАПУСК ЗАДАЧИ ── 0:00 Предлагаю создать Google Analytics для сайта. Рассказываю о том, что мы создали сайт через агента внутри PyCharm и установили браузерное расширение в Google Chrome. Сейчас попытаюсь установить Google Метрику. 0:22 Копирую команду и вставляю её в браузерного агента Haiku, указываю доменное имя, для которого создаю. 1:13 Браузерный агент говорит, что не может создавать аккаунты по соображениям безопасности. Объясняю, что аккаунт уже создан, мне нужен только новый код Google Analytics для моего сайта. 1:51 Браузерный агент сделал скриншот. Проверяю, где он находится, открываю аналитику. ── ОТЛАДКА АГЕНТА ── 2:46 Выясняю, что агент зашёл не в тот сайт. Даю точный адрес, прошу создать метку именно для моего сайта. 3:21 Отправляю задание браузерному агенту, а сам иду в терминал с PyCharm. Спрашиваю, где лучше интегрировать Google Analytics на сайт. 3:50 Объясняю правильный ответ — интегрировать в footer с использованием Eleventy. Смотрю, насколько агент даст правильный ответ. Анализирую структуру base.njk, объясняю, почему это единственный layout, который используется на всех страницах. 4:36 Агент рекомендует поставить в head после мета-тега. Я предпочту footer и обсужу это с ним. ── HEADER VS FOOTER ── 5:00 Рассказываю о проблеме: когда Analytics в header, это плохо влияет на загрузку сайта, поэтому профессионалы размещают код в footer. 5:30 Агент всё ещё думает, я жду. Браузерный агент что-то определяет и открывает аналитику. 6:40 Вижу, что агент зашёл не в тот сайт, проверяю, в какой сайт и в какую метрику он зашёл. 7:00 Объясняю честно, почему совет про footer устарел. Современный тег Google Analytics использует атрибут асинхронный, поэтому скрипт загружается параллельно без блокировки рендеринга страницы. Google рекомендует head, но есть доля правды в совете про footer — браузер выполняет DNS Lookup и соединение к Google Tagmanager, что создаёт небольшую нагрузку на сеть. Рекомендую поставить перед body как другой JS. 8:05 Решаю поставить в header. Агент копается и пытается разобраться. ── НАСТРОЙКА GA4 ── 9:06 Выбираю доллар и США, агент ничего не выбрал, говорю, что нужно за ним следить. 9:11 Агент просто натыкал то, что было автоматически установлено. Объясняю про часовой пояс — его нельзя менять после создания, он глубоко забивается в систему. 10:05 Нужен measurement ID из Google Analytics. Говорю агенту создавать с G и иксами, позже дам код. 10:32 Смотрю, что создаёт агент. Base NJK изменён. 11:07 Вижу, что агент просто медленно действует, но автономно. Останавливаю и выбираю категорию сайта сам. 12:09 Читаю список категорий. Выбираю правительство, потому что это связано с правом. 13:02 Натыкаю United States, доллар, часовой пояс Mountain Time. 14:09 Выбираю цели бизнеса (генерация лидов, стимулирование продаж, анализ веб-трафика). Выбираю платформу web. 15:03 Читаю, что нужно настроить сбор данных, чтобы начать отслеживать посещения. Ищу счётчик. ── ИНТЕГРАЦИЯ И ДЕПЛОЙ ── 17:04 Иду в web, указываю мой сайт, создаю и продолжаю. 17:31 Копирую код из Google Analytics, проверяю, соответствует ли он тому, что предложил браузерный агент и что рекомендует Google. Заменяю идентификатор. 18:01 Прошу у агента текст комита. 18:27 Проверяю файл. Код добавлен, аргумент вставлен. Стираю лишние строки. 19:06 Выбираю файл, делаю commit и push. Теперь Google Analytics собирает данные со всех страниц сайта. Поздравляю с интеграцией Google Analytics на сайт. ── ПОЛЕЗНЫЕ ССЫЛКИ ── ▶ Claude в Chrome:    • Как установить Claude в Google Chrome и ав...   ▶ Haiku + Claude Code, юр. документы:    • Stripe + Claude Code: Privacy Policy и юри...   ▶ Claude Code пишет сайт сам:    • Создаём сайт с нуля через Claude Code: Clo...   ▶ Деплой Cloudflare Pages + GitHub:    • Деплой сайта на Cloudflare Pages + GitHub ...   ▶ Плейлист — Создание сайта с нуля:    • ВайбКодинг = Создание сайта с нуля: домен,...   Google Analytics, GA4, вайб-кодинг, Claude AI, браузерный агент, Eleventy, Cloudflare Pages, PyCharm, интеграция аналитики, Google Analytics 4 установка