From 7d2754abf014ba8ab532aa7af43a38355471a0e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=9A=D0=B0=D1=82=D0=B0?=
 =?UTF-8?q?=D0=B5=D0=B2?= <itkataev@gmail.com>
Date: Tue, 9 Jul 2024 13:23:48 +0000
Subject: [PATCH] AW-106-klaviyo-metric

---
 index.html                                    | 64 +++++++++++++++++++
 .../authentication/use-authentication.ts      |  6 +-
 src/services/metric/metricService.ts          | 34 +++++++---
 src/types.ts                                  |  2 +
 4 files changed, 93 insertions(+), 13 deletions(-)
diff --git a/index.html b/index.html
index 1da3385..640aea6 100755
--- a/index.html
+++ b/index.html
@@ -44,6 +44,70 @@
     </style>
   </head>
   <body>
+    <!-- Klaviyo Metric -->
+    <script type="module">
+      const klaviyoKeys = {
+        develop: "RM7w5r",
+        production: "Si7Jff",
+      };
+      const script = document.createElement("script");
+      script.src = `https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=${
+        klaviyoKeys[import.meta.env.MODE]
+      }`;
+      script.type = "text/javascript";
+      script.async = "";
+      document.head.appendChild(script);
+    </script>
+    <script>
+      !(function () {
+        if (!window.klaviyo) {
+          window._klOnsite = window._klOnsite || [];
+          try {
+            window.klaviyo = new Proxy(
+              {},
+              {
+                get: function (n, i) {
+                  return "push" === i
+                    ? function () {
+                        var n;
+                        (n = window._klOnsite).push.apply(n, arguments);
+                      }
+                    : function () {
+                        for (
+                          var n = arguments.length, o = new Array(n), w = 0;
+                          w < n;
+                          w++
+                        )
+                          o[w] = arguments[w];
+                        var t =
+                            "function" == typeof o[o.length - 1]
+                              ? o.pop()
+                              : void 0,
+                          e = new Promise(function (n) {
+                            window._klOnsite.push(
+                              [i].concat(o, [
+                                function (i) {
+                                  t && t(i), n(i);
+                                },
+                              ])
+                            );
+                          });
+                        return e;
+                      };
+                },
+              }
+            );
+          } catch (n) {
+            (window.klaviyo = window.klaviyo || []),
+              (window.klaviyo.push = function () {
+                var n;
+                (n = window._klOnsite).push.apply(n, arguments);
+              });
+          }
+        }
+      })();
+    </script>
+    <!-- Klaviyo Metric -->
     <!-- Yandex.Metrika counter -->
     <script type="text/javascript">
       (function (m, e, t, r, i, k, a) {
diff --git a/src/hooks/authentication/use-authentication.ts b/src/hooks/authentication/use-authentication.ts
index 0cbeb7a..8c5da4d 100644
--- a/src/hooks/authentication/use-authentication.ts
+++ b/src/hooks/authentication/use-authentication.ts
@@ -125,13 +125,13 @@ export const useAuthentication = () => {
             const payload = getAuthorizationPayload(email, source);
             const { token, userId, generatingVideo, videoId } = await api.authorization(payload);
             const { user } = await api.getUser({ token });
-            if (userId?.length && !!window.ym && typeof window.ym === 'function') {
-                window.ym(95799066, 'userParams', {
+            if (userId?.length) {
+                metricService.userParams({
                     hasPersonalVideo: generatingVideo || false,
                     email: user.email,
                     UserID: userId
                 })
-                window.ym(95799066, 'setUserID', userId);
+                metricService.setUserID(userId);
             }
             signUp(token, user);
             setToken(token);
diff --git a/src/services/metric/metricService.ts b/src/services/metric/metricService.ts
index 7de7065..ce8174e 100644
--- a/src/services/metric/metricService.ts
+++ b/src/services/metric/metricService.ts
@@ -14,34 +14,47 @@ export enum EGoals {
 }
 
 interface IUserParams {
-    UserID: number;
+    UserID: number | string;
     genderFrom: string;
     email: string;
+    hasPersonalVideo: boolean;
 }
 
 const environments = import.meta.env
 const metricCounterNumber = Number(environments.AURA_YANDEX_COUNTER_NUMBER)
 
-const setUserID = (userId: string) => {
-    if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
+const checkIsAvailableYandexMetric = () => {
+    if (typeof window.ym !== "function") {
+        console.error("Yandex.Metric not found")
+        return false
+    }
+    return true
+}
 
+const setUserID = (userId: string) => {
+    if (!checkIsAvailableYandexMetric()) return;
     window.ym(metricCounterNumber, "setUserID", userId)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+    if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
+    window.klaviyo.push(['identify', userId]);
 }
 
 const userParams = (parameters: Partial<IUserParams>) => {
-    if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
-
+    if (!checkIsAvailableYandexMetric()) return;
     window.ym(metricCounterNumber, "userParams", parameters)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+    if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
+    window.klaviyo.push(['identify', parameters]);
 }
 
 const reachGoal = (goal: EGoals) => {
-    if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
+    if (!checkIsAvailableYandexMetric()) return;
+
     window.ym(metricCounterNumber, "reachGoal", goal)
     console.log("goal: ", goal);
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
+    window.klaviyo.push(['track', goal]);
 }
 
 type THitOptions = {
@@ -56,11 +69,12 @@ type THitOptions = {
 }
 
 const hit = (url?: string, options?: THitOptions) => {
+    if (!checkIsAvailableYandexMetric()) return;
     window.ym(metricCounterNumber, "hit", url, options);
 }
 
 const initMetric = () => {
-    if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
+    if (!checkIsAvailableYandexMetric()) return;
 
     window.ym(metricCounterNumber, "init", {
         clickmap: true,
diff --git a/src/types.ts b/src/types.ts
index 6adc00a..fa1ecd6 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -27,6 +27,8 @@ declare global {
   interface Window {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ym: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    klaviyo: any;
   }
 }
 
