diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 94b8f75..cccd30f 100755 --- a/src/components/App/index.tsx +++ b/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(false); const [leoApng, setLeoApng] = useState(Error); const [padLockApng, setPadLockApng] = useState(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]); diff --git a/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx index 03b7c99..6a66a0d 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialChoice/index.tsx +++ b/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); }; diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx index 8e41cdb..80867ff 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo/index.tsx @@ -40,9 +40,7 @@ const PersonalVideo = React.memo( }; return ( -
+
{!isPlaying && !isError && !isStarted && ( )} diff --git a/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx b/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx index aea17d1..b986db9 100644 --- a/src/components/pages/ABDesign/v1/pages/TrialPayment/index.tsx +++ b/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); }; diff --git a/src/components/pages/TrialChoice/index.tsx b/src/components/pages/TrialChoice/index.tsx index 257cf30..670d2a7 100755 --- a/src/components/pages/TrialChoice/index.tsx +++ b/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); }; diff --git a/src/components/pages/TrialPayment/index.tsx b/src/components/pages/TrialPayment/index.tsx index 8882b47..48bf730 100755 --- a/src/components/pages/TrialPayment/index.tsx +++ b/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); }; diff --git a/src/services/metric/metricService.ts b/src/services/metric/metricService.ts index ad28a2f..7de7065 100644 --- a/src/services/metric/metricService.ts +++ b/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) => { 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 } \ No newline at end of file +export default { setUserID, userParams, reachGoal, hit, initMetric } \ No newline at end of file