Привет! Сегодня подключим счетчик Яндекс Метрики, я покажу метод, который использую для своих сайтов на Nextjs, он позволяет считывать посещения с разных роутов, это может вам пригодиться, если в свой лендинг вы решите добавить пару дополнительных страниц, лишним это уж точно не будет. Если готовы, тогда погнали!
Полезные ссылки:
Часть 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. Публикуем проект на хостинге
Создаем новый счетчик Яндекс Метрики
Если этот шаг вызывает сложности, пишите в комменты, я сниму видео, в котором подробно постараюсь рассказать, как создать счетчик.
Нас интересует не сам код, а присвоенный номер, в данном случае это 102689614. Этот номер счетчика понадобится нам далее.
Не забудьте поставить галочку в пункте «Принимать данные только с указанных адресов». Так вы избежите срабатывания счетчика с localhost во время разработки сайта.
Создаем компонент 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:
Здесь всё достаточно просто, мы инициализируем наш счетчик внутри встроенного в nextjs компонента Script, который мы импортируем, а далее подключаем наш собственный компонент Metrika.
Почему обернули всё в Suspense?
Suspense «приостанавливает» рендеринг других компонентов до завершения асинхронной операции, например, загрузки данных или ленивой загрузки компонентов. Без этого сборщик будет выдавать ошибку.
Подробнее про Suspense можно почитать в доке.
Не забудьте указать свой номер счетчика!
На этом всё, собираем проект, заливаем на хостинг и вуаля, наш счетчик начинает работать!
Подробнее про сборку и заливку на хостинг я напишу в следующих статьях.
Код данного урока доступен в репозитории GitHub по ссылке.
Не забудь подписаться на канал, а также заходи на мой блог blog.in9var.ru, а также можешь посетить мой основной сайт — in9var.ru.