Подключение счётчика Яндекс Метрики к проекту Next.js
Пример правильного подключения счётчика Яндекс Метрики к проекту Next.js (App Router). Решение основано на официальной документации Яндекс.
Создание компонента счётчика
Создаём компонент Metrika со счётчиком Яндекс Метрики:
"use client";
import { useEffect } from "react";
import { usePathname, useSearchParams } from "next/navigation";
import Script from "next/script";
const base = "https://example.ru";
export default function Metrika() {
const pathName = usePathname();
const searchParams = useSearchParams();
useEffect(() => {
const params = searchParams.toString();
const url = base + pathName + (params ? "?" + params : "");
ym(XXXXXXXX, "hit", url);
}, [pathName, searchParams]);
return (
<Script id="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, используя обратные кавычки, как показано в примере выше. После чего, к функции инициализации счётчика нужно добавить параметр defer: true. В примере выше это уже сделано.
Подключение компонента счётчика
Подготовленный компонент Metrika вставляем в корневой макет сайта, обернув его в React-компонент Suspense:
import "./globals.css";
import { Suspense } from "react";
import Metrika from "@/app/utils/metrika";
export default function RootLayout({ children }) {
return (
<html lang="ru">
<body>
{children}
<Suspense>
<Metrika />
</Suspense>
</body>
</html>
);
}Таким образом, счётчик Яндекс Метрики будет вызываться при переходе на любую страницу сайта, при изменении параметров URL и при переходе вперёд/назад в браузере.
Отслеживание достижения цели
Для отслеживания событий на сайте, при которых URL страницы не меняется, необходимо использовать функцию ym с параметром reachGoal вместо hit:
ym(XXXXXXXX, "reachGoal", "TARGET_NAME");TARGET_NAME – уникальный идентификатор цели, который необходимо задать в настройках Яндекс Метрики. Цель должна иметь тип JavaScript-событие.
С различными примерами вызова функции ym с параметром reachGoal можно ознакомиться по ссылке.
