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

24 июн. 2023 г.

4 минуты792 слова

Как установить метрику в приложение на Next.js? Нужно код счетчика вставить в шаблон таким образом, чтобы он присутствовал на всех страницах сайта.

Для этого я буду использовать код счётчика и компонент, который будет отслеживать изменения в URL-адресе и фиксировать просмотры.

Решение основано на официальной документации Яндекса.

Код счетчика

Для подключения Яндекс Метрики к Next.js используем компонент <Script />.

Код счетчика Яндекс Метрики для Next.js

<Script id="metrika-counter" 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(XXXXXXXX, "init", {
          defer: true,
          clickmap:true,
          trackLinks:true,
          accurateTrackBounce:true,
          webvisor:true
    });`
  }
</Script>

Вместо XXXXXXXX вставляем свой id счетчика.

Не забудьте указать defer: true, это отключит автоматическую отправку данных о просмотрах.

Согласно официальной документации яндекса по установке и настройке счетчика для SPA-сайтов, фиксировать показы страниц необходимо с помощью функции hit, ее нужно вызывать при каждом изменении страницы.

Используем hit внутри компонента YandexMetrika(). Показы будут фиксироваться при изменении URL-адреса или параметров в нем.

Код компонента YandexMetrika

components\YandexMetrika\YandexMetrika.jsx

'use client'
 
import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
 
export default function YandexMetrika() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
 
  useEffect(() => {
    const url = `${pathname}?${searchParams}`
    ym(XXXXXXXX, 'hit', url);
 
  }, [pathname, searchParams])
 
  return null
}

Вместо XXXXXXXX вставляем свой id счетчика.

Код счётчика и компонент готовы. Теперь покажу пример подключения для более старого Next.js: Pages Router и нового App Router.

Используя Next.js: App Router

В случае с использованием App Router, вставляем счетчик яндекс метрики в файл layout.tsx перед закрывающим тегом body.

app\layout.tsx

import { DarkModeProvider } from '@/context/darkModeContext';
import './globals.css';
import { Header } from '@/components/Header/Header';
import { Suspense } from 'react';
import Footer from '@/components/Footer/Footer';
import NextTopLoader from 'nextjs-toploader';
import YandexMetrika from '@/components/YandexMetrika/YandexMetrika';
import Script from 'next/script';
 
export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <DarkModeProvider>
      <html lang="ru">
        <body>
          <Script id="metrika-counter" 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(XXXXXXXX, "init", {
                    defer: true,
                    clickmap:true,
                    trackLinks:true,
                    accurateTrackBounce:true,
                    webvisor:true
              });`
            }
          </Script>
          <Suspense fallback={<></>}>
            <YandexMetrika />
          </Suspense>
          <NextTopLoader height={4} />
          <Header />
          <main>{children}</main>
          <Footer />
        </body>
      </html>
    </DarkModeProvider>
  );
}

Туда же импортируем компонент <YandexMetrika />, который будет отправлять данные в метрику при изменении URL-адреса или параметров в нем и добавляем в наш Layout. Для Next.js 14 оборачиваем компонент в <Suspense>, чтобы избежать prerendering Error.

Для чистоты кода, можете вынести <Script /> с счетчиком в отдельный компонент или оставить как в примере.

Используя Next.js: Pages Router

В случае с использованием Pages Router, я вставляю счетчик яндекс метрики в _document.tsx.

src\pages\_document.tsx

import {Html, Head, Main, NextScript} from 'next/document'
import Script from 'next/script';
 
export default function Document() {
  return (
    <Html lang="ru">
      <Head/>
      <body>
      <Main/>
      <NextScript/>
      <Script id="metrika-counter" 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(XXXXXXXX, "init", {
                defer: true,
                clickmap:true,
                trackLinks:true,
                accurateTrackBounce:true,
                webvisor:true
          });`
        }
      </Script>
      </body>
    </Html>
  )
}

Компонент <YandexMetrika /> будет находиться внутри общего макета <Layout />, в проекте он у меня один, поэтому я создал Custom App (файл _app.tsx) и обернул его этим макетом.

src\components\Layout\Layout.tsx

import { ReactNode, useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import Header from '@/components/Header/Header';
import Footer from '../Footer/Footer';
import ScrollProgressBar from '@/components/ScrollProgressBar/ScrollProgressBar';
import { YandexMetrika } from '../YandexMetrika/YandexMetrika';
import SEO from '../SEO/SEO';
 
const Cursor = dynamic(() => import('../Cursor/Cursor'), { ssr: false });
const ScrollTopButton = dynamic(() => import('../../components/ScrollTopButton/ScrollTopButton'), { ssr: false });
 
type LayoutProps = {
  children?: ReactNode
}
 
export default function Layout({ children }: LayoutProps) {
 
return (
 
<>
  <SEO />
  <YandexMetrika />
  <Cursor />
  <Header />
  <main className="main-content-pt">{children}</main>
  <Footer />
  <ScrollTopButton />
  <ScrollProgressBar />
</>
); }

src\pages\_app.tsx

import '@/styles/utils/normalize.css'
import '@/styles/_variables.scss'
import '@/styles/globals.scss'
import type {AppProps} from 'next/app'
import { Raleway, Roboto } from "next/font/google";
import Layout from "@/components/Layout/Layout";
import {DarkModeProvider} from "@/context/darkModeContext";
import { IconContext } from 'react-icons';
import { useEffect } from 'react';
import { useRouter } from 'next/router';
// @ts-ignore
import NProgress from 'nprogress';
import "nprogress/nprogress.css";
import SEO from "@/components/SEO/SEO";
// ...other code
 
export default function App({Component, pageProps}: AppProps) {
// ...other code
 
return (
 
<>
  <style jsx global>{`
  html {
  font-family: ${roboto.style.fontFamily};
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: ${raleway.style.fontFamily};
    margin-bottom: 0.5em;
  }
  `}</style>
 
  <DarkModeProvider>
    <IconContext.Provider value={{ color: 'var(--icons-color)' }}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ IconContext.Provider>
  </DarkModeProvider>
</>
)
}

Подробнее про единый Layout и Custom App написано в официальной документации: Pages and Layouts

Официальная документация Яндекса по установке и настройке счетчика для SPA-сайтов