Skip to content

Instantly share code, notes, and snippets.

@tomasevich
Created December 17, 2021 20:03
Show Gist options
  • Save tomasevich/bdee5014ac5e648902be9ab6396ba6f0 to your computer and use it in GitHub Desktop.
Save tomasevich/bdee5014ac5e648902be9ab6396ba6f0 to your computer and use it in GitHub Desktop.

Как установить счетчики Yandex.Metrik и Google Analytics в NextJS

Для тех, кто только начинает разбираться в NextJS и не понял как это работает, я приложил решение

Как установить

  1. Берем компонент Analytics и ложим в папку ~/components/analytics.js
  2. Подключаем в обертке ~/pages/_app.js в тело страницы (ВАЖНО, не в <Head></Head>)
  3. Проверяем работу

Настройка

Я использую переменные окружения, для удобства NEXT_PUBLIC_ANALYTICS_GOOGE_G4 и NEXT_PUBLIC_ANALYTICS_YANDEX_TAG Есть и другие подходы, с установкой готовых решений, но было бы так все просто... исследуйте сами!

import Head from 'next/head'
import Analytics from '../components/analytics'
import Footer from '../components/footer'
import Header from '../components/header'
export default function App({ Component, pageProps }) {
return (
<>
<Head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</Head>
<Analytics />
<header>
<Header />
</header>
<main>
<Component {...pageProps} />
</main>
<footer>
<Footer />
</footer>
</>
)
}
import Script from 'next/Script'
export default function Analytics() {
return (
<>
<Script
strategy="beforeInteractive"
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_ANALYTICS_GOOGE_G4}`}
></Script>
<Script>
{`window.dataLayer = window.dataLayer || []; function gtag()
{dataLayer.push(arguments)}
gtag('js', new Date()); gtag('config', '${process.env.NEXT_PUBLIC_ANALYTICS_GOOGE_G4}');`}
</Script>
<Script>
{`(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(${+process.env.NEXT_PUBLIC_ANALYTICS_YANDEX_TAG}, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});`}
</Script>
</>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment