Подключение счётчика Яндекс Метрики к проекту Next.js

25 ноября 2023 г.

Пример правильного подключения счётчика Яндекс Метрики к проекту Next.js (App Router). Решение основано на официальной документации Яндекс.

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

Создаём компонент Metrika со счётчиком Яндекс Метрики:

app/components/metrika.js
'use client';
 
import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import Script from 'next/script';
 
export function Metrika() {
  const pathName = usePathname();
  const searchParams = useSearchParams();
 
  useEffect(() => {
    const url = pathName + '?' + searchParams.toString();
    ym(XXXXXXXX, 'hit', url);
  }, [pathName, searchParams]);
 
  return (
    <Script id="yandex-metrika">
      {`
        (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", {
          defer: true,
          clickmap:true,
          trackLinks:true,
          accurateTrackBounce:true
        });    
      `}
    </Script>
  );
}

Код счётчика может различаться в зависимости от версии и параметров настройки Яндекс Метрики. Поэтому его необходимо скопировать из настроек Яндекс Метрики сайта и вставить в компонент Script, используя обратные кавычки, как показано в примере выше. После чего, к функции инициализации счётчика ym(..., "init", ...) нужно добавить параметр defer: true. В примере выше это уже сделано.

Подключение компонента счётчика

Подготовленный компонент Metrika вставляем в корневой макет сайта, обернув его в React-компонент Suspense:

app/layout.js
import { Suspense } from 'react';
import { Metrika } from '@/app/components/metrika';
 
export default function RootLayout({ children }) {
  return (
    <html lang="ru">
      <body>
        <main>{children}</main>
 
        <Suspense>
          <Metrika />
        </Suspense>
      </body>
    </html>
  );
}

Таким образом, счётчик Яндекс Метрики будет вызываться при переходе на любую страницу сайта, при изменении параметров URL и при переходе вперёд/назад в браузере.

Отслеживание достижения цели

Для отслеживания событий на сайте, при которых URL страницы не меняется, необходимо использовать функцию ym с параметром reachGoal вместо hit:

javascript
ym(XXXXXXXX, 'reachGoal', 'TARGET_NAME');

TARGET_NAME – уникальный идентификатор цели, который необходимо задать в настройках Яндекс Метрики. Цель должна иметь тип JavaScript-событие.

С различными примерами вызова функции ym с параметром reachGoal можно ознакомиться по ссылке.

Другие статьи