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

AW-106-klaviyo-metric

Browse Source
This commit is contained in:
gofnnp 2024-06-28 12:43:33 +04:00
parent b5f6329467
commit 89b0939b83
4 changed files with 44 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@ -44,6 +44,21 @@
</style>
</head>
<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>
<!-- Klaviyo Metric -->
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (m, e, t, r, i, k, a) {

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

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

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

@ -14,34 +14,47 @@ export enum EGoals {
}
interface IUserParams {
UserID: number;
UserID: number | string;
genderFrom: string;
email: string;
hasPersonalVideo: boolean;
}
const environments = import.meta.env
const metricCounterNumber = Number(environments.AURA_YANDEX_COUNTER_NUMBER)
const setUserID = (userId: string) => {
if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
const checkIsAvailableYandexMetric = () => {
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)
// eslint-disable-next-line react-hooks/exhaustive-deps
if (!window._learnq) return console.error("Klaviyo.Metric not found");
window._learnq.push(['identify', userId]);
}
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)
// eslint-disable-next-line react-hooks/exhaustive-deps
if (!window._learnq) return console.error("Klaviyo.Metric not found");
window._learnq.push(['identify', parameters]);
}
const reachGoal = (goal: EGoals) => {
if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
if (!checkIsAvailableYandexMetric()) return;
window.ym(metricCounterNumber, "reachGoal", goal)
console.log("goal: ", goal);
// eslint-disable-next-line react-hooks/exhaustive-deps
if (!window._learnq) return console.error("Klaviyo.Metric not found");
window._learnq.push(['track', goal]);
}
type THitOptions = {
@ -56,11 +69,12 @@ type THitOptions = {
}
const hit = (url?: string, options?: THitOptions) => {
if (!checkIsAvailableYandexMetric()) return;
window.ym(metricCounterNumber, "hit", url, options);
}
const initMetric = () => {
if (typeof window.ym !== "function") return console.error("Yandex.Metric not found");
if (!checkIsAvailableYandexMetric()) return;
window.ym(metricCounterNumber, "init", {
clickmap: true,

2
src/types.ts
View File

@ -27,6 +27,8 @@ declare global {
interface Window {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ym: any;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_learnq: any;
}
}