feat: add metrika

xi-effect · Jul 14, 2024 · f37ca3e · f37ca3e
1 parent 3deea44
commit f37ca3e
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 169 deletions.
diff --git a/apps/xi.front/app/layout.tsx b/apps/xi.front/app/layout.tsx
@@ -2,9 +2,10 @@ import '@xipkg/tailwind/index.css';
 
 import { Metadata } from 'next';
 import { Inter } from 'next/font/google';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, Suspense } from 'react';
 import Script from 'next/script';
 import { Providers } from './providers';
+import YandexMetrika from './metrika';
 
 const inter = Inter({
   weight: ['400', '500', '600', '700'],
@@ -45,12 +46,34 @@ export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning className={`${inter.variable} text-[16px]`}>
       <body className="overflow-hidden bg-gray-0">
-        <Script
-          async
-          defer
-          data-website-id="484fa2fe-898c-4ffa-8bbb-e0a2afe4e018"
-          src="https://analytics.xieffect.ru/umami.js"
-        />
+        {process.env.NODE_ENV === 'production' &&
+          <>
+            <Script id="metrika-counter" strategy="afterInteractive">
+              {`(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();
+              for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
+              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("97825173", "init", {
+                    defer: true,
+                    clickmap:true,
+                    trackLinks:true,
+                    accurateTrackBounce:true,
+                    webvisor:true
+              });`}
+            </Script>
+            <Suspense>
+              <YandexMetrika />
+            </Suspense>
+            <Script
+              async
+              defer
+              data-website-id="484fa2fe-898c-4ffa-8bbb-e0a2afe4e018"
+              src="https://analytics.xieffect.ru/umami.js"
+            />
+          </>
+        }
         <Providers>
           <div className="flex flex-row w-full min-h-screen">{children}</div>
         </Providers>

diff --git a/apps/xi.front/app/metrika.ts b/apps/xi.front/app/metrika.ts
@@ -0,0 +1,19 @@
+/* eslint-disable no-undef */
+
+'use client';
+
+import { useEffect } from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
+
+export default function YandexMetrika() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    const url = `${pathname}?${searchParams}`;
+    // @ts-ignore
+    ym('97825173', 'hit', url);
+  }, [pathname, searchParams]);
+
+  return null;
+}
diff --git a/apps/xi.front/app/providers.tsx b/apps/xi.front/app/providers.tsx
@@ -2,33 +2,8 @@
 
 import { ThemeProvider } from 'next-themes';
 import { useMainSt } from 'pkg.stores';
-// import { redirect, useParams, usePathname, useSearchParams } from 'next/navigation';
 import { ReactNode } from 'react';
 import { Toaster } from 'sonner';
