w-aura/src/services/metric/metricService.ts

import { useExperiments } from "yandex-metrica-ab-react";

export enum EGoals {
    ENTERED_EMAIL = "EnteredEmail",
    LEAD = "Lead",
    PAYMENT_SUCCESS = "PaymentSuccess",
    PURCHASE = "Purchase",
    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",
    AURA_PAYMENT_METHODS_OPENED = "AuraPaymentMethodsOpened",
    AURA_SELECT_TRIAL = "AuraSelectTrial",
    AURA_TRIAL_CHOICE_PAGE_VISIT = "AuraTrialChoicePageVisit",
    AURA_TRIAL_PAYMENT_PAGE_VISIT = "AuraTrialPaymentPageVisit",
    PAYMENT_SUCCESS_PALMISTRY = "PaymentSuccessPalmistry",
    ENTER_EMAIL_PALMISTRY = "EnterEmailPalmistry"
}

export enum EFlags {
    isNextPageMentioned = 'Go to page mentionedIn',
    aboutUsAnswers = 'Key for aboutUsAnswers'
}

export enum EMetrics {
    YANDEX = "Yandex",
    KLAVIYO = "Klaviyo",
    FACEBOOK = "Facebook"
}

interface IUserParams {
    UserID: number | string;
    genderFrom: string;
    email: string;
    hasPersonalVideo: boolean;
    gender: string;
    age: number;
}

const environments = import.meta.env
const metricCounterNumber = Number(environments.AURA_YANDEX_COUNTER_NUMBER)

const checkIsAvailableYandexMetric = () => {
    if (typeof window.ym !== "function") {
        console.error("Yandex.Metric not found")
        return false
    }
    return true
}

const checkIsAvailableYandexMetricAB = () => {
    if (typeof window.ymab !== "function") {
        console.error("Yandex.Metric not found")
        return false
    }
    return true
}

const setUserID = (userId: string) => {
    if (!checkIsAvailableYandexMetric()) return;
    window.ym(metricCounterNumber, "setUserID", userId)

    if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
    window.klaviyo.push(['identify', userId]);
}

const userParams = (parameters: Partial<IUserParams>) => {
    if (!checkIsAvailableYandexMetric()) return;
    window.ym(metricCounterNumber, "userParams", parameters)

    if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
    window.klaviyo.push(['identify', parameters]);
}

const reachGoal = (goal: EGoals, usingMetrics = [EMetrics.KLAVIYO, EMetrics.YANDEX], options?: unknown) => {
    if (!checkIsAvailableYandexMetric()) return;

    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 (goal === EGoals.ENTERED_EMAIL) {
        if (usingMetrics.includes(EMetrics.FACEBOOK)) window.fbq('track', EGoals.LEAD, options);
    }

    if (usingMetrics.includes(EMetrics.FACEBOOK)) window.fbq('track', goal, options);
}

type THitOptions = {
    callback: () => void;
    ctx: object;
    params: {
        order_price: number;
        currency: string;
    },
    referer: string;
    title: string;
}

const hit = (url?: string, options?: THitOptions) => {
    if (!checkIsAvailableYandexMetric()) return;
    window.ym(metricCounterNumber, "hit", url, options);
}

const initMetric = () => {
    if (!checkIsAvailableYandexMetric()) return;

    window.ym(metricCounterNumber, "init", {
        clickmap: true,
        trackLinks: true,
        accurateTrackBounce: true,
        webvisor: true,
    });
    console.log("Metric initialized");
}

const initMetricAB = () => {
    if (!checkIsAvailableYandexMetricAB()) return;


    window.ymab(`metrika.${metricCounterNumber}`, 'setConfig', { enableJS: true, enableWatch: true });
    window.ymab(`metrika.${metricCounterNumber}`, 'init'/*, {clientFeatures}, {callback}*/);
    console.log("Metric initialized");
}

type TABFlags = {
    showTimerTrial: "show" | "hide";
    text: "1" | "2" | "3";
    auraVideoTrial: "on";
    auraPalmistry: "on";
}

export const useMetricABFlags = () => {
    return useExperiments<typeof EFlags & TABFlags>({
        clientId: `metrika.${metricCounterNumber}`
    })
}

export default { setUserID, userParams, reachGoal, hit, initMetric, initMetricAB }