From 1422ab9edd44b90494817a1339df0854112d72e6 Mon Sep 17 00:00:00 2001
From: Nastya <nastyab015@yandex.ru>
Date: Sun, 12 May 2024 02:54:10 +0300
Subject: [PATCH] result link event metrica

---
 .../ViewPublicationPage/ResultForm.tsx        |  26 ++--
 .../StartPageViewPublication/index.tsx        | 120 +++++++++---------
 lib/utils/hooks/metrics/useVkMetricsGoals.ts  |   3 +
 .../hooks/metrics/useYandexMetricsGoals.ts    |   3 +
 4 files changed, 82 insertions(+), 70 deletions(-)

diff --git a/lib/components/ViewPublicationPage/ResultForm.tsx b/lib/components/ViewPublicationPage/ResultForm.tsx
index 24dda2d..5fa5aed 100644
--- a/lib/components/ViewPublicationPage/ResultForm.tsx
+++ b/lib/components/ViewPublicationPage/ResultForm.tsx
@@ -191,9 +191,8 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
               <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",
@@ -227,8 +226,8 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
               p:
                 (settings.cfg.resultInfo.showResultForm === "before" &&
                   !settings.cfg.score) ||
-                (settings.cfg.resultInfo.showResultForm === "after" &&
-                  resultQuestion.content.redirect)
+                  (settings.cfg.resultInfo.showResultForm === "after" &&
+                    resultQuestion.content.redirect)
                   ? "20px"
                   : "0",
             }}
@@ -250,11 +249,16 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
             {settings.cfg.resultInfo.showResultForm === "after" &&
               resultQuestion.content.redirect && (
                 <Button
-                  href={
-                    resultQuestion.content.redirect.includes("https")
-                      ? resultQuestion.content.redirect
-                      : `https://${resultQuestion.content.redirect}`
-                  }
+                  onClick={() => {
+                    vkMetrics.resultLink();
+                    yandexMetrics.resultLink();
+                    setTimeout(() => {
+                      location.href =
+                        (resultQuestion.content.redirect.includes("https")
+                          ? resultQuestion.content.redirect
+                          : `https://${resultQuestion.content.redirect}`).replace(/\s+/g, "");
+                    }, 1000)
+                  }}
                   variant="contained"
                   sx={{ p: "10px 20px", width: "auto", height: "50px" }}
                 >
@@ -264,6 +268,6 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
           </Box>
         </Box>
       </Box>
-    </Box>
+    </Box >
   );
 };
diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
index 0d5c966..ee6508d 100644
--- a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
+++ b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
@@ -87,8 +87,8 @@ export const StartPageViewPublication = () => {
                 settings.cfg.startpageType === "centered"
                   ? ""
                   : settings.cfg.startpageType === "expanded"
-                  ? "scale(1.5)"
-                  : "scale(2.4)",
+                    ? "scale(1.5)"
+                    : "scale(2.4)",
             },
           }}
         />
@@ -107,7 +107,7 @@ export const StartPageViewPublication = () => {
           alignItems: "center",
           flexWrap:
             settings.cfg.startpageType === "expanded" &&
-            settings.cfg.startpage.position === "center"
+              settings.cfg.startpage.position === "center"
               ? "nowrap"
               : "wrap",
           gap: isMobile ? "20px" : "30px",
@@ -119,12 +119,12 @@ export const StartPageViewPublication = () => {
               : settings.cfg.startpageType === "expanded" &&
                 settings.cfg.startpage.position === "center" &&
                 !isMobile
-              ? 0
-              : "7px",
+                ? 0
+                : "7px",
           justifyContent:
             settings.cfg.startpageType === "expanded" &&
-            settings.cfg.startpage.position === "center" &&
-            isMobile
+              settings.cfg.startpage.position === "center" &&
+              isMobile
               ? "center"
               : undefined,
         }}
@@ -149,7 +149,7 @@ export const StartPageViewPublication = () => {
                 : theme.palette.text.primary,
             wordBreak:
               settings.cfg.startpageType === "expanded" &&
-              settings.cfg.startpage.position === "center"
+                settings.cfg.startpage.position === "center"
                 ? "normal"
                 : "break-word",
           }}
@@ -164,9 +164,8 @@ export const StartPageViewPublication = () => {
     <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",
@@ -174,9 +173,9 @@ export const StartPageViewPublication = () => {
         textDecoration: "none",
         marginLeft:
           settings.cfg.startpageType === "expanded" &&
-          settings.cfg.startpage.position === "center" &&
-          !isTablet &&
-          !isMobile
+            settings.cfg.startpage.position === "center" &&
+            !isTablet &&
+            !isMobile
             ? "61px"
             : undefined,
       }}