-// import { useMainSt } from 'pkg.stores';
-// import Load from './load';
-
-// const mapsOfPathsWithoutRedirect = ['/signin', '/signup', '/reset-password'];
-
-// const welcomePagesPaths = [
-//   '/',
-//   '/signin',
-//   '/welcome/user-info',
-//   '/welcome/community',
-//   '/welcome/community-create',
-//   '/welcome/community-invite',
-// ];
-
-// const welcomePagesPathsDict = {
-//   created: '/welcome/user-info',
-//   'community-choice': '/welcome/community',
-//   'community-create': '/welcome/community-create',
-//   'community-invite': '/welcome/community-invite',
-// };
-
-// type AuthProviderT = {
-//   children: ReactNode;
-// };
 
 const SocketProvider = ({ children }: { children: ReactNode }) => {
   const socket = useMainSt((state) => state.socket);
@@ -57,143 +32,6 @@ const SocketProvider = ({ children }: { children: ReactNode }) => {
   return children;
 };
 
-// const AuthProvider = ({ children }: AuthProviderT) => {
-//   const pathname = usePathname();
-//   const searchParams = useSearchParams();
-
-//   const { 'community-id': comIdParams } = useParams<{ 'community-id': string }>();
-
-//   const isLogin = useMainSt((state) => state.isLogin);
-//   const onboardingStage = useMainSt((state) => state.user.onboardingStage);
-//   const communityId = useMainSt((state) => state.communityMeta.id);
-//   const getUser = useMainSt((state) => state.getUser);
-//   const socket = useMainSt((state) => state.socket);
-//   const updateCommunityMeta = useMainSt((state) => state.updateCommunityMeta);
-//   const setIsLogin = useMainSt((state) => state.setIsLogin);
-
-//   useEffect(() => {
-//     getUser();
-//   }, []);
-
-//   useEffect(() => {
-//     if (socket !== null) {
-//       socket.on('connect', () => {
-//         if (comIdParams) {
-//           socket.emit(
-//             'retrieve-community',
-//             {
-//               community_id: comIdParams,
-//             },
-//             (stats: number, { community, participant }: { community: any; participant: any })
-//  => {
-//               console.log('stats', stats, community, participant);
-
-//               if (stats === 200) {
-//                 updateCommunityMeta({
-//                   id: community.id,
-//                   isOwner: participant.is_owner,
-//                   name: community.name,
-//                   description: community.description,
-//                 });
-//               }
-
-//               if (community?.id !== null) {
-//                 setIsLogin(true);
-//               }
-//             },
-//           );
-//         } else {
-//           socket.emit(
-//             'retrieve-any-community',
-//             (stats: number, { community, participant }: { community: any; participant: any })
-//  => {
-//               console.log('stats', stats, community, participant);
-
-//               if (stats === 200) {
-//                 updateCommunityMeta({
-//                   id: community.id,
-//                   isOwner: participant.is_owner,
-//                   name: community.name,
-//                   description: community.description,
-//                 });
-//               }
-
-//               if (community?.id !== null) {
-//                 setIsLogin(true);
-//               }
-//             },
-//           );
-//         }
-//       });
-//     }
-//   }, [socket?.connected]);
-
-//   // console.log('isLogin', isLogin);
-//   // console.log('onboardingStage', onboardingStage);
-//   // console.log('pathname', pathname);
-//   // console.log('communityId', communityId);
-//   // console.log('comIdParams', Number(comIdParams));
-//   // console.log('Number(comIdParams) !== communityId', Number(comIdParams) !== communityId);
-
-//   // Показываем скелетон, пока запрос на проверку сессии не пришёл
-//   if (isLogin === null) return <Load />;
-
-//   // Сохраняем уникальные параметры при редиректе
-//   const getUrlWithParams = (url: string) => {
-//     console.log('searchParams', searchParams);
-//     const params = new URLSearchParams(Object.fromEntries(searchParams)).toString();
-
-//     return params ? `${url}?${params}` : url;
-//   };
-
-//   // Если пользователь не залогинен,
-//   // то редиректим на форму входа, исключая страницы входа, регистрации и восстановления пароля
-//   console.log(
-//     "pathname.includes('/invite/')",
-//     !(
-//       mapsOfPathsWithoutRedirect.includes(pathname) ||
-//       pathname.includes('/reset-password/') ||
-//       pathname.includes('/invite/')
-//     ),
-//   );
-
-//   if (
-//     !isLogin &&
-//     !(
-//       mapsOfPathsWithoutRedirect.includes(pathname) ||
-//       pathname.includes('/reset-password/') ||
-//       pathname.includes('/invite/')
-//     )
-//   ) {
-//     console.log("getUrlWithParams('/signin')", getUrlWithParams('/signin'));
-//     redirect(getUrlWithParams('/signin'));
-//     // toast('Требуется авторизация');
-//   }
-
-//   if (
-//     isLogin &&
-//     !!communityId &&
-//     Number(comIdParams) !== communityId &&
-//     !!onboardingStage &&
-//     onboardingStage === 'completed' &&
-//     welcomePagesPaths.includes(pathname)
-//   ) {
-//     redirect(getUrlWithParams(`/communities/${communityId}/home`));
-//   }
-
-//   if (
-//     isLogin &&
-//     !!onboardingStage &&
-//     onboardingStage !== 'completed' &&
-//     onboardingStage !== 'final' &&
-//     !welcomePagesPaths.includes(pathname)
-//   ) {
-//     redirect(getUrlWithParams(welcomePagesPathsDict[onboardingStage]));
-//   }
-
-//   return children;
-// };
-
 type ProvidersT = {
   children: ReactNode;
 };