Урок 04

Яндекс.Метрика: установка счётчика

Что такое Метрика

Яндекс.Метрика — бесплатная система веб-аналитики.

Что даёт:

Трафик и источники.
Поведение — клики, скроллы, время.
Вебвизор — запись сессий.
Цели и конверсии.
Карты скроллинга.
Аудитория.

Правило: для рунета — обязательна.

Ссылка

metrika.yandex.ru

Создание счётчика

Шаги:

Войти с Яндекс.Аккаунтом.
Нажать «Добавить счётчик».
Ввести имя (для себя).
Ввести домен.
Настроить параметры.
Сохранить.

Что получишь: номер счётчика (8 цифр).

Настройки счётчика

Что важно:

Часовой пояс.
Валюта.
Доступ — кто видит.
Вебвизор — включить.
Карта скроллинга — включить.
Аналитика форм — включить.
Электронная коммерция — если магазин.
Асинхронный код — включить.
Отслеживание хеша — если SPA.
Запрет индексировать — включить.

Базовый код

Что даёт Яндекс:

<script type="text/javascript">
    (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
    m[i].l=1*new Date();
    for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
    k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
    (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

    ym(XXXXXXXX, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
    });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/XXXXXXXX" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

Что здесь:

XXXXXXXX — номер счётчика.
clickmap — карта кликов.
trackLinks — отслеживание внешних ссылок.
accurateTrackBounce — точный отказ.
webvisor — запись.
noscript — без JS.

Установка в HTML

Куда: перед </head> или после <body>.

Правило: перед </body> — рекомендуется.

Установка в Laravel

Blade-шаблон:

{{-- resources/views/layouts/app.blade.php --}}

@if(config('services.yandex.metrika_id'))
    <script>
        (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
        m[i].l=1*new Date();
        for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
        k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
        (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

        ym({{ config('services.yandex.metrika_id') }}, "init", {
            clickmap:true,
            trackLinks:true,
            accurateTrackBounce:true,
            webvisor:true
        });
    </script>
    <noscript>
        <div><img src="https://mc.yandex.ru/watch/{{ config('services.yandex.metrika_id') }}" style="position:absolute; left:-9999px;" alt="" /></div>
    </noscript>
@endif

.env:

YANDEX_METRIKA_ID=12345678

config/services.php:

'yandex' => [
    'metrika_id' => env('YANDEX_METRIKA_ID'),
],

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

Компонент:

'use client';

import Script from 'next/script';

const YM_ID = process.env.NEXT_PUBLIC_YANDEX_METRIKA_ID;

export default function Metrika() {
    if (!YM_ID) return null;

    return (
        <Script id="yandex-metrika" strategy="afterInteractive">
            {`
                (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
                m[i].l=1*new Date();
                for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
                k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
                (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

                ym(${YM_ID}, "init", {
                    clickmap:true,
                    trackLinks:true,
                    accurateTrackBounce:true,
                    webvisor:true
                });
            `}
        </Script>
    );
}

В layout.tsx:

export default function RootLayout({ children }) {
    return (
        <html lang="ru">
            <body>
                {children}
                <Metrika />
            </body>
        </html>
    );
}

Проверка

Как проверить:

Открыть сайт.
Открыть Метрику.
Смотреть «Сводка» → «Посетители онлайн».
Должен быть ты.

Если нет:

Проверить номер счётчика.
Проверить блокировщики.
Проверить консоль DevTools.
Проверить через визит.

Правило: приходит в течение 15 минут.

Отслеживание хеш-навигации

Для SPA (React, Next, Vue):

ym(XXXXXX, 'init', {
    clickmap: true,
    trackLinks: true,
    accurateTrackBounce: true,
    webvisor: true,
    trackHash: true,
});

Что даёт: работает переход по хеш-ссылкам.

Virtual pageview

Для SPA с history API:

ym(XXXXXX, 'hit', window.location.href, {
    title: document.title,
    referrer: document.referrer,
});

Что даёт: правильно считает переходы без перезагрузки.

Цели

Что важно: настроить до запуска.

Что можно отслеживать:

Посещение страницы.
Клик по кнопке.
Отправка формы.
Событие JavaScript.
Внешняя ссылка.
Скачивание файла.

Правило: без целей — нет конверсий.

Доступ

Кто видит:

Владелец.
Гости — с ограничениями.
Публичный доступ.

Правило: SEO-агентству — свой доступ.

Несколько сайтов

Что делать:

Отдельные счётчики.
Или один с фильтрами.

Правило: отдельные — проще.

Практика

1. Создайте счётчик.

2. Настройте: вебвизор, карту, аналитику форм.

3. Установите код в Laravel или Next.js.

4. Проверьте «Посетители онлайн».

5. Настройте 3 цели:

Форма.
Кнопка.
Спасибо-страница.

6. Дождитесь данных 24 часа.

7. Посмотрите первый отчёт.

Частые ошибки

1. Не установлен:

Нет данных

Решение: установить.

2. Неверный номер:

Данные не приходят

Решение: проверить.

3. Блокировщик:

AdBlock режет

Решение: проверить в incognito.

4. Не настроен вебвизор:

Нет записи

Решение: включить.

5. Без целей:

Нет конверсий

Решение: настроить.

6. Для SPA без trackHash:

1 сессия на всё

Решение: включить.

7. Публичный доступ:

Конкуренты видят

Решение: ограничить.

8. Не проверять:

Месяцы без данных

Решение: проверить сразу.

Итог

Метрика — обязательна для рунета.
Номер счётчика — 8 цифр.
Установка: Laravel / Next.js.
Вебвизор, карта, формы — включить.
trackHash для SPA.
hit для virtual pageview.
Цели — обязательны.
Проверка — посетители онлайн.
Доступ — правильный.
Регулярность — смотреть отчёты.

Дальше — Метрика: цели, конверсии, поведенческие отчёты.