fix: metrics using

2024-05-06 16:47:19 +03:00 · 2024-05-06 16:47:19 +03:00 · c15516344a
commit c15516344a
parent a900035409
13 changed files with 1067 additions and 913 deletions
--- a/lib/components/QuizAnswerer.tsx
+++ b/lib/components/QuizAnswerer.tsx
@ -1,27 +1,45 @@
-import { getQuizData } from "@/api/quizRelase";
-import { QuizViewContext, createQuizViewStore } from "@/stores/quizView";
-import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
-import { QuizDataContext } from "@contexts/QuizDataContext";
-import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
-import { QuizSettings } from "@model/settingsData";
-import { Box, CssBaseline, ThemeProvider } from "@mui/material";
-import ScopedCssBaseline from "@mui/material/ScopedCssBaseline";
+import {
+  startTransition,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import useSWR from "swr";
+import { SnackbarProvider } from "notistack";
+import moment from "moment";
+import {
+  Box,
+  ScopedCssBaseline,
+  CssBaseline,
+  ThemeProvider,
+} from "@mui/material";
 import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
 import { ruRU } from "@mui/x-date-pickers/locales";
+
+import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage";
+import { ApologyPage } from "./ViewPublicationPage/ApologyPage";
+
+import { QuizViewContext, createQuizViewStore } from "@/stores/quizView";
+
+import { getQuizData } from "@/api/quizRelase";
+
+import { QuizDataContext } from "@contexts/QuizDataContext";
+import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
+import LoadingSkeleton from "@/ui_kit/LoadingSkeleton";
+
+import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
+import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
 import { handleComponentError } from "@utils/handleComponentError";
 import lightTheme from "@utils/themes/light";
-import moment from "moment";
-import { SnackbarProvider } from "notistack";
-import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { ErrorBoundary } from "react-error-boundary";
-import useSWR from "swr";
-import { ApologyPage } from "./ViewPublicationPage/ApologyPage";
-import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage";

+import type { QuizSettings } from "@model/settingsData";

 moment.locale("ru");
-const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
+const localeText =
+  ruRU.components.MuiLocalizationProvider.defaultProps.localeText;

 type Props = {
  quizSettings?: QuizSettings;
@ -32,49 +50,53 @@ type Props = {
  disableGlobalCss?: boolean;
 };

-function QuizAnswererInner({ quizSettings, quizId, preview = false, changeFaviconAndTitle = true, className, disableGlobalCss = false }: Props) {
+function QuizAnswererInner({
+  quizSettings,
+  quizId,
+  preview = false,
+  changeFaviconAndTitle = true,
+  className,
+  disableGlobalCss = false,
+}: Props) {
  const [quizViewStore] = useState(createQuizViewStore);
-    const [rootContainerWidth, setRootContainerWidth] = useState<number>(() => window.innerWidth);
+  const [rootContainerWidth, setRootContainerWidth] = useState<number>(
+    () => window.innerWidth
+  );
  const rootContainerRef = useRef<HTMLDivElement>(null);
-    const { data, error, isLoading } = useSWR(quizSettings ? null : ["quizData", quizId], params => getQuizData(params[1]), {
+  const { data, error, isLoading } = useSWR(
+    quizSettings ? null : ["quizData", quizId],
+    (params) => getQuizData(params[1]),
+    {
      revalidateOnFocus: false,
      revalidateOnReconnect: false,
      shouldRetryOnError: false,
      refreshInterval: 0,
-    });
-
+    }
+  );
+  const vkMetrics = useVkMetricsGoals(
+    quizSettings?.settings.cfg.vkMetricsNumber
+  );
+  const yandexMetrics = useYandexMetricsGoals(
+    quizSettings?.settings.cfg.yandexMetricsNumber
+  );

  useEffect(() => {
    setTimeout(() => {
-            //@ts-ignore
-            let YM = window?.ym;
-            //@ts-ignore
-            let VP = window?._tmr;
-            if (YM !== undefined && quizSettings?.settings.cfg.yandexMetricNumber !== undefined) {
-                YM(
-                    quizSettings.settings.cfg.yandexMetricNumber,
-                    "reachGoal",
-                    "penaquiz-start"
-                );
-            };
-            if (VP !== undefined && quizSettings?.settings.cfg.vkMetricNumber !== undefined) {
-                VP.push({
-                    type: "reachGoal",
-                    id: quizSettings.settings.cfg.vkMetricNumber,
-                    goal: "penaquiz-start"
-                });
-            };
-        }, 4000)
-    }, [])
+      vkMetrics.quizOpened();
+      yandexMetrics.quizOpened();
+    }, 4000);
+  }, []);

  useLayoutEffect(() => {
-        if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth);
+    if (rootContainerRef.current)
+      setRootContainerWidth(rootContainerRef.current.clientWidth);
  }, []);

  useEffect(() => {
    const handleWindowResize = () => {
      startTransition(() => {
-                if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth);
+        if (rootContainerRef.current)
+          setRootContainerWidth(rootContainerRef.current.clientWidth);
      });
    };
    window.addEventListener("resize", handleWindowResize);
@ -90,7 +112,8 @@ function QuizAnswererInner({ quizSettings, quizId, preview = false, changeFavico
  quizSettings ??= data;
  if (!quizSettings) throw new Error("Quiz data is null");

-    if (quizSettings.questions.length === 0) return <ApologyPage error={new Error("No questions found")} />;
+  if (quizSettings.questions.length === 0)
+    return <ApologyPage error={new Error("No questions found")} />;
  if (!quizId) return <ApologyPage error={new Error("No quiz id")} />;

  const quizContainer = (
@ -115,7 +138,9 @@ function QuizAnswererInner({ quizSettings, quizId, preview = false, changeFavico
  return (
    <QuizViewContext.Provider value={quizViewStore}>
      <RootContainerWidthContext.Provider value={rootContainerWidth}>
-                <QuizDataContext.Provider value={{ ...quizSettings, quizId, preview, changeFaviconAndTitle }}>
+        <QuizDataContext.Provider
+          value={{ ...quizSettings, quizId, preview, changeFaviconAndTitle }}
+        >
          {disableGlobalCss ? (
            <ScopedCssBaseline
              sx={{
@ -127,9 +152,7 @@ function QuizAnswererInner({ quizSettings, quizId, preview = false, changeFavico
              {quizContainer}
            </ScopedCssBaseline>
          ) : (
-                        <CssBaseline>
-                            {quizContainer}
-                        </CssBaseline>
+            <CssBaseline>{quizContainer}</CssBaseline>
          )}
        </QuizDataContext.Provider>
      </RootContainerWidthContext.Provider>
@ -138,9 +161,12 @@ function QuizAnswererInner({ quizSettings, quizId, preview = false, changeFavico
 }

 export default function QuizAnswerer(props: Props) {
-
  return (
-        <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="ru" localeText={localeText}>
+    <LocalizationProvider
+      dateAdapter={AdapterMoment}
+      adapterLocale="ru"
+      localeText={localeText}
+    >
      <ThemeProvider theme={lightTheme}>
        <SnackbarProvider
          preventDuplicate={true}
--- a/lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx
+++ b/lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx
@ -1,26 +1,31 @@
-import { useEffect, useRef, useState, } from "react";
-import { Box, Button, Link, Typography, useTheme, } from "@mui/material";
-
-import CustomCheckbox from "@ui_kit/CustomCheckbox.tsx";
-
-import { DESIGN_LIST } from "@utils/designList.ts";
-import { sendFC, SendFCParams } from "@api/quizRelase.ts";
-import { useQuizData } from "@contexts/QuizDataContext.ts";
-import { NameplateLogo } from "@icons/NameplateLogo.tsx";
-import { QuizQuestionResult } from "@model/questionTypes/result.ts";
-import { AnyTypedQuizQuestion } from "@model/questionTypes/shared.ts";
-import { quizThemes } from "@utils/themes/Publication/themePublication.ts";
+import { useEffect, useRef, useState } from "react";
+import { Box, Button, Link, Typography, useTheme } from "@mui/material";
 import { enqueueSnackbar } from "notistack";
-import { useRootContainerSize } from "@contexts/RootContainerWidthContext.ts";
-import {
+
+import CustomCheckbox from "@ui_kit/CustomCheckbox";
+
+import { Inputs } from "@/components/ViewPublicationPage/ContactForm/Inputs/Inputs";
+
+import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
+import { useQuizData } from "@contexts/QuizDataContext";
+
+import { sendFC, SendFCParams } from "@api/quizRelase";
+
+import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
+import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
+
+import { EMAIL_REGEXP } from "@utils/emailRegexp";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
+import { DESIGN_LIST } from "@utils/designList";
+
+import { NameplateLogo } from "@icons/NameplateLogo";
+
+import type {
  FormContactFieldData,
  FormContactFieldName,
-} from "@model/settingsData.ts";
-import {
-  Inputs
-} from "@/components/ViewPublicationPage/ContactForm/Inputs/Inputs.tsx";
-import { EMAIL_REGEXP } from "@utils/emailRegexp.tsx";
-
+} from "@model/settingsData";
+import type { QuizQuestionResult } from "@model/questionTypes/result";
+import type { AnyTypedQuizQuestion } from "@model/questionTypes/shared";

 type Props = {
  currentQuestion: AnyTypedQuizQuestion;
@ -44,6 +49,9 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
  const isMobile = useRootContainerSize() < 850;
  const isTablet = useRootContainerSize() < 1000;

+  const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
+  const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);
+
  useEffect(() => {
    function handleResize() {
      setScreenHeight(window.innerHeight);
@ -142,24 +150,8 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
        sessions[quizId] = Date.now();
        localStorage.setItem("sessions", JSON.stringify(sessions));

-        //@ts-ignore
-        let YM = window?.ym;
-        //@ts-ignore
-        let VP = window?._tmr;
-        if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
-          YM(
-            settings.cfg.yandexMetricNumber,
-            "reachGoal",
-            "penaquiz-contacts"
-          );
-        };
-        if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
-          VP.push({
-            type: "reachGoal",
-            id: settings.cfg.vkMetricNumber,
-            goal: "penaquiz-contacts"
-          });
-        };
+        vkMetrics.contactsFormFilled();
+        yandexMetrics.contactsFormFilled();
      } catch (e) {
        enqueueSnackbar("повторите попытку позже");
      }
@ -171,25 +163,9 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
    setFire(false);
  }
  useEffect(() => {
-    //@ts-ignore
-    let YM = window?.ym;
-    //@ts-ignore
-    let VP = window?._tmr;
-    if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
-      YM(
-        settings.cfg.yandexMetricNumber,
-        "reachGoal",
-        "penaquiz-form"
-      );
-    };
-    if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
-      VP.push({
-        type: "reachGoal",
-        id: settings.cfg.vkMetricNumber,
-        goal: "penaquiz-form"
-      });
-    };
-  }, [])
+    vkMetrics.contactsFormOpened();
+    yandexMetrics.contactsFormOpened();
+  }, []);

  return (
    <Box
@ -213,7 +189,8 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
          settings.cfg.design && !isMobile
            ? quizThemes[settings.cfg.theme].isLight
              ? `url(${DESIGN_LIST[settings.cfg.theme]})`
-              : `linear-gradient(90deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]
+              : `linear-gradient(90deg, #272626, transparent), url(${
+                  DESIGN_LIST[settings.cfg.theme]
                })`
            : null,
      }}
@ -240,7 +217,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
            justifyContent: "center",
            borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
            margin: isMobile ? 0 : "40px 0",
-            padding: isMobile ? "0" : "0 40px"
+            padding: isMobile ? "0" : "0 40px",
          }}
        >
          <Box
@ -290,7 +267,11 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
            justifyContent: "center",
            flexDirection: "column",
            backgroundColor: theme.palette.background.default,
-            p: isMobile ? "0 20px" : isTablet ? "0px 40px 30px 60px" : "125px 60px 30px 60px",
+            p: isMobile
+              ? "0 20px"
+              : isTablet
+              ? "0px 40px 30px 60px"
+              : "125px 60px 30px 60px",
          }}
        >
          <Box
@ -298,7 +279,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
              display: "flex",
              flexDirection: "column",
              mt: isMobile ? "10px" : "20px",
-              mb: "20px"
+              mb: "20px",
            }}
          >
            <Inputs
@ -329,7 +310,10 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
              colorIcon={theme.palette.primary.main}
              sx={{ marginRight: "0" }}
            />
-            <Typography sx={{ color: theme.palette.text.primary, lineHeight: "18.96px" }} fontSize={"16px"} >
+            <Typography
+              sx={{ color: theme.palette.text.primary, lineHeight: "18.96px" }}
+              fontSize={"16px"}
+            >
              С&ensp;
              <Link href={"https://shub.pena.digital/ppdd"} target="_blank">
                Положением об обработке персональных данных{" "}
@ -361,7 +345,6 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                  border: "1px solid #9A9AAF",
                  color: "#9A9AAF",
                },
-
              }}
            >
              {settings.cfg.formContact?.button || "Получить результаты"}
@ -371,7 +354,8 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
            <Box
              component={Link}
              target={"_blank"}
-              href={`https://${window.location.hostname.includes("s") ? "s" : ""
+              href={`https://${
+                window.location.hostname.includes("s") ? "s" : ""
              }quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
              sx={{
                display: "flex",
@ -382,7 +366,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
                textDecoration: "none",
                position: "absolute",
                bottom: 0,
-                left: isMobile ? "28%" : undefined
+                left: isMobile ? "28%" : undefined,
              }}
            >
              <NameplateLogo
@ -411,4 +395,3 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
    </Box>
  );
 };
-
--- a/lib/components/ViewPublicationPage/ResultForm.tsx
+++ b/lib/components/ViewPublicationPage/ResultForm.tsx
@ -1,15 +1,21 @@
+import { useEffect } from "react";
 import { Box, Button, Link, Typography, useTheme } from "@mui/material";

-import { NameplateLogo } from "@icons/NameplateLogo";
+import { useQuizViewStore } from "@/stores/quizView";
+
+import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
+import { useQuizData } from "@contexts/QuizDataContext";
+
+import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
+import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
+import { DESIGN_LIST } from "@/utils/designList";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
+
 import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";

-import { useQuizData } from "@contexts/QuizDataContext";
-import { quizThemes } from "@utils/themes/Publication/themePublication";
-import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
-import type { QuizQuestionResult } from "../../model/questionTypes/result";
-import { useQuizViewStore } from "@/stores/quizView";
-import { DESIGN_LIST } from "@/utils/designList";
-import { useEffect } from "react";
+import { NameplateLogo } from "@icons/NameplateLogo";
+
+import type { QuizQuestionResult } from "@/model/questionTypes/result";

 type ResultFormProps = {
  resultQuestion: QuizQuestionResult;
@ -24,27 +30,13 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
    (state) => state.setCurrentQuizStep
  );
  const spec = settings.cfg.spec;
+  const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
+  const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);

  useEffect(() => {
-    //@ts-ignore
-    let YM = window?.ym;
-    //@ts-ignore
-    let VP = window?._tmr;
-    if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
-      YM(
-        settings.cfg.yandexMetricNumber,
-        "reachGoal",
-        `penaquiz-result-{${resultQuestion.id}}`
-      );
-    };
-    if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
-      VP.push({
-        type: "reachGoal",
-        id: settings.cfg.vkMetricNumber,
-        goal: `penaquiz-result-{${resultQuestion.id}}`
-      });
-    };
-  }, [])
+    vkMetrics.resultShown(resultQuestion.id);
+    yandexMetrics.resultShown(resultQuestion.id);
+  }, []);

  return (
    <Box
@ -197,7 +189,8 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
              <Box
                component={Link}
                target={"_blank"}
-                href={`https://${window.location.hostname.includes("s") ? "s" : ""
+                href={`https://${
+                  window.location.hostname.includes("s") ? "s" : ""
                }quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
                sx={{
                  display: "flex",
@ -216,7 +209,6 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                      : "#F5F7FF",
                  }}
                />
-
              </Box>
            )}
          </Box>
--- a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
+++ b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
@ -9,7 +9,6 @@ import {
 } from "@mui/material";

 import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType";
-import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";

 import { useQuizData } from "@contexts/QuizDataContext";
 import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
@ -21,36 +20,31 @@ import { NameplateLogo } from "@icons/NameplateLogo";
 import { useQuizViewStore } from "@/stores/quizView";
 import { DESIGN_LIST } from "@/utils/designList";

+import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
+import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
+
+import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";
+
 export const StartPageViewPublication = () => {
  const theme = useTheme();
  const { settings, show_badge, quizId, questions } = useQuizData();
  const { isMobileDevice } = useUADevice();
-    const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep);
+  const setCurrentQuizStep = useQuizViewStore(
+    (state) => state.setCurrentQuizStep
+  );

  const size = useRootContainerSize();
  const isMobile = size < 700;
  const isTablet = size >= 700 && size < 1100;
-    console.log(settings)
+
+  const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
+  const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);
+
  const handleCopyNumber = () => {
    navigator.clipboard.writeText(settings.cfg.info.phonenumber);
-        //@ts-ignore
-        let YM = window?.ym;
-        //@ts-ignore
-        let VP = window?._tmr;
-        if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
-            YM(
-                settings.cfg.yandexMetricNumber,
-                "reachGoal",
-                "penaquiz-phone"
-            );
-        };
-        if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
-            VP.push({
-                type: "reachGoal",
-                id: settings.cfg.vkMetricNumber,
-                goal: "penaquiz-phone"
-            });
-        };
+
+    vkMetrics.phoneNumberOpened();
+    yandexMetrics.phoneNumberOpened();
  };

  const background =
@ -101,23 +95,41 @@ export const StartPageViewPublication = () => {
      ) : null
    ) : null;

-    const quizHeaderBlock = (<Box
+  const quizHeaderBlock = (
+    <Box
      sx={{
-            margin:
-                settings.cfg.startpageType === "centered" ? "0 auto" : null,
+        margin: settings.cfg.startpageType === "centered" ? "0 auto" : null,
      }}
    >
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
-                flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "nowrap" : "wrap",
+          flexWrap:
+            settings.cfg.startpageType === "expanded" &&
+            settings.cfg.startpage.position === "center"
+              ? "nowrap"
+              : "wrap",
          gap: isMobile ? "20px" : "30px",
-                mb: settings.cfg.startpageType === "centered" ? isMobile ? "20px" : "25px" : settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile ? 0 : "7px",
-                justifyContent: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile ? "center" : undefined
+          mb:
+            settings.cfg.startpageType === "centered"
+              ? isMobile
+                ? "20px"
+                : "25px"
+              : settings.cfg.startpageType === "expanded" &&
+                settings.cfg.startpage.position === "center" &&
+                !isMobile
+              ? 0
+              : "7px",
+          justifyContent:
+            settings.cfg.startpageType === "expanded" &&
+            settings.cfg.startpage.position === "center" &&
+            isMobile
+              ? "center"
+              : undefined,
        }}
      >
-            {settings.cfg.startpage.logo &&
+        {settings.cfg.startpage.logo && (
          <img
            src={settings.cfg.startpage.logo}
            style={{
@ -127,7 +139,7 @@ export const StartPageViewPublication = () => {
            }}
            alt=""
          />
-            }
+        )}
        <Typography
          sx={{
            fontSize: "12px",
@ -135,27 +147,38 @@ export const StartPageViewPublication = () => {
              settings.cfg.startpageType === "expanded"
                ? "white"
                : theme.palette.text.primary,
-                    wordBreak: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "normal" : "break-word",
+            wordBreak:
+              settings.cfg.startpageType === "expanded" &&
+              settings.cfg.startpage.position === "center"
+                ? "normal"
+                : "break-word",
          }}
        >
          {settings.cfg.info.orgname}
        </Typography>
      </Box>
-    </Box>)
+    </Box>
+  );

  const PenaBadge = (
    <Box
      component={Link}
      target={"_blank"}
-            href={
-                `https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
-            }
+      href={`https://${
+        window.location.hostname.includes("s") ? "s" : ""
+      }quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
      sx={{
        display: "flex",
        alignItems: "center",
        gap: "7px",
        textDecoration: "none",
-                marginLeft: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isTablet && !isMobile ? "61px" : undefined
+        marginLeft:
+          settings.cfg.startpageType === "expanded" &&
+          settings.cfg.startpage.position === "center" &&
+          !isTablet &&
+          !isMobile
+            ? "61px"
+            : undefined,
      }}
    >
      <NameplateLogo
@ -183,9 +206,30 @@ export const StartPageViewPublication = () => {
      {/*>*/}
      {/*    Сделано на PenaQuiz*/}
      {/*</Typography>*/}
-        </Box>)
+    </Box>
+  );

-    const realQuestionsCount = questions.filter((question) => question.type !== null && question.type !== "result").length;
+  const realQuestionsCount = questions.filter(
+    (question) => question.type !== null && question.type !== "result"
+  ).length;
+
+  const onQuizStart = () => {
+    setCurrentQuizStep("question");
+
+    vkMetrics.firstPageOpened();
+    yandexMetrics.firstPageOpened();
+  };
+
+  const onSiteClick = () => {
+    vkMetrics.emailOpened();
+    yandexMetrics.emailOpened();
+
+    location.href = (
+      settings.cfg.info.site.includes("https")
+        ? settings.cfg.info.site
+        : `https://${settings.cfg.info.site}`
+    ).replace(/\s+/g, "");
+  };

  return (
    <Paper
@ -196,7 +240,8 @@ export const StartPageViewPublication = () => {
        width: "100%",
        background:
          settings.cfg.startpageType === "expanded"
-                        ? settings.cfg.startpage.position === "left" || isMobile && settings.cfg.startpage.position === "right"
+            ? settings.cfg.startpage.position === "left" ||
+              (isMobile && settings.cfg.startpage.position === "right")
              ? "linear-gradient(90deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)"
              : settings.cfg.startpage.position === "center"
              ? "linear-gradient(0deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)"
@ -207,15 +252,17 @@ export const StartPageViewPublication = () => {
      }}
    >
      <QuizPreviewLayoutByType
-                quizHeaderBlock={quizHeaderBlock
-                }
+        quizHeaderBlock={quizHeaderBlock}
        quizMainBlock={
          <>
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
-                                justifyContent: settings.cfg.startpageType === "standard" && isMobile ? "start" : "center",
+                justifyContent:
+                  settings.cfg.startpageType === "standard" && isMobile
+                    ? "start"
+                    : "center",
                flexGrow: settings.cfg.startpageType === "centered" ? 0 : 1,
                alignItems:
                  settings.cfg.startpageType === "centered"
@ -225,8 +272,21 @@ export const StartPageViewPublication = () => {
                      ? "center"
                      : "start"
                    : "start",
-                                marginTop: settings.cfg.startpageType === "centered" ? "30px" : isMobile ? "0px" : "5px",
-                                maxWidth: isMobile ? "100%" : settings.cfg.startpageType === "centered" ? "700px" : isTablet && settings.cfg.startpageType !== "expanded" && settings.cfg.startpage.position !== "center" ? "380px" : "531px",
+                marginTop:
+                  settings.cfg.startpageType === "centered"
+                    ? "30px"
+                    : isMobile
+                    ? "0px"
+                    : "5px",
+                maxWidth: isMobile
+                  ? "100%"
+                  : settings.cfg.startpageType === "centered"
+                  ? "700px"
+                  : isTablet &&
+                    settings.cfg.startpageType !== "expanded" &&
+                    settings.cfg.startpage.position !== "center"
+                  ? "380px"
+                  : "531px",
              }}
            >
              <Typography
@ -287,36 +347,13 @@ export const StartPageViewPublication = () => {
                    background: theme.palette.primary.main,
                    borderRadius: "12px",
                  }}
-                                    onClick={() => {
-                                        setCurrentQuizStep("question")
-
-
-                                        //@ts-ignore
-                                        let YM = window?.ym;
-                                        //@ts-ignore
-                                        let VP = window?._tmr;
-                                        if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
-                                            YM(
-                                                settings.cfg.yandexMetricNumber,
-                                                "reachGoal",
-                                                "penaquiz-startquiz"
-                                            );
-                                        };
-                                        if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
-                                            VP.push({
-                                                type: "reachGoal",
-                                                id: settings.cfg.vkMetricNumber,
-                                                goal: "penaquiz-startquiz"
-                                            });
-                                        };
-                                    }}
+                  onClick={onQuizStart}
                >
                  {settings.cfg.startpage.button.trim()
                    ? settings.cfg.startpage.button
                    : "Пройти тест"}
                </Button>
              </Box>
-
            </Box>
            <Box
              sx={{
@ -329,52 +366,58 @@ export const StartPageViewPublication = () => {
                    : 0,
                gap: isMobile ? "30px" : "40px",
                alignItems: "flex-end",
-                                justifyContent: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile || settings.cfg.startpageType === "centered" && isMobile ? "center" : "space-between",
+                justifyContent:
+                  (settings.cfg.startpageType === "expanded" &&
+                    settings.cfg.startpage.position === "center" &&
+                    isMobile) ||
+                  (settings.cfg.startpageType === "centered" && isMobile)
+                    ? "center"
+                    : "space-between",
                width: "100%",
-                                flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? isMobile ? "wrap-reverse" : "nowrap" : "wrap",
+                flexWrap:
+                  settings.cfg.startpageType === "expanded" &&
+                  settings.cfg.startpage.position === "center"
+                    ? isMobile
+                      ? "wrap-reverse"
+                      : "nowrap"
+                    : "wrap",
              }}
            >
-                            {settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile && quizHeaderBlock}
-                            <Box sx={{
+              {settings.cfg.startpageType === "expanded" &&
+                settings.cfg.startpage.position === "center" &&
+                !isMobile &&
+                quizHeaderBlock}
+              <Box
+                sx={{
                  maxWidth: "300px",
-                                display: settings.cfg.startpageType === "centered" && isMobile || settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && isMobile ? "flex" : "block",
+                  display:
+                    (settings.cfg.startpageType === "centered" && isMobile) ||
+                    (settings.cfg.startpageType === "expanded" &&
+                      settings.cfg.startpage.position === "center" &&
+                      isMobile)
+                      ? "flex"
+                      : "block",
                  flexDirection: "column",
                  alignItems: "center",
-                                order: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "2" : "0"
-                            }}>
-                                {settings.cfg.info.site && (
-                                    <ButtonBase
-                                        onClick={async () => {
-                                            //@ts-ignore
-                                            let YM = window?.ym;
-                                            //@ts-ignore
-                                            let VP = window?._tmr;
-                                            if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
-                                                await YM(
-                                                    settings.cfg.yandexMetricNumber,
-                                                    "reachGoal",
-                                                    "penaquiz-email"
-                                                );
-                                            };
-                                            if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
-                                                await VP.push({
-                                                    type: "reachGoal",
-                                                    id: settings.cfg.vkMetricNumber,
-                                                    goal: "penaquiz-email"
-                                                });
-                                            };
-                                            location.href = (
-                                                settings.cfg.info.site.includes("https")
-                                                    ? settings.cfg.info.site
-                                                    : `https://${settings.cfg.info.site}`
-                                            ).replace(/\s+/g, '')
+                  order:
+                    settings.cfg.startpageType === "expanded" &&
+                    settings.cfg.startpage.position === "center"
+                      ? "2"
+                      : "0",
                }}
              >
+                {settings.cfg.info.site && (
+                  <ButtonBase onClick={onSiteClick}>
                    <Typography
                      sx={{
                        lineHeight: "19px",
                        fontSize: "16px",
-                                                textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile ? "end" : "none",
+                        textAlign:
+                          settings.cfg.startpageType === "expanded" &&
+                          settings.cfg.startpage.position === "center" &&
+                          !isMobile
+                            ? "end"
+                            : "none",
                        color: theme.palette.primary.main,
                        overflow: "hidden",
                        textOverflow: "ellipsis",
@ -384,7 +427,6 @@ export const StartPageViewPublication = () => {
                      {settings.cfg.info.site}
                    </Typography>
                  </ButtonBase>
-
                )}
                {settings.cfg.info.clickable ? (
                  isMobileDevice ? (
@ -392,7 +434,11 @@ export const StartPageViewPublication = () => {
                      <Typography
                        sx={{
                          lineHeight: "19px",
-                                                    textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "end" : "none",
+                          textAlign:
+                            settings.cfg.startpageType === "expanded" &&
+                            settings.cfg.startpage.position === "center"
+                              ? "end"
+                              : "none",
                          fontSize: "16px",
                          color:
                            settings.cfg.startpageType === "expanded"
@ -407,7 +453,11 @@ export const StartPageViewPublication = () => {
                    <ButtonBase onClick={handleCopyNumber}>
                      <Typography
                        sx={{
-                                                    textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "end" : "none",
+                          textAlign:
+                            settings.cfg.startpageType === "expanded" &&
+                            settings.cfg.startpage.position === "center"
+                              ? "end"
+                              : "none",
                          fontSize: "16px",
                          lineHeight: "19px",
                          color:
@ -424,7 +474,11 @@ export const StartPageViewPublication = () => {
                  <Typography
                    sx={{
                      lineHeight: "19px",
-                                            textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "end" : "none",
+                      textAlign:
+                        settings.cfg.startpageType === "expanded" &&
+                        settings.cfg.startpage.position === "center"
+                          ? "end"
+                          : "none",
                      fontSize: "16px",
                      marginTop: "10px",
                      color:
@ -442,7 +496,11 @@ export const StartPageViewPublication = () => {
                    width: "100%",
                    overflowWrap: "break-word",
                    fontSize: "12px",
-                                        textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" ? "end" : "none",
+                    textAlign:
+                      settings.cfg.startpageType === "expanded" &&
+                      settings.cfg.startpage.position === "center"
+                        ? "end"
+                        : "none",
                    maxHeight: "120px",
                    overflow: "auto",
                    marginTop: "10px",
--- a/lib/components/ViewPublicationPage/ViewPublicationPage.tsx
+++ b/lib/components/ViewPublicationPage/ViewPublicationPage.tsx
@ -13,11 +13,9 @@ import {StartPageViewPublication} from "./StartPageViewPublication";
 import NextButton from "./tools/NextButton";
 import PrevButton from "./tools/PrevButton";
 import QuestionSelect from "./QuestionSelect";
-import {useYandexMetrics} from "@/utils/hooks/useYandexMetrics";
-import {useVKMetrics} from "@/utils/hooks/useVKMetrics";
-import {
-  ContactForm
-} from "@/components/ViewPublicationPage/ContactForm/ContactForm.tsx";
+import { useYandexMetrics } from "@/utils/hooks/metrics/useYandexMetrics";
+import { useVKMetrics } from "@/utils/hooks/metrics/useVKMetrics";
+import { ContactForm } from "@/components/ViewPublicationPage/ContactForm/ContactForm.tsx";

 export default function ViewPublicationPage() {
  const {
@ -39,8 +37,8 @@ export default function ViewPublicationPage() {
    showResultAfterContactForm,
    setQuestion,
  } = useQuestionFlowControl();
-  useYandexMetrics(settings?.cfg?.yandexMetricNumber);
-  useVKMetrics(settings?.cfg?.vkMetricNumber);
+  useYandexMetrics(settings?.cfg?.yandexMetricsNumber);
+  useVKMetrics(settings?.cfg?.vkMetricsNumber);

  const isAnswer = answers.some(
    (ans) => ans.questionId === currentQuestion?.id
@ -75,7 +73,6 @@ export default function ViewPublicationPage() {
      </ThemeProvider>
    );

-
  let quizStepElement: ReactElement;
  switch (currentQuizStep) {
    case "startpage": {
--- a/lib/model/metrics.ts
+++ b/lib/model/metrics.ts
@ -0,0 +1,8 @@
+export type MetricsMessengers =
+  | "telegram"
+  | "viber"
+  | "whatsapp"
+  | "vkontakte"
+  | "messenger"
+  | "skype"
+  | "instagram";
--- a/lib/model/settingsData.ts
+++ b/lib/model/settingsData.ts
@ -108,8 +108,8 @@ export interface QuizConfig {
    law?: string;
  };
  meta: string;
-  yandexMetricNumber: number | undefined;
-  vkMetricNumber: number | undefined;
+  yandexMetricsNumber: number | undefined;
+  vkMetricsNumber: number | undefined;
 }

 export type FormContactFieldName =
--- a/lib/utils/emailRegexp.tsx
+++ b/lib/utils/emailRegexp.tsx
--- a/lib/utils/hooks/metrics/useVKMetrics.ts
+++ b/lib/utils/hooks/metrics/useVKMetrics.ts
@ -1,17 +1,17 @@
 import { useEffect } from "react";

-export const useVKMetrics = (vkMetricNumber: number | undefined) => {
+export const useVKMetrics = (vkMetricsNumber: number | undefined) => {
  useEffect(() => {
    if (
-      vkMetricNumber &&
-      typeof vkMetricNumber === "number" &&
-      !Number.isNaN(vkMetricNumber)
+      vkMetricsNumber &&
+      typeof vkMetricsNumber === "number" &&
+      !Number.isNaN(vkMetricsNumber)
    ) {
      const script = document.createElement("script");
      script.type = "text/javascript";
      script.innerHTML = `
        var _tmr = window._tmr || (window._tmr = []);
-        _tmr.push({id: "${vkMetricNumber}", type: "pageView", start: (new Date()).getTime()});
+        _tmr.push({id: "${vkMetricsNumber}", type: "pageView", start: (new Date()).getTime()});
        (function (d, w, id) {
          if (d.getElementById(id)) return;
          var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;
@ -23,8 +23,8 @@ export const useVKMetrics = (vkMetricNumber: number | undefined) => {
      document.body.appendChild(script);

      const noscript = document.createElement("noscript");
-      noscript.innerHTML = `<div><img src="https://top-fwz1.mail.ru/counter?id=${vkMetricNumber};js=na" style="position:absolute;left:-9999px;" alt="Top.Mail.Ru" /></div>`;
+      noscript.innerHTML = `<div><img src="https://top-fwz1.mail.ru/counter?id=${vkMetricsNumber};js=na" style="position:absolute;left:-9999px;" alt="Top.Mail.Ru" /></div>`;
      document.body.appendChild(noscript);
    }
-  }, [vkMetricNumber]);
+  }, [vkMetricsNumber]);
 };
--- a/lib/utils/hooks/metrics/useVkMetricsGoals.ts
+++ b/lib/utils/hooks/metrics/useVkMetricsGoals.ts
@ -1,21 +1,14 @@
 import { useEffect, useState } from "react";

-type VkMetric = {
+import type { MetricsMessengers } from "@model/metrics";
+
+type MetricsGoal = {
  type: "reachGoal";
  id: number;
  goal: string;
 };

-type ExtendedWindow = Window & { _tmp?: VkMetric[] };
-
-type Messenger =
-  | "telegram"
-  | "viber"
-  | "whatsapp"
-  | "vkontakte"
-  | "messenger"
-  | "skype"
-  | "instagram";
+type ExtendedWindow = Window & { _tmp?: MetricsGoal[] };

 const sendMetrics = (vkPixelId: number | undefined, goal: string) => {
  if (vkPixelId) {
@ -27,7 +20,7 @@ const sendMetrics = (vkPixelId: number | undefined, goal: string) => {
  }
 };

-export const useVkMetricGoals = (vkPixelId: number | undefined) => {
+export const useVkMetricsGoals = (vkPixelId: number | undefined) => {
  const [vkId, setVkId] = useState<number | undefined>(undefined);

  useEffect(() => {
@ -46,16 +39,17 @@ export const useVkMetricGoals = (vkPixelId: number | undefined) => {
    // Посетитель кликнул по email на стартовой странице
    emailOpened: () => sendMetrics(vkId, "penaquiz-email"),
    // Посетитель увидел определенный результат (id - айдишник вопроса с типом result)
-    resultShown: (resultId: string) => sendMetrics(vkId, `penaquiz-result-${resultId}`),
+    resultShown: (resultId: string) =>
+      sendMetrics(vkId, `penaquiz-result-${resultId}`),
    // Посетитель дошёл до формы контактов
    contactsFormOpened: () => sendMetrics(vkId, "penaquiz-form"),
    // Посетитель заполнил форму контактов
    contactsFormFilled: () => sendMetrics(vkId, "penaquiz-contacts"),
    // Посетитель отправил заявку с мессенджером
-    messengerRequestSended: (messenger: Messenger) =>
-      sendMetrics(vkId, `marquiz-messengers-${messenger}`),
+    messengerRequestSended: (messenger: MetricsMessengers) =>
+      sendMetrics(vkId, `penaquiz-messengers-${messenger}`),
    // Посетитель прошёл вопрос
    questionPassed: (questionId: string) =>
-      sendMetrics(vkId, `marquiz-step${questionId}`),
+      sendMetrics(vkId, `penaquiz-step${questionId}`),
  };
 };
--- a/lib/utils/hooks/metrics/useYandexMetrics.ts
+++ b/lib/utils/hooks/metrics/useYandexMetrics.ts
@ -1,11 +1,11 @@
 import { useEffect } from "react";

-export const useYandexMetrics = (yandexMetricNumber: number | undefined) => {
+export const useYandexMetrics = (yandexMetricsNumber: number | undefined) => {
  useEffect(() => {
    if (
-      yandexMetricNumber &&
-      typeof yandexMetricNumber === "number" &&
-      !Number.isNaN(yandexMetricNumber)
+      yandexMetricsNumber &&
+      typeof yandexMetricsNumber === "number" &&
+      !Number.isNaN(yandexMetricsNumber)
    ) {
      const script = document.createElement("script");
      script.type = "text/javascript";
@ -16,7 +16,7 @@ export const useYandexMetrics = (yandexMetricNumber: number | undefined) => {
        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(${yandexMetricNumber}, "init", {
+        ym(${yandexMetricsNumber}, "init", {
          clickmap:true,
          trackLinks:true,
          accurateTrackBounce:true,
@ -27,8 +27,8 @@ export const useYandexMetrics = (yandexMetricNumber: number | undefined) => {
      document.body.appendChild(script);

      const noscript = document.createElement("noscript");
-      noscript.innerHTML = `<div><img src="https://mc.yandex.ru/watch/${yandexMetricNumber}" style="position:absolute; left:-9999px;" alt="" /></div>`;
+      noscript.innerHTML = `<div><img src="https://mc.yandex.ru/watch/${yandexMetricsNumber}" style="position:absolute; left:-9999px;" alt="" /></div>`;
      document.body.appendChild(noscript);
    }
-  }, [yandexMetricNumber]);
+  }, [yandexMetricsNumber]);
 };
--- a/lib/utils/hooks/metrics/useYandexMetricsGoals.ts
+++ b/lib/utils/hooks/metrics/useYandexMetricsGoals.ts
@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+
+import type { MetricsMessengers } from "@model/metrics";
+
+type ExtendedWindow = Window & {
+  ym?: (id: number, type: string, goal: string) => void;
+};
+
+const sendMetrics = (yandexMetricsId: number | undefined, goal: string) => {
+  if (yandexMetricsId) {
+    (window as ExtendedWindow).ym?.(yandexMetricsId, "reachGoal", goal);
+  }
+};
+
+export const useYandexMetricsGoals = (yandexMetricsId: number | undefined) => {
+  const [id, setId] = useState<number | undefined>(undefined);
+
+  useEffect(() => {
+    if (yandexMetricsId) {
+      setId(yandexMetricsId);
+    }
+  }, [yandexMetricsId]);
+
+  return {
+    // Посетитель открыл квиз
+    quizOpened: () => sendMetrics(id, "penaquiz-start"),
+    // Посетитель нажал на кнопку стартовой страницы
+    firstPageOpened: () => sendMetrics(id, "penaquiz-startquiz"),
+    // Посетитель кликнул по номеру телефона на стартовой странице
+    phoneNumberOpened: () => sendMetrics(id, "penaquiz-phone"),
+    // Посетитель кликнул по email на стартовой странице
+    emailOpened: () => sendMetrics(id, "penaquiz-email"),
+    // Посетитель увидел определенный результат (id - айдишник вопроса с типом result)
+    resultShown: (resultId: string) =>
+      sendMetrics(id, `penaquiz-result-${resultId}`),
+    // Посетитель дошёл до формы контактов
+    contactsFormOpened: () => sendMetrics(id, "penaquiz-form"),
+    // Посетитель заполнил форму контактов
+    contactsFormFilled: () => sendMetrics(id, "penaquiz-contacts"),
+    // Посетитель отправил заявку с мессенджером
+    messengerRequestSended: (messenger: MetricsMessengers) =>
+      sendMetrics(id, `penaquiz-messengers-${messenger}`),
+    // Посетитель прошёл вопрос
+    questionPassed: (questionId: string) =>
+      sendMetrics(id, `penaquiz-step${questionId}`),
+  };
+};
--- a/lib/utils/hooks/useQuestionFlowControl.ts
+++ b/lib/utils/hooks/useQuestionFlowControl.ts
@ -1,25 +1,39 @@
-import { useQuizViewStore } from "@stores/quizView";
 import { useCallback, useDebugValue, useMemo, useState } from "react";
-import { isResultQuestionEmpty } from "../../components/ViewPublicationPage/tools/checkEmptyData";
-import moment from "moment";
-import { useQuizData } from "@contexts/QuizDataContext";
 import { enqueueSnackbar } from "notistack";
+import moment from "moment";

+import { isResultQuestionEmpty } from "@/components/ViewPublicationPage/tools/checkEmptyData";
+import { useQuizData } from "@contexts/QuizDataContext";
+
+import { useQuizViewStore } from "@stores/quizView";
+
+import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
+import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";

 export function useQuestionFlowControl() {
  const { settings, questions } = useQuizData();
  const sortedQuestions = useMemo(() => {
    return [...questions].sort((a, b) => a.page - b.page);
  }, [questions]);
-    const [currentQuestionId, setCurrentQuestionId] = useState<string | null>(getFirstQuestionId);
-    const answers = useQuizViewStore(state => state.answers);
-    const pointsSum = useQuizViewStore(state => state.pointsSum);
-    const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep);
+  const [currentQuestionId, setCurrentQuestionId] = useState<string | null>(
+    getFirstQuestionId
+  );
+  const answers = useQuizViewStore((state) => state.answers);
+  const pointsSum = useQuizViewStore((state) => state.pointsSum);
+  const setCurrentQuizStep = useQuizViewStore(
+    (state) => state.setCurrentQuizStep
+  );
+  const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
+  const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);

-    const currentQuestion = sortedQuestions.find(question => question.id === currentQuestionId) ?? sortedQuestions[0];
-    console.log("currentQuestion", currentQuestion)
+  const currentQuestion =
+    sortedQuestions.find((question) => question.id === currentQuestionId) ??
+    sortedQuestions[0];
+  console.log("currentQuestion", currentQuestion);

-    const linearQuestionIndex = currentQuestion && sortedQuestions.every(({ content }) => content.rule.parentId !== "root") // null when branching enabled
+  const linearQuestionIndex =
+    currentQuestion &&
+    sortedQuestions.every(({ content }) => content.rule.parentId !== "root") // null when branching enabled
      ? sortedQuestions.indexOf(currentQuestion)
      : null;

@ -28,7 +42,9 @@ export function useQuestionFlowControl() {

    if (settings.cfg.haveRoot) {
      const nextQuestion = sortedQuestions.find(
-                question => question.id === settings.cfg.haveRoot || question.content.id === settings.cfg.haveRoot
+        (question) =>
+          question.id === settings.cfg.haveRoot ||
+          question.content.id === settings.cfg.haveRoot
      );
      if (!nextQuestion) return null;

@ -39,19 +55,28 @@ export function useQuestionFlowControl() {
  }

  const nextQuestionIdPointsLogic = useCallback(() => {
-        return sortedQuestions.find(question =>
+    return sortedQuestions.find(
+      (question) =>
        question.type === "result" && question.content.rule.parentId === "line"
    );
  }, [sortedQuestions]);

  const nextQuestionIdMainLogic = useCallback(() => {
-        const questionAnswer = answers.find(({ questionId }) => questionId === currentQuestion.id);
+    const questionAnswer = answers.find(
+      ({ questionId }) => questionId === currentQuestion.id
+    );

    if (questionAnswer && !moment.isMoment(questionAnswer.answer)) {
-            const userAnswers = Array.isArray(questionAnswer.answer) ? questionAnswer.answer : [questionAnswer.answer];
+      const userAnswers = Array.isArray(questionAnswer.answer)
+        ? questionAnswer.answer
+        : [questionAnswer.answer];

      for (const branchingRule of currentQuestion.content.rule.main) {
-                if (userAnswers.some(answer => branchingRule.rules[0].answers.includes(answer))) {
+        if (
+          userAnswers.some((answer) =>
+            branchingRule.rules[0].answers.includes(answer)
+          )
+        ) {
          return branchingRule.next;
        }
      }
@ -59,18 +84,23 @@ export function useQuestionFlowControl() {

    if (!currentQuestion.required) {
      const defaultNextQuestionId = currentQuestion.content.rule.default;
-            if (defaultNextQuestionId.length > 1 && defaultNextQuestionId !== " ") return defaultNextQuestionId;
+      if (defaultNextQuestionId.length > 1 && defaultNextQuestionId !== " ")
+        return defaultNextQuestionId;
      //Вопросы типа страница, ползунок, своё поле для ввода и дата не могут иметь больше 1 ребёнка. Пользователь не может настроить там дефолт
      //Кинуть на ребёнка надо даже если там нет дефолта
      if (
-                ["date", "page", "text", "number"].includes(currentQuestion.type)
-                && currentQuestion.content.rule.children.length === 1
-            ) return currentQuestion.content.rule.children[0];
+        ["date", "page", "text", "number"].includes(currentQuestion.type) &&
+        currentQuestion.content.rule.children.length === 1
+      )
+        return currentQuestion.content.rule.children[0];
    }

    //ничё не нашли, ищем резулт
-        return sortedQuestions.find(q => {
-            return q.type === "result" && q.content.rule.parentId === currentQuestion.content.id;
+    return sortedQuestions.find((q) => {
+      return (
+        q.type === "result" &&
+        q.content.rule.parentId === currentQuestion.content.id
+      );
    })?.id;
  }, [answers, currentQuestion, sortedQuestions]);

@ -81,19 +111,26 @@ export function useQuestionFlowControl() {
    return nextQuestionIdMainLogic();
  }, [nextQuestionIdMainLogic, nextQuestionIdPointsLogic, settings.cfg.score]);

-    const prevQuestion = linearQuestionIndex !== null
+  const prevQuestion =
+    linearQuestionIndex !== null
      ? sortedQuestions[linearQuestionIndex - 1]
-        : sortedQuestions.find(q =>
-            q.id === currentQuestion?.content.rule.parentId
-            || q.content.id === currentQuestion?.content.rule.parentId
+      : sortedQuestions.find(
+          (q) =>
+            q.id === currentQuestion?.content.rule.parentId ||
+            q.content.id === currentQuestion?.content.rule.parentId
        );

  const findResultPointsLogic = useCallback(() => {
    const results = sortedQuestions.filter(
-            e => e.type === "result" && e.content.rule.minScore !== undefined && e.content.rule.minScore <= pointsSum
+      (e) =>
+        e.type === "result" &&
+        e.content.rule.minScore !== undefined &&
+        e.content.rule.minScore <= pointsSum
    );
-        const numbers = results.map(
-            e => e.type === "result" && e.content.rule.minScore !== undefined ? e.content.rule.minScore : 0
+    const numbers = results.map((e) =>
+      e.type === "result" && e.content.rule.minScore !== undefined
+        ? e.content.rule.minScore
+        : 0
    );
    const indexOfNext = Math.max(...numbers);

@ -105,33 +142,53 @@ export function useQuestionFlowControl() {
    if (settings.cfg.score) {
      if (linearQuestionIndex !== null) {
        next = sortedQuestions[linearQuestionIndex + 1];
-                if (next?.type === "result" || next == undefined) next = findResultPointsLogic();
+        if (next?.type === "result" || next == undefined)
+          next = findResultPointsLogic();
      }
    } else {
      if (linearQuestionIndex !== null) {
-                next = sortedQuestions[linearQuestionIndex + 1] ?? sortedQuestions.find(question =>
-                    question.type === "result" && question.content.rule.parentId === "line"
+        next =
+          sortedQuestions[linearQuestionIndex + 1] ??
+          sortedQuestions.find(
+            (question) =>
+              question.type === "result" &&
+              question.content.rule.parentId === "line"
          );
      } else {
-                next = sortedQuestions.find(q => q.id === nextQuestionId || q.content.id === nextQuestionId);
+        next = sortedQuestions.find(
+          (q) => q.id === nextQuestionId || q.content.id === nextQuestionId
+        );
      }
    }

    return next;
-    }, [nextQuestionId, findResultPointsLogic, linearQuestionIndex, sortedQuestions, settings.cfg.score]);
+  }, [
+    nextQuestionId,
+    findResultPointsLogic,
+    linearQuestionIndex,
+    sortedQuestions,
+    settings.cfg.score,
+  ]);

  const showResult = useCallback(() => {
-        if (nextQuestion?.type !== "result") throw new Error("Current question is not result");
+    if (nextQuestion?.type !== "result")
+      throw new Error("Current question is not result");

    setCurrentQuestionId(nextQuestion.id);
    if (
-            settings.cfg.resultInfo.showResultForm === "after"
-            || isResultQuestionEmpty(nextQuestion)
-        ) setCurrentQuizStep("contactform");
-    }, [nextQuestion, setCurrentQuizStep, settings.cfg.resultInfo.showResultForm]);
+      settings.cfg.resultInfo.showResultForm === "after" ||
+      isResultQuestionEmpty(nextQuestion)
+    )
+      setCurrentQuizStep("contactform");
+  }, [
+    nextQuestion,
+    setCurrentQuizStep,
+    settings.cfg.resultInfo.showResultForm,
+  ]);

  const showResultAfterContactForm = useCallback(() => {
-        if (currentQuestion?.type !== "result") throw new Error("Current question is not result");
+    if (currentQuestion?.type !== "result")
+      throw new Error("Current question is not result");
    if (isResultQuestionEmpty(currentQuestion)) {
      enqueueSnackbar("Данные отправлены");
      return;
@ -150,43 +207,34 @@ export function useQuestionFlowControl() {
    if (!nextQuestion) throw new Error("Next question not found");

    if (nextQuestion.type === "result") return showResult();
-        //засчитываем  переход с вопроса дальше
-
-        //@ts-ignore
-        let YM = window?.ym;
-        //@ts-ignore
-        let VP = window?._tmr;
-        if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
-            YM(
-                settings.cfg.yandexMetricNumber,
-                "reachGoal",
-                `penaquiz-step{${currentQuestion.id}}`
-            );
-        };
-        if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
-            VP.push({
-                type: "reachGoal",
-                id: settings.cfg.vkMetricNumber,
-                goal: `penaquiz-step{${currentQuestion.id}}`
-            });
-        };
+    // Засчитываем  переход с вопроса дальше
+    vkMetrics.questionPassed(currentQuestion.id);
+    yandexMetrics.questionPassed(currentQuestion.id);

    setCurrentQuestionId(nextQuestion.id);
  }, [nextQuestion, showResult]);

-    const setQuestion = useCallback((questionId: string) => {
-        const question = sortedQuestions.find(q => q.id === questionId);
+  const setQuestion = useCallback(
+    (questionId: string) => {
+      const question = sortedQuestions.find((q) => q.id === questionId);
      if (!question) return;

      setCurrentQuestionId(question.id);
-    }, [sortedQuestions]);
+    },
+    [sortedQuestions]
+  );

  const isPreviousButtonEnabled = Boolean(prevQuestion);

  const isNextButtonEnabled = useMemo(() => {
-        const hasAnswer = answers.some(({ questionId }) => questionId === currentQuestion.id);
+    const hasAnswer = answers.some(
+      ({ questionId }) => questionId === currentQuestion.id
+    );

-        if ("required" in currentQuestion.content && currentQuestion.content.required) {
+    if (
+      "required" in currentQuestion.content &&
+      currentQuestion.content.required
+    ) {
      return hasAnswer;
    }

@ -202,7 +250,8 @@ export function useQuestionFlowControl() {

  return {
    currentQuestion,
-        currentQuestionStepNumber: linearQuestionIndex === null ? null : linearQuestionIndex + 1,
+    currentQuestionStepNumber:
+      linearQuestionIndex === null ? null : linearQuestionIndex + 1,
    isNextButtonEnabled,
    isPreviousButtonEnabled,
    moveToPrevQuestion,