Создать лендинг сайт с нуля: подключить счетчик Яндекс Метрики #16

16 июня 2025

2 минуты

Привет! Сегодня подключим счетчик Яндекс Метрики, я покажу метод, который использую для своих сайтов на Nextjs, он позволяет считывать посещения с разных роутов, это может вам пригодиться, если в свой лендинг вы решите добавить пару дополнительных страниц, лишним это уж точно не будет. Если готовы, тогда погнали!

Превью | blog.in9var.ru

Полезные ссылки:

Демо–проект лендинга можно посмотретьпо ссылке

Часть 1. Подготовка и настройка проекта

Часть 2.Настройка конфигурации и установка необходимых библиотек

Часть 3.Создание CSS-переменных и верстка блока Header

Часть 4.Верстка секции Hero, создание компонента Button

Часть 5.Верстка секции About

Часть 6.Верстка секции Gallery

Часть 7.Верстка секции WhyUs

Часть 8.Верстка секции Catalogue

Часть 9.Верстка секции Map

Часть 10.Верстка секции Footer

Часть 11.Создание якорных ссылок, рефакторинг

Часть 12.Создание мобильного меню

Часть 13.Анимация секций при скролле

Часть 14.Установка метаданных

Часть 15.Настройка favicon.ico

Часть 16.Настройка счетчика Яндекс Метрики

Часть 17.Публикуем проект на хостинге

Шаблон лендинга, который мы будем делать, доступен в Figma по ссылке.
Код данного урока доступен в репозитории GitHub по ссылке.
Подписывайтесь на мой Дзен канал

Создаем новый счетчик Яндекс Метрики

Нас интересует не сам код, а присвоенный номер, в данном случае это 102689614. Этот номер счетчика понадобится нам далее.

Не забудьте поставить галочку в пункте «Принимать данные только с указанных адресов». Так вы избежите срабатывания счетчика с localhost во время разработки сайта.

Фото | blog.in9var.ru

Создаем компонент Metrika.js

Это как раз тот компонент, который отвечает за то, чтобы счетчик Метрики корректно отрабатывал при смене роута без перезагрузки страницы.

Вставляем сюда номер нашего счетчика


ym('102689614', 'hit', url);

Код компонента Metrika.js


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

Редактируем файл layout.js

Итоговый код файла layout.js:


import { Inter } from 'next/font/google';
import './globals.css';
import { Suspense } from 'react';
import Script from 'next/script';
import Metrika from './components/Metrika';

const inter = Inter({
  subsets: ['cyrillic'],
  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
  display: 'swap',
  variable: '--font-inter',
});

export const metadata = {
  title: 'Строительство уютных загородных домов: комфорт гарантирован',
  description:
    'Строим уютные загородные дома с комфортом для жизни. От проекта до сдачи. Используем качественные материалы. Создаем пространство вашей мечты',
  keywords: 'строительство, дома, загородное, коттеджи, комфорт, проекты, под ключ, современные',
};

export default function RootLayout({ children }) {
  return (
    <html lang='ru' suppressHydrationWarning>
      <head>
        <link rel='icon' type='image/png' href='/public/favicon-96x96.png' sizes='96x96' />
        <link rel='icon' type='image/svg+xml' href='/favicon.svg' />
        <link rel='shortcut icon' href='/favicon.ico' />
        <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
        <meta name='apple-mobile-web-app-title' content={'landing.in9var.ru'} />
        <link rel='manifest' href='/site.webmanifest' />
      </head>
      <body className={`${inter.variable}`}>
        <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('102689614', "init", {
                    defer: true,
                    clickmap:true,
                    trackLinks:true,
                    accurateTrackBounce:true,
              });`}
        </Script>
        <Suspense>
          <Metrika />
        </Suspense>
        {children}
      </body>
    </html>
  );
}

Здесь всё достаточно просто, мы инициализируем наш счетчик внутри встроенного в nextjs компонента Script, который мы импортируем, а далее подключаем наш собственный компонент Metrika.

Почему обернули всё в Suspense?

Suspense «приостанавливает» рендеринг других компонентов до завершения асинхронной операции, например, загрузки данных или ленивой загрузки компонентов. Без этого сборщик будет выдавать ошибку.

Подробнее про Suspense можно почитать в доке.

Не забудьте указать свой номер счетчика!

На этом всё, собираем проект, заливаем на хостинг и вуаля, наш счетчик начинает работать!