Merge branch 'AW-123-yandex-metric' into 'develop'

AW-123-yandex-metric

See merge request witapp/aura-webapp!205

src/components/App/index.tsx

@@ -121,6 +121,7 @@ import LoadingPage from "../pages/LoadingPage";
 import { EProductKeys, productUrls } from "@/data/products";
 import SinglePaymentPage from "../pages/SinglePaymentPage";
 import ABDesignV1Routes from "@/routerComponents/ABDesign/v1";
+import metricService from "@/services/metric/metricService";
 
 const isProduction = import.meta.env.MODE === "production";
 
@@ -129,6 +130,7 @@ if (isProduction) {
 }
 
 function App(): JSX.Element {
+  const location = useLocation();
   const [isSpecialOfferOpen, setIsSpecialOfferOpen] = useState<boolean>(false);
   const [leoApng, setLeoApng] = useState<Error | APNG>(Error);
   const [padLockApng, setPadLockApng] = useState<Error | APNG>(Error);
@@ -161,6 +163,10 @@ function App(): JSX.Element {
   const birthdate = user?.profile?.birthday || birthdateFromStore;
   const birthPlace = user?.profile?.birthplace || birthPlaceFromStore;
 
+  useEffect(() => {
+    metricService.hit()
+  }, [location]);
+
   useLayoutEffect(() => {
     dispatch(actions.paywalls.resetIsMustUpdate());
   }, [dispatch]);

src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx

@@ -14,6 +14,7 @@ import { usePaywall } from "@/hooks/paywall/usePaywall";
 import { EPlacementKeys } from "@/api/resources/Paywall";
 import { getRandomArbitrary } from "@/services/random-value";
 import Loader from "@/components/Loader";
+import metricService, { EGoals } from "@/services/metric/metricService";
 
 function TrialChoicePage() {
   const dispatch = useDispatch();
@@ -38,6 +39,7 @@ function TrialChoicePage() {
   }, [countUsers]);
 
   const handlePriceItem = () => {
+    metricService.reachGoal(EGoals.AURA_SELECT_TRIAL);
     setIsDisabled(false);
   };
 

src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx

@@ -40,9 +40,7 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(
     };
 
     return (
-      <div
-        className={`${styles.container} ym-hide-content ${classNameContainer}`}
-      >
+      <div className={`${styles.container} ${classNameContainer}`}>
         {!isPlaying && !isError && !isStarted && (
           <Loader className={styles.loader} />
         )}

src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx

@@ -25,6 +25,7 @@ import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
 import { usePaywall } from "@/hooks/paywall/usePaywall";
 import PaymentModal from "@/components/PaymentModal";
 import PersonalVideo from "./components/PersonalVideo";
+import metricService, { EGoals } from "@/services/metric/metricService";
 
 function TrialPaymentPage() {
   const dispatch = useDispatch();
@@ -105,6 +106,7 @@ function TrialPaymentPage() {
   };
 
   const openStripeModal = () => {
+    metricService.reachGoal(EGoals.AURA_PAYMENT_METHODS_OPENED);
     setIsOpenPaymentModal(true);
   };
 

src/components/pages/TrialChoice/index.tsx

@@ -10,6 +10,7 @@ import MainButton from "@/components/MainButton";
 import { usePaywall } from "@/hooks/paywall/usePaywall";
 import { EPlacementKeys } from "@/api/resources/Paywall";
 import { getRandomArbitrary } from "@/services/random-value";
+import metricService, { EGoals } from "@/services/metric/metricService";
 
 function TrialChoicePage() {
   const dispatch = useDispatch();
@@ -33,6 +34,7 @@ function TrialChoicePage() {
   });
 
   const handlePriceItem = () => {
+    metricService.reachGoal(EGoals.AURA_SELECT_TRIAL);
     setIsDisabled(false);
   };
 

src/components/pages/TrialPayment/index.tsx

@@ -21,6 +21,7 @@ import { trialPaymentPointsList } from "@/data/pointsLists";
 import { trialPaymentReviews } from "@/data/reviews";
 import { usePaywall } from "@/hooks/paywall/usePaywall";
 import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
+import metricService, { EGoals } from "@/services/metric/metricService";
 
 function TrialPaymentPage() {
   const dispatch = useDispatch();
@@ -102,6 +103,7 @@ function TrialPaymentPage() {
   };
 
   const openStripeModal = () => {
+    metricService.reachGoal(EGoals.AURA_PAYMENT_METHODS_OPENED);
     setIsOpenPaymentModal(true);
   };
 

src/services/metric/metricService.ts

@@ -8,7 +8,9 @@ export enum EGoals {
     ROSE_VIDEO_PLAY_START = "RoseVideoPlayStart",
     ROSE_VIDEO_PLAY_END = "RoseVideoPlayEnd",
     ROSE_VIDEO_PLAY_USER_STOP = "RoseVideoPlayUserStop",
-    ROSE_VIDEO_PLAY_USER_PLAY = "RoseVideoPlayUserPlay"
+    ROSE_VIDEO_PLAY_USER_PLAY = "RoseVideoPlayUserPlay",
+    AURA_PAYMENT_METHODS_OPENED = "AuraPaymentMethodsOpened",
+    AURA_SELECT_TRIAL = "AuraSelectTrial"
 }
 
 interface IUserParams {
@@ -36,11 +38,27 @@ const userParams = (parameters: Partial<IUserParams>) => {
 
 const reachGoal = (goal: EGoals) => {
     if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
-
     window.ym(metricCounterNumber, "reachGoal", goal)
+    console.log("goal: ", goal);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
 }
 
+type THitOptions = {
+    callback: () => void;
+    ctx: object;
+    params: {
+        order_price: number;
+        currency: string;
+    },
+    referer: string;
+    title: string;
+}
+
+const hit = (url?: string, options?: THitOptions) => {
+    window.ym(metricCounterNumber, "hit", url, options);
+}
+
 const initMetric = () => {
     if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
 
@@ -55,4 +73,4 @@ const initMetric = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
 }
 
-export default { setUserID, userParams, reachGoal, initMetric }
+export default { setUserID, userParams, reachGoal, hit, initMetric }