diff --git a/src/components/EmailEnterPage/index.tsx b/src/components/EmailEnterPage/index.tsx index b3f57bb..3b0d3ed 100755 --- a/src/components/EmailEnterPage/index.tsx +++ b/src/components/EmailEnterPage/index.tsx @@ -15,7 +15,7 @@ import { useAuthentication } from "@/hooks/authentication/use-authentication"; import { ESourceAuthorization } from "@/api/resources/User"; import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall"; import { usePaywall } from "@/hooks/paywall/usePaywall"; -import metricService from "@/services/metric/metricService"; +import metricService, { EGoals } from "@/services/metric/metricService"; interface IEmailEnterPage { redirectUrl?: string; @@ -89,7 +89,7 @@ function EmailEnterPage({ const handleClick = () => { authorize(); - metricService.reachGoal("EnteredEmail"); + metricService.reachGoal(EGoals.ENTERED_EMAIL); }; const authorize = async () => { diff --git a/src/components/PaymentPage/results/SuccessPage/index.tsx b/src/components/PaymentPage/results/SuccessPage/index.tsx index 38a5a72..9361d0b 100644 --- a/src/components/PaymentPage/results/SuccessPage/index.tsx +++ b/src/components/PaymentPage/results/SuccessPage/index.tsx @@ -7,7 +7,7 @@ import MainButton from "@/components/MainButton"; import { useDispatch } from "react-redux"; import { actions } from "@/store"; import { useEffect } from "react"; -import metricService from "@/services/metric/metricService"; +import metricService, { EGoals } from "@/services/metric/metricService"; function PaymentSuccessPage(): JSX.Element { const { t } = useTranslation(); @@ -20,7 +20,7 @@ function PaymentSuccessPage(): JSX.Element { }; useEffect(() => { - metricService.reachGoal("PaymentSuccess"); + metricService.reachGoal(EGoals.PAYMENT_SUCCESS); }, []); return ( diff --git a/src/components/pages/ABDesign/v1/pages/AllRight/index.tsx b/src/components/pages/ABDesign/v1/pages/AllRight/index.tsx index cc4e883..0e82152 100644 --- a/src/components/pages/ABDesign/v1/pages/AllRight/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/AllRight/index.tsx @@ -36,7 +36,7 @@ function AllRightPage() {
{animationData && ( -
+
{animationData && ( - + )}
diff --git a/src/components/pages/ABDesign/v1/pages/Both/index.tsx b/src/components/pages/ABDesign/v1/pages/Both/index.tsx index 9e0b85d..f382755 100644 --- a/src/components/pages/ABDesign/v1/pages/Both/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/Both/index.tsx @@ -41,7 +41,7 @@ function BothPage() {
{animationData && (
-
+
{animationData && ( )} diff --git a/src/components/pages/ABDesign/v1/pages/EmailEnterPage/index.tsx b/src/components/pages/ABDesign/v1/pages/EmailEnterPage/index.tsx index c41f480..fead4fd 100644 --- a/src/components/pages/ABDesign/v1/pages/EmailEnterPage/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/EmailEnterPage/index.tsx @@ -18,7 +18,7 @@ import { ESourceAuthorization } from "@/api/resources/User"; import { useAuthentication } from "@/hooks/authentication/use-authentication"; import { usePaywall } from "@/hooks/paywall/usePaywall"; import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall"; -import metricService from "@/services/metric/metricService"; +import metricService, { EGoals } from "@/services/metric/metricService"; import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; interface IEmailEnterPage { @@ -99,7 +99,7 @@ function EmailEnterPage({ const handleClick = () => { authorize(); - metricService.reachGoal("EnteredEmail"); + metricService.reachGoal(EGoals.ENTERED_EMAIL); }; const authorize = async () => { diff --git a/src/components/pages/ABDesign/v1/pages/GoalSetup/index.tsx b/src/components/pages/ABDesign/v1/pages/GoalSetup/index.tsx index 4a34a92..69c008f 100644 --- a/src/components/pages/ABDesign/v1/pages/GoalSetup/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/GoalSetup/index.tsx @@ -36,7 +36,7 @@ function GoalSetupPage() {
{animationData && ( {animationData && ( -
+
{animationData && ( - + )}
diff --git a/src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx b/src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx index 7f33704..447422c 100644 --- a/src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx @@ -10,6 +10,7 @@ import { EPlacementKeys } from "@/api/resources/Paywall"; import { usePersonalVideo } from "@/hooks/personalVideo/usePersonalVideo"; import { useSelector } from "react-redux"; import { selectors } from "@/store"; +import metricService, { EGoals } from "@/services/metric/metricService"; function OnboardingPage() { const navigate = useNavigate(); @@ -21,7 +22,9 @@ function OnboardingPage() { const progressInterval = useRef(); usePaywall({ placementKey: EPlacementKeys["aura.placement.redesign.main"] }); const { isVideoReady } = usePersonalVideo(); - const { createdDate } = useSelector(selectors.selectPersonalVideo); + const { createdDate, generatingVideo } = useSelector( + selectors.selectPersonalVideo + ); const handleNext = useCallback(() => { navigate(routes.client.trialChoiceV1()); @@ -66,6 +69,8 @@ function OnboardingPage() { useEffect(() => { progressInterval.current = setInterval(() => { setProgress((prev) => { + if (prev === 99 && generatingVideo) + [metricService.reachGoal(EGoals.ROSE_LOADING_END)]; if (prev >= 100) return prev; return prev + 1; }); @@ -73,7 +78,11 @@ function OnboardingPage() { return () => { if (progressInterval.current) clearInterval(progressInterval.current); }; - }, [getProgressIntervalTiming]); + }, [generatingVideo, getProgressIntervalTiming]); + + useEffect(() => { + metricService.reachGoal(EGoals.ROSE_LOADING_START); + }, []); return (
diff --git a/src/components/pages/ABDesign/v1/pages/PartnerRightPlace/index.tsx b/src/components/pages/ABDesign/v1/pages/PartnerRightPlace/index.tsx index 8b65722..02a7873 100644 --- a/src/components/pages/ABDesign/v1/pages/PartnerRightPlace/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/PartnerRightPlace/index.tsx @@ -45,7 +45,7 @@ function PartnerRightPlacePage() {
{animationData && ( {animationData && ( {animationData && ( -
+
{animationData && ( )} diff --git a/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx b/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx index 5510cf2..1be54ad 100644 --- a/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx @@ -29,7 +29,7 @@ function RelationshipAlmostTherePage() { classNameTitle={styles["header-title"]} isBackButtonVisible={false} /> -
+
{animationData && ( )} diff --git a/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx b/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx index 5277643..919c79f 100644 --- a/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx @@ -58,7 +58,7 @@ function Satisfied() { > {animationSun && ( {animationUmbrella && ( (({ url, gender }) => { setIsPlaying(false); }; + const onStart = () => { + metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_START); + }; + + const onEnded = () => { + metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_END); + }; + return ( -
+
{!isPlaying && !isError && } {isError && ( (({ url, gender }) => { playing={isPlaying} stopOnUnmount={true} width="100%" + onStart={onStart} onReady={() => setIsPlaying(true)} + onEnded={onEnded} onError={onError} playsinline={true} height={"auto"} diff --git a/src/components/pages/ABDesign/v1/pages/WithHead/index.tsx b/src/components/pages/ABDesign/v1/pages/WithHead/index.tsx index d7f2f36..6f070e7 100644 --- a/src/components/pages/ABDesign/v1/pages/WithHead/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/WithHead/index.tsx @@ -41,7 +41,7 @@ function WithHeadPage() {
{animationData && ( {animationData && ( { - metricService.reachGoal("PaymentSuccess"); + metricService.reachGoal(EGoals.PAYMENT_SUCCESS); }, []); return ( diff --git a/src/components/palmistry/step-email/step-email.tsx b/src/components/palmistry/step-email/step-email.tsx index bfcd90c..5981597 100644 --- a/src/components/palmistry/step-email/step-email.tsx +++ b/src/components/palmistry/step-email/step-email.tsx @@ -9,7 +9,7 @@ import Title from "@/components/Title"; import Loader, { LoaderColor } from "@/components/Loader"; import { useAuthentication } from "@/hooks/authentication/use-authentication"; import { ESourceAuthorization } from "@/api/resources/User"; -import metricService from "@/services/metric/metricService"; +import metricService, { EGoals } from "@/services/metric/metricService"; const emailRegex = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; @@ -44,7 +44,7 @@ export default function StepEmail() { const authorize = async () => { await authorization(email, ESourceAuthorization["aura.palmistry"]); - metricService.reachGoal("EnteredEmail"); + metricService.reachGoal(EGoals.ENTERED_EMAIL); setIsAuth(true); }; diff --git a/src/hooks/authentication/use-authentication.ts b/src/hooks/authentication/use-authentication.ts index 4c6d889..b2f822d 100644 --- a/src/hooks/authentication/use-authentication.ts +++ b/src/hooks/authentication/use-authentication.ts @@ -4,6 +4,7 @@ import { useAuth } from "@/auth"; import { getClientTimezone } from "@/locales"; import { getDateAsString } from "@/services/date"; import { filterNullKeysOfObject } from "@/services/filter-object"; +import metricService, { EGoals } from "@/services/metric/metricService"; import { actions, selectors } from "@/store"; import moment from "moment"; import { useCallback, useMemo, useState } from "react"; @@ -124,6 +125,7 @@ export const useAuthentication = () => { const { user } = await api.getUser({ token }); if (userId?.length && !!window.ym && typeof window.ym === 'function') { window.ym(95799066, 'userParams', { + hasPersonalVideo: generatingVideo || false, email: user.email, UserID: userId }) @@ -131,8 +133,11 @@ export const useAuthentication = () => { } signUp(token, user); setToken(token); - + dispatch(actions.personalVideo.updateStatus({ generatingVideo: generatingVideo || false, videoId: videoId || "" })); + if (generatingVideo) { + metricService.reachGoal(EGoals.ROSE_VIDEO_CREATION_START) + } dispatch(actions.status.update("registred")); } catch (error) { setError((error as Error).message); diff --git a/src/hooks/personalVideo/usePersonalVideo.ts b/src/hooks/personalVideo/usePersonalVideo.ts index 1655bc5..7503aec 100644 --- a/src/hooks/personalVideo/usePersonalVideo.ts +++ b/src/hooks/personalVideo/usePersonalVideo.ts @@ -1,4 +1,5 @@ import { useApi } from "@/api"; +import metricService, { EGoals } from "@/services/metric/metricService"; import { actions, selectors } from "@/store"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; @@ -43,6 +44,7 @@ export const usePersonalVideo = () => { const video = await getTargetUserVideo(); if (!video) return setIsVideoReady(true); if (video.videoUrl.length) { + metricService.reachGoal(EGoals.ROSE_VIDEO_CREATED) dispatch(actions.personalVideo.updateUrl(video.videoUrl)); return setIsVideoReady(true); } diff --git a/src/services/metric/metricService.ts b/src/services/metric/metricService.ts index d48081a..ad28a2f 100644 --- a/src/services/metric/metricService.ts +++ b/src/services/metric/metricService.ts @@ -1,3 +1,16 @@ +export enum EGoals { + ENTERED_EMAIL = "EnteredEmail", + PAYMENT_SUCCESS = "PaymentSuccess", + ROSE_VIDEO_CREATION_START = 'RoseVideoCreationStart', + ROSE_LOADING_START = "RoseLoadingStart", + ROSE_VIDEO_CREATED = "RoseVideoCreated", + ROSE_LOADING_END = "RoseLoadingEnd", + ROSE_VIDEO_PLAY_START = "RoseVideoPlayStart", + ROSE_VIDEO_PLAY_END = "RoseVideoPlayEnd", + ROSE_VIDEO_PLAY_USER_STOP = "RoseVideoPlayUserStop", + ROSE_VIDEO_PLAY_USER_PLAY = "RoseVideoPlayUserPlay" +} + interface IUserParams { UserID: number; genderFrom: string; @@ -21,7 +34,7 @@ const userParams = (parameters: Partial) => { // eslint-disable-next-line react-hooks/exhaustive-deps } -const reachGoal = (goal: "EnteredEmail" | "PaymentSuccess") => { +const reachGoal = (goal: EGoals) => { if (typeof window.ym !== "function") return console.error("Yandex.Metric not found"); window.ym(metricCounterNumber, "reachGoal", goal)