Туториал о том, как добавить счётчик Яндекс.Метрика в приложение на Next.js. Это не требует установки сторонних библиотек.
Исходный код работающего проекта можно посмотреть здесь: https://github.com/mishantrop/elenapisarenko/blob/main/pages/_document.tsx
Шаг 1
Создайте файл _document.tsx внутри каталога pages. Этот файл используется для изменения общей структуры страницы (теги html, head, body и пр). Вставьте в созданный файл код счётчика, который можно получить при создании счётчика или в его настройках на сайте Яндекс.Метрики.
В данном примере используется номер счётчика 12345678. Такие данные, как и остальные опции инициализации счётчика, принято выносить в переменные окружения или переменные компонента.
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
<script
dangerouslySetInnerHTML={{
__html: `
(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();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(12345678, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
`,
}}
/>
<noscript>
<div>
<img src="https://mc.yandex.ru/watch/12345678" style={{ position:'absolute', left:'-9999px' }} alt="" />
</div>
</noscript>
</body>
</Html>
)
}
Я назвал файл этот файл _document.tsx, так как в своих проектах предпочитаю использовать TypeScript. Подробнее: https://nextjs.org/docs/advanced-features/custom-document
Готово, можно проверять.
