diff --git a/src/components/PaymentPage/results/SuccessPage/index.tsx b/src/components/PaymentPage/results/SuccessPage/index.tsx index 7f04405..6db0172 100644 --- a/src/components/PaymentPage/results/SuccessPage/index.tsx +++ b/src/components/PaymentPage/results/SuccessPage/index.tsx @@ -4,15 +4,19 @@ import routes from "@/routes"; import styles from "./styles.module.css"; import Title from "@/components/Title"; import MainButton from "@/components/MainButton"; -import { useDispatch } from "react-redux"; -import { actions } from "@/store"; +import { useDispatch, useSelector } from "react-redux"; +import { actions, selectors } from "@/store"; import { useEffect } from "react"; -import metricService, { EGoals } from "@/services/metric/metricService"; +import metricService, { + EGoals, + EMetrics, +} from "@/services/metric/metricService"; function PaymentSuccessPage(): JSX.Element { const { t } = useTranslation(); const navigate = useNavigate(); const dispatch = useDispatch(); + const currentProduct = useSelector(selectors.selectActiveProduct); const handleNext = () => { dispatch(actions.status.update("subscribed")); @@ -21,7 +25,11 @@ function PaymentSuccessPage(): JSX.Element { useEffect(() => { metricService.reachGoal(EGoals.PAYMENT_SUCCESS); - }, []); + metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], { + currency: "USD", + value: ((currentProduct?.trialPrice || 100) / 100).toFixed(2), + }); + }, [currentProduct?.trialPrice]); return (
diff --git a/src/services/metric/metricService.ts b/src/services/metric/metricService.ts index f26c52a..688f4cb 100644 --- a/src/services/metric/metricService.ts +++ b/src/services/metric/metricService.ts @@ -3,6 +3,7 @@ import { useExperiments } from "yandex-metrica-ab-react"; export enum EGoals { ENTERED_EMAIL = "EnteredEmail", PAYMENT_SUCCESS = "PaymentSuccess", + PURCHASE = "Purchase", ROSE_VIDEO_CREATION_START = 'RoseVideoCreationStart', ROSE_LOADING_START = "RoseLoadingStart", ROSE_VIDEO_CREATED = "RoseVideoCreated", @@ -25,6 +26,7 @@ export enum EFlags { export enum EMetrics { YANDEX = "Yandex", KLAVIYO = "Klaviyo", + FACEBOOK = "Facebook" } interface IUserParams { @@ -71,14 +73,17 @@ const userParams = (parameters: Partial) => { window.klaviyo.push(['identify', parameters]); } -const reachGoal = (goal: EGoals, usingMetrics = [EMetrics.KLAVIYO, EMetrics.YANDEX]) => { +const reachGoal = (goal: EGoals, usingMetrics = [EMetrics.KLAVIYO, EMetrics.YANDEX], options?: unknown) => { if (!checkIsAvailableYandexMetric()) return; - if (usingMetrics.includes(EMetrics.YANDEX)) window.ym(metricCounterNumber, "reachGoal", goal) + if (usingMetrics.includes(EMetrics.YANDEX)) window.ym(metricCounterNumber, "reachGoal", goal); console.log("goal: ", goal); if (!window.klaviyo) return console.error("Klaviyo.Metric not found"); if (usingMetrics.includes(EMetrics.KLAVIYO)) window.klaviyo.push(['track', goal]); + + if (!window.fbq) return console.error("Facebook.Metric not found"); + if (usingMetrics.includes(EMetrics.FACEBOOK)) window.fbq('track', goal, options); } type THitOptions = { diff --git a/src/types.ts b/src/types.ts index fc4183c..df36032 100644 --- a/src/types.ts +++ b/src/types.ts @@ -27,9 +27,12 @@ declare global { interface Window { // eslint-disable-next-line @typescript-eslint/no-explicit-any ym: any; + // eslint-disable-next-line @typescript-eslint/no-explicit-any ymab: any; // eslint-disable-next-line @typescript-eslint/no-explicit-any klaviyo: any; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + fbq: any; } }