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

Merge branch 'develop' into 'main'

Browse Source 
AW-136-personal-video-to-trial-page

See merge request witapp/aura-webapp!233
This commit is contained in:
Daniil Chemerkin 2024-07-09 17:57:51 +00:00
commit 77d532ab99
5 changed files with 110 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
index.html
View File

@ -44,6 +44,70 @@
</style> </style>
</head> </head>
<body> <body>
<!-- Klaviyo Metric -->
<script type="module">
const klaviyoKeys = {
develop: "RM7w5r",
production: "Si7Jff",
};
const script = document.createElement("script");
script.src = `https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=${
klaviyoKeys[import.meta.env.MODE]
}`;
script.type = "text/javascript";
script.async = "";
document.head.appendChild(script);
</script>
<script>
!(function () {
if (!window.klaviyo) {
window._klOnsite = window._klOnsite || [];
try {
window.klaviyo = new Proxy(
{},
{
get: function (n, i) {
return "push" === i
? function () {
var n;
(n = window._klOnsite).push.apply(n, arguments);
}
: function () {
for (
var n = arguments.length, o = new Array(n), w = 0;
w < n;
w++
)
o[w] = arguments[w];
var t =
"function" == typeof o[o.length - 1]
? o.pop()
: void 0,
e = new Promise(function (n) {
window._klOnsite.push(
[i].concat(o, [
function (i) {
t && t(i), n(i);
},
])
);
});
return e;
};
},
}
);
} catch (n) {
(window.klaviyo = window.klaviyo || []),
(window.klaviyo.push = function () {
var n;
(n = window._klOnsite).push.apply(n, arguments);
});
}
}
})();
</script>
<!-- Klaviyo Metric -->
<!-- Yandex.Metrika counter --> <!-- Yandex.Metrika counter -->
<script type="text/javascript"> <script type="text/javascript">
(function (m, e, t, r, i, k, a) { (function (m, e, t, r, i, k, a) {

7
src/components/App/index.tsx
View File

@ -121,7 +121,7 @@ import LoadingPage from "../pages/LoadingPage";
import { EProductKeys, productUrls } from "@/data/products"; import { EProductKeys, productUrls } from "@/data/products";
import SinglePaymentPage from "../pages/SinglePaymentPage"; import SinglePaymentPage from "../pages/SinglePaymentPage";
import ABDesignV1Routes from "@/routerComponents/ABDesign/v1"; import ABDesignV1Routes from "@/routerComponents/ABDesign/v1";
import metricService from "@/services/metric/metricService"; import metricService, {EGoals} from "@/services/metric/metricService";
const isProduction = import.meta.env.MODE === "production"; const isProduction = import.meta.env.MODE === "production";
@ -164,6 +164,11 @@ function App(): JSX.Element {
const birthPlace = user?.profile?.birthplace || birthPlaceFromStore; const birthPlace = user?.profile?.birthplace || birthPlaceFromStore;
useEffect(() => { useEffect(() => {
if (location.pathname.includes("v1/trial-choice")) {
metricService.reachGoal(EGoals.AURA_TRIAL_CHOICE_PAGE_VISIT, true)
} else if (location.pathname.includes("v1/trial-payment")) {
metricService.reachGoal(EGoals.AURA_TRIAL_PAYMENT_PAGE_VISIT, true)
}
metricService.hit() metricService.hit()
}, [location]); }, [location]);

6
src/hooks/authentication/use-authentication.ts
View File

@ -125,13 +125,13 @@ export const useAuthentication = () => {
const payload = getAuthorizationPayload(email, source); const payload = getAuthorizationPayload(email, source);
const { token, userId, generatingVideo, videoId } = await api.authorization(payload); const { token, userId, generatingVideo, videoId } = await api.authorization(payload);
const { user } = await api.getUser({ token }); const { user } = await api.getUser({ token });
if (userId?.length && !!window.ym && typeof window.ym === 'function') { if (userId?.length) {
window.ym(95799066, 'userParams', { metricService.userParams({
hasPersonalVideo: generatingVideo || false, hasPersonalVideo: generatingVideo || false,
email: user.email, email: user.email,
UserID: userId UserID: userId
}) })
window.ym(95799066, 'setUserID', userId); metricService.setUserID(userId);
} }
signUp(token, user); signUp(token, user);
setToken(token); setToken(token);

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

@ -10,38 +10,58 @@ export enum EGoals {
ROSE_VIDEO_PLAY_USER_STOP = "RoseVideoPlayUserStop", ROSE_VIDEO_PLAY_USER_STOP = "RoseVideoPlayUserStop",
ROSE_VIDEO_PLAY_USER_PLAY = "RoseVideoPlayUserPlay", ROSE_VIDEO_PLAY_USER_PLAY = "RoseVideoPlayUserPlay",
AURA_PAYMENT_METHODS_OPENED = "AuraPaymentMethodsOpened", AURA_PAYMENT_METHODS_OPENED = "AuraPaymentMethodsOpened",
AURA_SELECT_TRIAL = "AuraSelectTrial" AURA_SELECT_TRIAL = "AuraSelectTrial",
AURA_TRIAL_CHOICE_PAGE_VISIT = "AuraTrialChoicePageVisit",
AURA_TRIAL_PAYMENT_PAGE_VISIT = "AuraTrialPaymentPageVisit"
} }
interface IUserParams { interface IUserParams {
UserID: number; UserID: number | string;
genderFrom: string; genderFrom: string;
email: string; email: string;
hasPersonalVideo: boolean;
} }
const environments = import.meta.env const environments = import.meta.env
const metricCounterNumber = Number(environments.AURA_YANDEX_COUNTER_NUMBER) const metricCounterNumber = Number(environments.AURA_YANDEX_COUNTER_NUMBER)
const setUserID = (userId: string) => { const checkIsAvailableYandexMetric = () => {
if (typeof window.ym !== "function") return console.error("Yandex.Metric not found"); if (typeof window.ym !== "function") {
console.error("Yandex.Metric not found")
return false
}
return true
}
const setUserID = (userId: string) => {
if (!checkIsAvailableYandexMetric()) return;
window.ym(metricCounterNumber, "setUserID", userId) window.ym(metricCounterNumber, "setUserID", userId)
// eslint-disable-next-line react-hooks/exhaustive-deps
if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
window.klaviyo.push(['identify', userId]);
} }
const userParams = (parameters: Partial<IUserParams>) => { const userParams = (parameters: Partial<IUserParams>) => {
if (typeof window.ym !== "function") return console.error("Yandex.Metric not found"); if (!checkIsAvailableYandexMetric()) return;
window.ym(metricCounterNumber, "userParams", parameters) window.ym(metricCounterNumber, "userParams", parameters)
// eslint-disable-next-line react-hooks/exhaustive-deps
if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
window.klaviyo.push(['identify', parameters]);
} }
const reachGoal = (goal: EGoals) => { const reachGoal = (goal: EGoals, onlyKlaviyo = false) => {
if (typeof window.ym !== "function") return console.error("Yandex.Metric not found"); if (onlyKlaviyo) {
window.ym(metricCounterNumber, "reachGoal", goal) if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
console.log("goal: ", goal); window.klaviyo.push(['track', goal]);
} else {
if (!checkIsAvailableYandexMetric()) return;
// eslint-disable-next-line react-hooks/exhaustive-deps window.ym(metricCounterNumber, "reachGoal", goal)
console.log("goal: ", goal);
if (!window.klaviyo) return console.error("Klaviyo.Metric not found");
window.klaviyo.push(['track', goal]);
}
} }
type THitOptions = { type THitOptions = {
@ -56,11 +76,12 @@ type THitOptions = {
} }
const hit = (url?: string, options?: THitOptions) => { const hit = (url?: string, options?: THitOptions) => {
if (!checkIsAvailableYandexMetric()) return;
window.ym(metricCounterNumber, "hit", url, options); window.ym(metricCounterNumber, "hit", url, options);
} }
const initMetric = () => { const initMetric = () => {
if (typeof window.ym !== "function") return console.error("Yandex.Metric not found"); if (!checkIsAvailableYandexMetric()) return;
window.ym(metricCounterNumber, "init", { window.ym(metricCounterNumber, "init", {
clickmap: true, clickmap: true,

2
src/types.ts
View File

@ -27,6 +27,8 @@ 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
klaviyo: any;
} }
} }