hotfix/fb-payment-success

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 (
     <section className={`${styles.page} page`}>

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

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