Fix ya metrika hopefully

app/components/WithYandexMetrika.js

@@ -0,0 +1,39 @@
+import Router from 'next/router'
+import React, { useCallback, useEffect } from 'react'
+import ym, { YMInitializer } from 'react-yandex-metrika'
+
+const enabled =
+  process.env.NODE_ENV === 'production' &&
+  process.env.YA_METRIKA_ID
+
+const WithYandexMetrika = (props) => {
+  const { children } = props
+
+  const hit = useCallback((url) => {
+    if (enabled) {
+      ym('hit', url)
+    } else {
+      console.log('%c[YandexMetrika](HIT)', 'color: orange', url)
+    }
+  }, [])
+
+  useEffect(() => {
+    hit(window.location.pathname + window.location.search)
+    Router.events.on('routeChangeComplete', hit)
+  }, [])
+
+  return (
+    <>
+      {enabled && (
+        <YMInitializer
+          accounts={[Number(process.env.YA_METRIKA_ID)]}
+          options={{ webvisor: true, defer: true }}
+          version='2'
+        />
+      )}
+      {children}
+    </>
+  )
+}
+
+export default WithYandexMetrika

app/next.config.js

@@ -1,4 +1,5 @@
 const withPlugins = require('next-compose-plugins')
+
 const { i18n } = require('./next-i18next.config')
 
 /** @type {import('next').NextConfig} */

app/package.json

@@ -14,10 +14,10 @@
     "next": "latest",
     "next-compose-plugins": "^2.2.1",
     "next-i18next": "^11.0.0",
-    "next-ym": "^2.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-moment": "^1.1.1",
+    "react-yandex-metrika": "^2.6.0",
     "reset-css": "^5.0.1",
     "sass": "^1.49.9",
     "shared-stuff": "file:../shared-stuff",

app/pages/_app.js

@@ -1,12 +1,11 @@
 import { CssBaseline } from '@mui/material'
 import { createTheme, ThemeProvider } from '@mui/material/styles'
 import { appWithTranslation } from 'next-i18next'
-import withYM from 'next-ym'
-import Router from 'next/router'
 
 import 'reset-css'
 import '../styles/global.scss'
 import Layout from '../components/layout'
+import WithYandexMetrika from '../components/WithYandexMetrika'
 
 function App ({ Component, pageProps }) {
   const theme = createTheme({
@@ -16,13 +15,15 @@ function App ({ Component, pageProps }) {
   })
 
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
-    </ThemeProvider>
+    <WithYandexMetrika>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </ThemeProvider>
+    </WithYandexMetrika>
   )
 }
 
-export default withYM(process.env.YA_METRIKA_ID, Router)(appWithTranslation(App))
+export default appWithTranslation(App)