Все статьи
Установка

Руководство по установке: WordPress, Next.js, Tilda и другое

4 мин чтения
Руководство по установке: WordPress, Next.js, Tilda и другое

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

Добавьте скрипт отслеживания WebMetrics на ваш веб-сайт менее чем за минуту. Вставьте следующий код перед закрывающим тегом </head> на каждой странице, которую вы хотите отслеживать:

<script defer src="https://app.web-metrics.ru/script.js"
        data-website-id="YOUR_WEBSITE_ID"></script>

Замените YOUR_WEBSITE_ID на идентификатор веб-сайта из панели управления WebMetrics. Вы можете найти его в разделе Параметры → Веб-сайты → Код отслеживания.

Скрипт занимает всего 1,5 КБ — он загружается асинхронно с помощью defer и не оказывает никакого влияния на производительность страницы. Никакие файлы cookie не устанавливаются и не требуется баннер согласия.

WordPress

WebMetrics предоставляет официальный плагин WordPress для самой простой установки. Вы также можете выполнить интеграцию вручную, если предпочитаете полный контроль.

Вариант 1: официальный плагин (рекомендуется)

  1. Загрузите последний выпуск с GitHub (eurometrics-1.0.0.zip).
  2. В админ-панели WordPress перейдите в Плагины → Добавить новый → Загрузить плагин. Выберите загруженный ZIP-файл и нажмите Установить сейчас, а затем Активировать.
  3. Перейдите в Параметры → WebMetrics, вставьте ваш идентификатор веб-сайта и сохраните. Готово — отслеживание теперь активно.

Конфигурация

  1. Перейдите в Параметры → WebMetrics.
  2. Поле URL WebMetrics предварительно заполнено значением https://app.web-metrics.ru. Измените это только если вы используете экземпляр White Label.
  3. Введите ваш идентификатор веб-сайта — найдите его в панели управления WebMetrics в разделе Параметры → Веб-сайты → Код отслеживания (формат UUID).
  4. Дополнительно включите Исключить администраторов, чтобы предотвратить отслеживание ваших собственных посещений при входе в качестве администратора.
  5. Нажмите Сохранить изменения. Индикатор статуса становится зеленым при активации отслеживания.

Справочник параметров плагина

Параметр Описание По умолчанию
URL WebMetrics Конечная точка вашего экземпляра аналитики https://app.web-metrics.ru
Идентификатор веб-сайта Уникальный идентификатор сайта (UUID) —
Исключить администраторов Пропустить отслеживание для вошедших администраторов Выкл

Вариант 2: ручная установка

Если вы предпочитаете не использовать плагин, добавьте код отслеживания вручную через файл functions.php вашей темы:

function add_eurometrics_tracking() {
    $website_id = 'YOUR_WEBSITE_ID';
    $host = 'https://app.web-metrics.ru';
    echo '<script defer src="' . esc_url($host . '/script.js') . '" data-website-id="' . esc_attr($website_id) . '"></script>';
}
add_action('wp_head', 'add_eurometrics_tracking');

Альтернативно используйте плагин, такой как Insert Headers and Footers, чтобы вставить тег скрипта в раздел <head> без редактирования файлов темы.

Вариант 3: плагин фрагментов кода

Если вы используете плагин управления кодом, такой как WPCode, Code Snippets или аналогичный:

  1. Откройте параметры плагина или менеджер фрагментов.
  2. Добавьте новый фрагмент в раздел Заголовок сайта.
  3. Вставьте скрипт отслеживания и замените YOUR_WEBSITE_ID на ваш фактический идентификатор веб-сайта.
  4. Сохраните и активируйте фрагмент.

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

  • Проверьте внедрение скрипта: откройте ваш сайт в окне режима инкогнито, щелкните правой кнопкой мыши → Просмотр исходного кода и найдите eurometrics.
  • Проверьте сетевые запросы: откройте инструменты разработчика (F12) → вкладка сеть, перезагрузите страницу и отфильтруйте по script.js.
  • Проверьте вашу панель управления: войдите в WebMetrics, перейдите на ваш веб-сайт — просмотр вашей страницы должен появиться в течение нескольких секунд.

Устранение неполадок

Проблема Решение
Скрипт не появляется в исходном коде Плагин не активирован или идентификатор веб-сайта пуст. Проверьте Параметры → WebMetrics.
Скрипт загружается, но в панели управления нет данных Неправильный идентификатор веб-сайта. Сравните идентификатор в параметрах плагина с вашей панелью управления WebMetrics.
Скрипт блокирован браузером Активен блокировщик рекламы или расширение приватности. Отключите для вашего домена.
404 на script.js Неправильный URL WebMetrics. Проверьте, что он указывает на работающий экземпляр.
Посещения администратора по-прежнему отслеживаются Включите флажок Исключить администраторов, затем очистите любой кэш страницы.
Скрипт загружается дважды Плагин и ручной код одновременно активны. Используйте только один метод.

Продвинуто: WordPress Multisite

Плагин WebMetrics работает при установке WordPress Multisite. Активируйте плагин в сети, затем посетите Параметры → WebMetrics на каждом под-сайте и введите соответствующий идентификатор веб-сайта.

Продвинуто: совместимость с кэшированием

Скрипт отслеживания совместим со всеми основными плагинами кэширования WordPress: WP Super Cache, W3 Total Cache, LiteSpeed Cache (специальная конфигурация не требуется), WP Rocket (убедитесь, что скрипт не в списке «Задержка выполнения JavaScript»), и Cloudflare (исключите script.js из Rocket Loader).

Продвинуто: WooCommerce

WebMetrics работает с WooCommerce из коробки. Просмотры страниц для страниц товаров, страниц категорий, корзины, оформления заказа и подтверждения заказа отслеживаются автоматически.

Next.js

Используйте встроенный компонент next/script для оптимальной загрузки. Добавьте его в корневой макет, чтобы он загружался на каждой странице:

// app/layout.tsx
import Script from "next/script"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.web-metrics.ru/script.js"
          data-website-id="YOUR_WEBSITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Стратегия afterInteractive гарантирует, что скрипт загружается после того, как страница становится интерактивной — аналогично defer в простом HTML.

Используете Pages Router? Если вы используете Pages Router вместо App Router, добавьте компонент Script в _app.tsx вместо layout.tsx.

Tilda

Tilda позволяет добавить пользовательский HTML в <head> вашего сайта:

  1. Откройте ваш проект Tilda и перейдите в Параметры сайта.
  2. Нажмите на вкладку Ещё, затем найдите HTML код для секции <head>.
  3. Вставьте скрипт отслеживания.
  4. Нажмите Сохранить и Опубликовать ваш сайт. Данные начнут появляться в вашей панели управления через несколько минут.

Общие рекомендации

Политика безопасности контента (CSP)

Если ваш сайт использует политику безопасности контента, добавьте следующие директивы:

Content-Security-Policy:
  script-src 'self' https://app.web-metrics.ru;
  connect-src 'self' https://app.web-metrics.ru;

Одностраничные приложения

WebMetrics автоматически обнаруживает навигацию на стороне клиента в SPA, созданных с помощью React, Vue, Svelte и других фреймворков. Скрипт прослушивает изменения pushState и replaceState — дополнительная конфигурация не требуется.

Отслеживание пользовательских событий

Помимо просмотров страниц, вы можете отслеживать пользовательские события, такие как клики по кнопкам, отправка форм или покупки:

// Track a custom event
umami.track("signup_click", {
  plan: "pro",
  source: "pricing_page",
})

События появляются в вашей панели управления в разделе События и могут быть использованы для построения воронок и целей конверсии.


Нужна помощь? Свяжитесь с нами по адресу support@web-metrics.ru.

Готовы начать?

Создайте бесплатный аккаунт и начните отслеживать посетителей за несколько минут.

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