Для тех, кто только начинает разбираться в NextJS и не понял как это работает, я приложил решение
Analytics и ложим в папку ~/components/analytics.js~/pages/_app.js в тело страницы (ВАЖНО, не в <Head></Head>)Я использую переменные окружения, для удобства 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> | |
| </> | |
| ) | |
| } |