Merge branch 'add-yandex-metric' into 'dev'

Add yandex metric

See merge request frontend/squzanswerer!117

lib/components/ViewPublicationPage/ViewPublicationPage.tsx

@@ -14,6 +14,7 @@ import { StartPageViewPublication } from "./StartPageViewPublication";
 import NextButton from "./tools/NextButton";
 import PrevButton from "./tools/PrevButton";
 import QuestionSelect from "./QuestionSelect";
+import {useYandexMetrica} from "@utils/hooks/useYandexMetrica.tsx";
 
 export default function ViewPublicationPage() {
     const { settings, recentlyCompleted, quizId, preview, changeFaviconAndTitle } = useQuizData();
@@ -32,6 +33,9 @@ export default function ViewPublicationPage() {
 
     const isAnswer = answers.some(ans => ans.questionId === currentQuestion?.id);
 
+    const yandexMetricNumber = settings?.cfg?.yandexMetricNumber
+    useYandexMetrica(yandexMetricNumber);
+
     useEffect(function setFaviconAndTitle() {
         if (!changeFaviconAndTitle) return;
 

lib/model/settingsData.ts

@@ -108,6 +108,7 @@ export interface QuizConfig {
     law?: string;
   };
   meta: string;
+  yandexMetricNumber: number | undefined;
 }
 
 export type FormContactFieldName =

lib/utils/hooks/useYandexMetrica.tsx

@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+
+export const useYandexMetrica = (yandexMetricNumber: number | undefined) => {
+    useEffect(() => {
+        if (yandexMetricNumber) {
+            const script = document.createElement("script");
+            script.type = "text/javascript";
+            script.innerHTML = `
+        (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(${yandexMetricNumber}, "init", {
+          clickmap:true,
+          trackLinks:true,
+          accurateTrackBounce:true,
+          webvisor:true
+        });
+      `;
+            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>`;
+            document.body.appendChild(noscript);
+        }
+    }, [yandexMetricNumber]);
+};