hotfix/clarity

package-lock.json

@@ -11,6 +11,7 @@
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
         "@lottiefiles/dotlottie-react": "^0.6.4",
+        "@microsoft/clarity": "^1.0.0",
         "@mui/material": "^5.15.21",
         "@reduxjs/toolkit": "^1.9.5",
         "@smakss/react-scroll-direction": "^4.0.4",
@@ -1181,6 +1182,11 @@
         "node-pre-gyp": "bin/node-pre-gyp"
       }
     },
+    "node_modules/@microsoft/clarity": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/clarity/-/clarity-1.0.0.tgz",
+      "integrity": "sha512-2QY6SmXnqRj6dWhNY8NYCN3e53j4zCFebH4wGnNhdGV1mqAsQwql2fT0w8TISxCvwwfVp8idsWLIdrRHOms1PQ=="
+    },
     "node_modules/@mui/base": {
       "version": "5.0.0-beta.40",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
@@ -6255,6 +6261,11 @@
         "tar": "^6.1.11"
       }
     },
+    "@microsoft/clarity": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/clarity/-/clarity-1.0.0.tgz",
+      "integrity": "sha512-2QY6SmXnqRj6dWhNY8NYCN3e53j4zCFebH4wGnNhdGV1mqAsQwql2fT0w8TISxCvwwfVp8idsWLIdrRHOms1PQ=="
+    },
     "@mui/base": {
       "version": "5.0.0-beta.40",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",

package.json

@@ -18,6 +18,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@lottiefiles/dotlottie-react": "^0.6.4",
+    "@microsoft/clarity": "^1.0.0",
     "@mui/material": "^5.15.21",
     "@reduxjs/toolkit": "^1.9.5",
     "@smakss/react-scroll-direction": "^4.0.4",

src/init.tsx

@@ -21,6 +21,7 @@ import metricService from "./services/metric/metricService";
 import "core-js/actual";
 import { pdfjs } from "react-pdf";
 import HeadData from "./utils/Helmet";
+import Clarity from '@microsoft/clarity';
 
 pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`;
 
@@ -73,6 +74,10 @@ const init = async () => {
     smartLook();
   }
 
+  const projectId = "pez69dq3lh"
+
+  Clarity.init(projectId);
+
   // const googleManager = () => {
   //   const script = document.createElement("script");
   //   script.setAttribute("src", "/metrics/google-manager.js");

src/services/metric/metricService.ts

@@ -1,3 +1,4 @@
+import Clarity from "@microsoft/clarity";
 import { useExperiments } from "yandex-metrica-ab-react";
 
 export enum EGoals {
@@ -63,14 +64,19 @@ const checkIsAvailableYandexMetricAB = () => {
 const setUserID = (userId: string) => {
     if (!checkIsAvailableYandexMetric()) return;
     window.ym(metricCounterNumber, "setUserID", userId)
-
+    Clarity.identify(userId);
     if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
     window.klaviyo.push(['identify', userId]);
 }
 
 const userParams = (parameters: Partial<IUserParams>) => {
-    if (!checkIsAvailableYandexMetric()) return;
+    if (checkIsAvailableYandexMetric()) {
-    window.ym(metricCounterNumber, "userParams", parameters)
+        window.ym(metricCounterNumber, "userParams", parameters)
+    }
+
+    Object.entries(parameters).forEach(([key, value]) => {
+        Clarity.setTag(key, String(value));
+    });
 
     if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
     window.klaviyo.push(['identify', parameters]);
@@ -84,7 +90,8 @@ const reachGoal = (goal: EGoals, usingMetrics = [EMetrics.KLAVIYO, EMetrics.YAND
             console.error("Yandex.Metric not found")
         } else {
             window.ym(metricCounterNumber, "reachGoal", goal)
-            console.log("goalYM: ", goal);
+            Clarity.event(goal);
+            console.log("goalYM&Clarity: ", goal);
         }
     }