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

Merge branch 'hotfix/fb-payment-success' into 'main'

Browse Source 
hotfix/fb-payment-success

See merge request witapp/aura-webapp!283
This commit is contained in:
Daniil Chemerkin 2024-08-05 19:42:11 +00:00
commit 8bbf3e5010
3 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,15 +4,19 @@ import routes from "@/routes";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import Title from "@/components/Title"; import Title from "@/components/Title";
import MainButton from "@/components/MainButton"; import MainButton from "@/components/MainButton";
import { useDispatch } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { actions } from "@/store"; import { actions, selectors } from "@/store";
import { useEffect } from "react"; import { useEffect } from "react";
import metricService, { EGoals } from "@/services/metric/metricService"; import metricService, {
EGoals,
EMetrics,
} from "@/services/metric/metricService";
function PaymentSuccessPage(): JSX.Element { function PaymentSuccessPage(): JSX.Element {
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const dispatch = useDispatch(); const dispatch = useDispatch();
const currentProduct = useSelector(selectors.selectActiveProduct);
const handleNext = () => { const handleNext = () => {
dispatch(actions.status.update("subscribed")); dispatch(actions.status.update("subscribed"));
@ -21,7 +25,11 @@ function PaymentSuccessPage(): JSX.Element {
useEffect(() => { useEffect(() => {
metricService.reachGoal(EGoals.PAYMENT_SUCCESS); metricService.reachGoal(EGoals.PAYMENT_SUCCESS);
}, []); metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
currency: "USD",
value: ((currentProduct?.trialPrice || 100) / 100).toFixed(2),
});
}, [currentProduct?.trialPrice]);
return ( return (
<section className={`${styles.page} page`}> <section className={`${styles.page} page`}>

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

@ -3,6 +3,7 @@ import { useExperiments } from "yandex-metrica-ab-react";
export enum EGoals { export enum EGoals {
ENTERED_EMAIL = "EnteredEmail", ENTERED_EMAIL = "EnteredEmail",
PAYMENT_SUCCESS = "PaymentSuccess", PAYMENT_SUCCESS = "PaymentSuccess",
PURCHASE = "Purchase",
ROSE_VIDEO_CREATION_START = 'RoseVideoCreationStart', ROSE_VIDEO_CREATION_START = 'RoseVideoCreationStart',
ROSE_LOADING_START = "RoseLoadingStart", ROSE_LOADING_START = "RoseLoadingStart",
ROSE_VIDEO_CREATED = "RoseVideoCreated", ROSE_VIDEO_CREATED = "RoseVideoCreated",
@ -25,6 +26,7 @@ export enum EFlags {
export enum EMetrics { export enum EMetrics {
YANDEX = "Yandex", YANDEX = "Yandex",
KLAVIYO = "Klaviyo", KLAVIYO = "Klaviyo",
FACEBOOK = "Facebook"
} }
interface IUserParams { interface IUserParams {
@ -71,14 +73,17 @@ const userParams = (parameters: Partial<IUserParams>) => {
window.klaviyo.push(['identify', parameters]); 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 (!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); console.log("goal: ", goal);
if (!window.klaviyo) return console.error("Klaviyo.Metric not found"); if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
if (usingMetrics.includes(EMetrics.KLAVIYO)) window.klaviyo.push(['track', goal]); 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 = { type THitOptions = {

3
src/types.ts
View File

@ -27,9 +27,12 @@ declare global {
interface Window { interface Window {
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
ym: any; ym: any;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ymab: any; ymab: any;
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
klaviyo: any; klaviyo: any;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
fbq: any;
} }
} }