gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hide-lottie-from-yandex

Browse Source 
hide lottie from webvisor, add reachGoals
This commit is contained in:
gofnnp 2024-06-25 02:23:56 +04:00
parent 98735276c4
commit 98702c8fcf
26 changed files with 77 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/EmailEnterPage/index.tsx
View File

@ -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 () => {

4
src/components/PaymentPage/results/SuccessPage/index.tsx
View File

@ -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 (

2
src/components/pages/ABDesign/v1/pages/AllRight/index.tsx
View File

@ -36,7 +36,7 @@ function AllRightPage() {
<div className={styles.circle}>
{animationData && (
<DotLottieReact
className={styles["lottie-animation"]}
className={`${styles["lottie-animation"]} ym-hide-content`}
data={animationData}
autoplay
loop={false}

8
src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx
View File

@ -30,13 +30,9 @@ function AlmostTherePage() {
isBackButtonVisible={false}
classNameTitle={styles["header-title"]}
/>
<div className={styles["lottie-animation"]}>
<div className={`${styles["lottie-animation"]} ym-hide-content`}>
{animationData && (
<DotLottieReact
data={animationData}
autoplay
loop={false}
/>
<DotLottieReact data={animationData} autoplay loop={false} />
)}
</div>
<div></div>

2
src/components/pages/ABDesign/v1/pages/Both/index.tsx
View File

@ -41,7 +41,7 @@ function BothPage() {
<div className={styles["image-container"]}>
{animationData && (
<DotLottieReact
className={styles["lottie-animation"]}
className={`${styles["lottie-animation"]} ym-hide-content`}
data={animationData}
autoplay
loop={false}

2
src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx
View File

@ -30,7 +30,7 @@ function EmailConfirmPage() {
/>
<Header className={styles.header} />
<div className={styles["top-section"]}>
<div className={styles["lottie-animation"]}>
<div className={`${styles["lottie-animation"]} ym-hide-content`}>
{animationData && (
<DotLottieReact data={animationData} autoplay loop={false} />
)}

4
src/components/pages/ABDesign/v1/pages/EmailEnterPage/index.tsx
View File

@ -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 () => {

2
src/components/pages/ABDesign/v1/pages/GoalSetup/index.tsx
View File

@ -36,7 +36,7 @@ function GoalSetupPage() {
<div className={styles["image-container"]}>
{animationData && (
<DotLottieReact
className={styles["lottie-animation"]}
className={`${styles["lottie-animation"]} ym-hide-content`}
data={animationData}
autoplay
loop={false}

2
src/components/pages/ABDesign/v1/pages/NoBirthtime/index.tsx
View File

@ -45,7 +45,7 @@ function NoBirthtimePage() {
<div className={styles.ellipse}>
{animationData && (
<DotLottieReact
className={styles["lottie-animation"]}
className={`${styles["lottie-animation"]} ym-hide-content`}
data={animationData}
autoplay
loop={false}

4
src/components/pages/ABDesign/v1/pages/NoBirthtime/styles.module.css
View File

@ -76,4 +76,8 @@
top: 0;
left: 0;
z-index: 0;
}
.lottie-animation {
aspect-ratio: 1 / 1;
}

8
src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx
View File

@ -33,13 +33,9 @@ function NotAlonePage() {
isBackButtonVisible={false}
classNameTitle={styles["header-title"]}
/>
<div className={styles["lottie-animation"]}>
<div className={`${styles["lottie-animation"]} ym-hide-content`}>
{animationData && (
<DotLottieReact
data={animationData}
autoplay
loop={false}
/>
<DotLottieReact data={animationData} autoplay loop={false} />
)}
</div>
<div>

13
src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx
View File

@ -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<NodeJS.Timeout>();
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 (
<section className={`${styles.page} page`}>

2
src/components/pages/ABDesign/v1/pages/PartnerRightPlace/index.tsx
View File

@ -45,7 +45,7 @@ function PartnerRightPlacePage() {
<div className={styles.circle}>
{animationData && (
<DotLottieReact
className={styles["lottie-animation"]}
className={`${styles["lottie-animation"]} ym-hide-content`}
data={animationData}
autoResizeCanvas={true}
autoplay

2
src/components/pages/ABDesign/v1/pages/PartnerThing/index.tsx
View File

@ -45,7 +45,7 @@ function PartnerThingPage() {
<div className={styles.circle}>
{animationData && (
<DotLottieReact
className={styles["lottie-animation"]}
className={`${styles["lottie-animation"]} ym-hide-content`}
data={animationData}
autoplay
loop={false}

2
src/components/pages/ABDesign/v1/pages/PartnerTotallyNormal/index.tsx
View File

@ -45,7 +45,7 @@ function PartnerTotallyNormalPage() {
<div className={styles.circle}>
{animationData && (
<DotLottieReact
className={styles["lottie-animation"]}
className={`${styles["lottie-animation"]} ym-hide-content`}
data={animationData}
autoplay
loop={false}

2
src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx
View File

@ -49,7 +49,7 @@ function QuestionnaireIntermediatePage() {
isBackButtonVisible={false}
classNameTitle={styles["header-title"]}
/>
<div className={styles["lottie-animation"]}>
<div className={`${styles["lottie-animation"]} ym-hide-content`}>
{animationData && (
<DotLottieReact data={animationData} autoplay loop={false} />
)}

2
src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx
View File

@ -29,7 +29,7 @@ function RelationshipAlmostTherePage() {
classNameTitle={styles["header-title"]}
isBackButtonVisible={false}
/>
<div className={styles["lottie-animation"]}>
<div className={`${styles["lottie-animation"]} ym-hide-content`}>
{animationData && (
<DotLottieReact data={animationData} autoplay loop={false} />
)}

4
src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx
View File

@ -58,7 +58,7 @@ function Satisfied() {
>
{animationSun && (
<DotLottieReact
className={styles["lottie-animation"]}
className={`${styles["lottie-animation"]} ym-hide-content`}
data={animationSun}
autoplay
loop={false}
@ -75,7 +75,7 @@ function Satisfied() {
>
{animationUmbrella && (
<DotLottieReact
className={styles["lottie-animation"]}
className={`${styles["lottie-animation"]} ym-hide-content`}
data={animationUmbrella}
autoplay
loop={false}

13
src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx
View File

@ -3,6 +3,7 @@ import ReactPlayer from "react-player";
import styles from "./styles.module.css";
import Loader from "@/components/Loader";
import PlayButton from "../../../../ui/PlayButton";
import metricService, { EGoals } from "@/services/metric/metricService";
interface IPersonalVideoProps {
gender: string;
@ -19,8 +20,16 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
setIsPlaying(false);
};
const onStart = () => {
metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_START);
};
const onEnded = () => {
metricService.reachGoal(EGoals.ROSE_VIDEO_PLAY_END);
};
return (
<div className={styles.container}>
<div className={`${styles.container} ym-hide-content`}>
{!isPlaying && !isError && <Loader className={styles.loader} />}
{isError && (
<PlayButton
@ -40,7 +49,9 @@ const PersonalVideo = React.memo<IPersonalVideoProps>(({ url, gender }) => {
playing={isPlaying}
stopOnUnmount={true}
width="100%"
onStart={onStart}
onReady={() => setIsPlaying(true)}
onEnded={onEnded}
onError={onError}
playsinline={true}
height={"auto"}

2
src/components/pages/ABDesign/v1/pages/WithHead/index.tsx
View File

@ -41,7 +41,7 @@ function WithHeadPage() {
<div className={styles["image-container"]}>
{animationData && (
<DotLottieReact
className={styles["lottie-animation"]}
className={`${styles["lottie-animation"]} ym-hide-content`}
data={animationData}
autoplay
loop={false}

2
src/components/pages/ABDesign/v1/pages/WithHeart/index.tsx
View File

@ -41,7 +41,7 @@ function WithHeartPage() {
<div className={styles["image-container"]}>
{animationData && (
<DotLottieReact
className={styles["lottie-animation"]}
className={`${styles["lottie-animation"]} ym-hide-content`}
data={animationData}
autoplay
loop={false}

4
src/components/pages/SinglePaymentPage/ResultPayment/SuccessPaymentPage/index.tsx
View File

@ -5,7 +5,7 @@ import MainButton from "@/components/MainButton";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { useEffect } from "react";
import metricService from "@/services/metric/metricService";
import metricService, { EGoals } from "@/services/metric/metricService";
function SuccessPaymentPage(): JSX.Element {
const { t } = useTranslation();
@ -16,7 +16,7 @@ function SuccessPaymentPage(): JSX.Element {
: "The information has been sent to your email";
useEffect(() => {
metricService.reachGoal("PaymentSuccess");
metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
}, []);
return (

4
src/components/palmistry/step-email/step-email.tsx
View File

@ -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);
};

7
src/hooks/authentication/use-authentication.ts
View File

@ -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);

2
src/hooks/personalVideo/usePersonalVideo.ts
View File

@ -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);
}

15
src/services/metric/metricService.ts
View File

@ -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<IUserParams>) => {
// 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)