@@ -188,8 +187,8 @@ export const StartPageViewPublication = () => {
             settings.cfg.startpageType === "expanded"
               ? "#FFFFFF"
               : quizThemes[settings.cfg.theme].isLight
-              ? "#151515"
-              : "#FFFFFF",
+                ? "#151515"
+                : "#FFFFFF",
         }}
       />
       {/*<Typography*/}
@@ -224,11 +223,14 @@ export const StartPageViewPublication = () => {
     vkMetrics.emailOpened();
     yandexMetrics.emailOpened();
 
-    location.href = (
-      settings.cfg.info.site.includes("https")
-        ? settings.cfg.info.site
-        : `https://${settings.cfg.info.site}`
-    ).replace(/\s+/g, "");
+
+    setTimeout(() => {
+      location.href = (
+        settings.cfg.info.site.includes("https")
+          ? settings.cfg.info.site
+          : `https://${settings.cfg.info.site}`
+      ).replace(/\s+/g, "");
+    }, 1000)
   };
 
   return (
@@ -244,8 +246,8 @@ export const StartPageViewPublication = () => {
               (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%)"
-              : "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%)"
+                ? "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%)"
+                : "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%)"
             : theme.palette.background.default,
 
         color: settings.cfg.startpageType === "expanded" ? "white" : "black",
@@ -269,25 +271,25 @@ export const StartPageViewPublication = () => {
                   settings.cfg.startpageType === "centered"
                     ? "center"
                     : settings.cfg.startpageType === "expanded"
-                    ? settings.cfg.startpage.position === "center"
-                      ? "center"
-                      : "start"
-                    : "start",
+                      ? settings.cfg.startpage.position === "center"
+                        ? "center"
+                        : "start"
+                      : "start",
                 marginTop:
                   settings.cfg.startpageType === "centered"
                     ? "30px"
                     : isMobile
-                    ? "0px"
-                    : "5px",
+                      ? "0px"
+                      : "5px",
                 maxWidth: isMobile
                   ? "100%"
                   : settings.cfg.startpageType === "centered"
-                  ? "700px"
-                  : isTablet &&
-                    settings.cfg.startpageType !== "expanded" &&
-                    settings.cfg.startpage.position !== "center"
-                  ? "380px"
-                  : "531px",
+                    ? "700px"
+                    : isTablet &&
+                      settings.cfg.startpageType !== "expanded" &&
+                      settings.cfg.startpage.position !== "center"
+                      ? "380px"
+                      : "531px",
               }}
             >
               <Typography
@@ -301,7 +303,7 @@ export const StartPageViewPublication = () => {
                   width: "100%",
                   textAlign:
                     settings.cfg.startpageType === "centered" ||
-                    settings.cfg.startpage.position === "center"
+                      settings.cfg.startpage.position === "center"
                       ? "center"
                       : "-moz-initial",
                   color:
@@ -322,7 +324,7 @@ export const StartPageViewPublication = () => {
                   width: "100%",
                   textAlign:
                     settings.cfg.startpageType === "centered" ||
-                    settings.cfg.startpage.position === "center"
+                      settings.cfg.startpage.position === "center"
                       ? "center"
                       : "-moz-initial",
                   color:
@@ -371,13 +373,13 @@ export const StartPageViewPublication = () => {
                   (settings.cfg.startpageType === "expanded" &&
                     settings.cfg.startpage.position === "center" &&
                     isMobile) ||
-                  (settings.cfg.startpageType === "centered" && isMobile)
+                    (settings.cfg.startpageType === "centered" && isMobile)
                     ? "center"
                     : "space-between",
                 width: "100%",
                 flexWrap:
                   settings.cfg.startpageType === "expanded" &&
-                  settings.cfg.startpage.position === "center"
+                    settings.cfg.startpage.position === "center"
                     ? isMobile
                       ? "wrap-reverse"
                       : "nowrap"
@@ -393,16 +395,16 @@ export const StartPageViewPublication = () => {
                   maxWidth: "300px",
                   display:
                     (settings.cfg.startpageType === "centered" && isMobile) ||
-                    (settings.cfg.startpageType === "expanded" &&
-                      settings.cfg.startpage.position === "center" &&
-                      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"
+                      settings.cfg.startpage.position === "center"
                       ? "2"
                       : "0",
                 }}
@@ -416,8 +418,8 @@ export const StartPageViewPublication = () => {
                       marginTop: "10px",
                       marginLeft:
                         settings.cfg.startpageType === "expanded" &&
-                        settings.cfg.startpage.position === "center" &&
-                        !isMobile
+                          settings.cfg.startpage.position === "center" &&
+                          !isMobile
                           ? "auto"
                           : undefined,
                     }}
@@ -428,13 +430,13 @@ export const StartPageViewPublication = () => {
                         fontSize: "16px",
                         textAlign:
                           settings.cfg.startpageType === "expanded" &&
-                          settings.cfg.startpage.position === "center" &&
-                          !isMobile
+                            settings.cfg.startpage.position === "center" &&
+                            !isMobile
                             ? "end" : settings.cfg.startpageType === "expanded" &&
                               settings.cfg.startpage.position === "center" &&
                               isMobile || settings.cfg.startpageType === "centered" &&
                               isMobile ? "center"
-                            : "start",
+                              : "start",
                         color: theme.palette.primary.main,
                         overflow: "hidden",
                         textOverflow: "ellipsis",
@@ -453,7 +455,7 @@ export const StartPageViewPublication = () => {
                           lineHeight: "19px",
                           textAlign:
                             settings.cfg.startpageType === "expanded" &&
-                            settings.cfg.startpage.position === "center"
+                              settings.cfg.startpage.position === "center"
                               ? "end"
                               : "none",
                           fontSize: "16px",
@@ -474,8 +476,8 @@ export const StartPageViewPublication = () => {
                         marginTop: "10px",
                         marginLeft:
                           settings.cfg.startpageType === "expanded" &&
-                          settings.cfg.startpage.position === "center" &&
-                          !isMobile
+                            settings.cfg.startpage.position === "center" &&
+                            !isMobile
                             ? "auto"
                             : undefined,
                       }}
@@ -484,7 +486,7 @@ export const StartPageViewPublication = () => {
                         sx={{
                           textAlign:
                             settings.cfg.startpageType === "expanded" &&
-                            settings.cfg.startpage.position === "center"
+                              settings.cfg.startpage.position === "center"
                               ? "end"
                               : "none",
                           fontSize: "16px",
@@ -505,7 +507,7 @@ export const StartPageViewPublication = () => {
                       lineHeight: "19px",
                       textAlign:
                         settings.cfg.startpageType === "expanded" &&
-                        settings.cfg.startpage.position === "center"
+                          settings.cfg.startpage.position === "center"
                           ? "end"
                           : "none",
                       fontSize: "16px",
@@ -528,16 +530,16 @@ export const StartPageViewPublication = () => {
                     fontSize: "12px",
                     textAlign:
                       settings.cfg.startpageType === "expanded" &&
-                      settings.cfg.startpage.position === "center" &&
-                      !isMobile
+                        settings.cfg.startpage.position === "center" &&
+                        !isMobile
                         ? "end"
                         : (settings.cfg.startpageType === "expanded" &&
-                            settings.cfg.startpage.position === "center" &&
-                            isMobile) ||
+                          settings.cfg.startpage.position === "center" &&
+                          isMobile) ||
                           (settings.cfg.startpageType === "centered" &&
                             isMobile)
-                        ? "center"
-                        : "none",
+                          ? "center"
+                          : "none",
                     maxHeight: "120px",
                     overflow: "auto",
                     marginTop: "10px",
diff --git a/lib/utils/hooks/metrics/useVkMetricsGoals.ts b/lib/utils/hooks/metrics/useVkMetricsGoals.ts
index 4e49e94..c14aa25 100644
--- a/lib/utils/hooks/metrics/useVkMetricsGoals.ts
+++ b/lib/utils/hooks/metrics/useVkMetricsGoals.ts
@@ -34,6 +34,9 @@ export const useVkMetricsGoals = (vkId: number | undefined) => {
     // Посетитель увидел результат
     resultShown: () =>
       sendMetrics(vkId, `penaquiz-finish`),
+    // Посетитель нажал на ссылку в результате
+    resultLink: () =>
+      sendMetrics(vkId, `penaquiz-resultlink`),
     // Посетитель дошёл до формы контактов
     contactsFormOpened: () => sendMetrics(vkId, "penaquiz-form"),
     // Посетитель заполнил форму контактов
diff --git a/lib/utils/hooks/metrics/useYandexMetricsGoals.ts b/lib/utils/hooks/metrics/useYandexMetricsGoals.ts
index a25e893..d450854 100644
--- a/lib/utils/hooks/metrics/useYandexMetricsGoals.ts
+++ b/lib/utils/hooks/metrics/useYandexMetricsGoals.ts
@@ -26,6 +26,9 @@ export const useYandexMetricsGoals = (id: number | undefined) => {
     // Посетитель увидел результат
     resultShown: () =>
       sendMetrics(id, `penaquiz-finish`),
+    // Посетитель нажал на ссылку в результате
+    resultLink: () =>
+      sendMetrics(id, `penaquiz-resultlink`),
     // Посетитель дошёл до формы контактов
     contactsFormOpened: () => sendMetrics(id, "penaquiz-form"),
     // Посетитель заполнил форму контактов