tomasevich/README.md

## README.md

      
    Raw
  

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

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


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

Настройка

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

  
## _app.js
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>
    </>
  )
}

## analytics.js
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>
    </>
  )
}
	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>
	</>
	)
	}