GolOps

Подключение Google Analytics для отслеживания посещений страниц и поведения пользователей

GolOps уже поддерживает Google Analytics. После настройки gtag-скрипт будет автоматически добавляться на каждую страницу.

Шаги настройки

Создайте ресурс Google Analytics

Перейдите в Google Analytics и создайте новый ресурс. После этого вы получите Measurement ID в формате G-XXXXXXXXXX.

Задайте переменные окружения

Добавьте Measurement ID в .env.local:

VITE_GA_MEASUREMENT_ID=G-XXXXXXXXXX

Деплой

Настройка завершена. Когда существует VITE_GA_MEASUREMENT_ID, аналитический скрипт загружается автоматически, без изменения кода.

Как это работает

Интеграция находится в src/routes/__root.tsx. Если переменная окружения задана, в <head> добавляются два script-тега:

загрузчик Google gtag.js
инициализирующий скрипт с вашим Measurement ID

{
  import.meta.env.VITE_GA_MEASUREMENT_ID && (
    <>
      <script
        async
        src={`https://www.googletagmanager.com/gtag/js?id=${import.meta.env.VITE_GA_MEASUREMENT_ID}`}
      />
      <script
        dangerouslySetInnerHTML={{
          __html: `window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','${import.meta.env.VITE_GA_MEASUREMENT_ID}');`,
        }}
      />
    </>
  );
}

Если VITE_GA_MEASUREMENT_ID не задан, никакие аналитические скрипты не загружаются, то есть стоимость равна нулю.

Проверка

После деплоя откройте сайт и проверьте в Google Analytics Realtime-отчет, чтобы убедиться, что данные приходят.

Также можно открыть инструменты разработчика браузера → вкладку Network и проверить запросы к googletagmanager.com.