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

import Clarity from "@microsoft/clarity";
import { useExperiments } from "yandex-metrica-ab-react";

export enum EGoals {
    // ENTERED_EMAIL = "EnteredEmail",
    // LEAD = "Lead",
    // PURCHASE = "Purchase",
    // PAYMENT_SUCCESS = "PaymentSuccess",
    // 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",
    ENTERED_EMAIL_PALMISTRY = "EnteredEmailPalmistry",

    // new
    CAMERA_OPEN = "CameraOpen",
    CAMERA_ERROR = "CameraError",
    CAMERA_SUCCESS = "CameraSuccess",
    ENTERED_EMAIL = "EnteredEmail",
    TRIAL_CHOICE_PAGE_VISIT = "TrialChoicePageVisit",
    SELECT_TRIAL = "SelectTrial",
    TRIAL_PAYMENT_PAGE_VISIT = "TrialPaymentPageVisit",
    PAYMENT_METHODS_OPENED = "PaymentMethodsOpened",
    PAYMENT_SUCCESS = "PaymentSuccess",
    PAYMENT_ERROR = "PaymentError",
    SKIP_TRIAL_SELECT = "SkipTrialSelect",
    SKIP_TRIAL_NOT_SELECT = "SkipTrialNotSelect",
    SKIP_TRIAL_SUCCESS = "SkipTrialSuccess",
    SKIP_TRIAL_ERROR = "SkipTrialError",
    PDF_COMP_OPEN = "PDFCompOpen",
    PDF_PALM_OPEN = "PDFPalmOpen",
    DISCOUNT_PAGE_VISIT = "DiscountPageVisit",

    AURA_SELECT_TRIAL = "AuraSelectTrial",
    AURA_PAYMENT_METHODS_OPENED = "AuraPaymentMethodsOpened",
    AURA_TRIAL_CHOICE_PAGE_VISIT = "AuraTrialChoicePageVisit",
    AURA_TRIAL_PAYMENT_PAGE_VISIT = "AuraTrialPaymentPageVisit",
    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",

    // FB
    LEAD = "Lead",
    PURCHASE = "Purchase",
}

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;
    sessionId: 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 = () => {
    const isProduction = environments.MODE === "production";
    if (!isProduction) {
        console.log("ANALYTIC IS NOT WORKING: Not production")
        return false;
    };
    if (typeof window.ym !== "function") {
        console.error("Yandex.Metric not found")
        return false
    }
    return true
}

const checkIsAvailableYandexMetricAB = () => {
    const isProduction = environments.MODE === "production";
    if (!isProduction) {
        console.log("ANALYTIC IS NOT WORKING: Not production")
        return false;
    };
    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)
    Clarity.identify(userId);
    if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
    window.klaviyo.push(['identify', userId]);
}

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

    Object.entries(parameters).forEach(([key, value]) => {
        Clarity.setTag(key, String(value));
    });

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

const reachGoal = (goal: EGoals, usingMetrics: EMetrics[], options?: unknown) => {
    console.log("goal: ", goal);
    const isProduction = environments.MODE === "production";
    if (!isProduction) return console.log("ANALYTIC IS NOT WORKING: Not production");

    if (usingMetrics.includes(EMetrics.YANDEX)) {
        if (typeof window.ym !== "function") {
            console.error("Yandex.Metric not found")
        } else {
            window.ym(metricCounterNumber, "reachGoal", goal)
            Clarity.event(goal);
            console.log("goalYM&Clarity: ", goal);
        }
    }

    if (usingMetrics.includes(EMetrics.KLAVIYO)) {
        if (!window.klaviyo) {
            console.error("Klaviyo.Metric not found")
        } else {
            window.klaviyo.push(['track', goal]);
            console.log("goalKLAVIYO: ", goal);
        }
    }

    if (usingMetrics.includes(EMetrics.FACEBOOK)) {
        if (typeof window.fbq !== "function") {
            console.error("Facebook.Metric not found")
        } else {
            window.fbq('track', goal === EGoals.ENTERED_EMAIL ? EGoals.LEAD : goal, options)
            console.log("goalFB: ", goal);
        }
    }
}

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";
    esFlag: "hiCopy" | "standard";
    palmOnPayment: "graphical" | "real";
    genderPageType: "v1" | "v2";
    trialChoicePageType: "v1" | "v2";
    welcomePageImage: "v1" | "v2";
}

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

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