diff --git a/package-lock.json b/package-lock.json index a6101a4..95d9054 100755 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 2a0081f..d64f37f 100755 --- a/package.json +++ b/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", diff --git a/src/init.tsx b/src/init.tsx index a077d66..162046c 100755 --- a/src/init.tsx +++ b/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"); diff --git a/src/services/metric/metricService.ts b/src/services/metric/metricService.ts index 516012a..537325c 100644 --- a/src/services/metric/metricService.ts +++ b/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) => { - if (!checkIsAvailableYandexMetric()) return; - window.ym(metricCounterNumber, "userParams", parameters) + if (checkIsAvailableYandexMetric()) { + 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); } }