memoize metrics hooks & fix hook dependencies

This commit is contained in:
nflnkr 2024-06-02 13:23:54 +03:00
parent 430d4f1a4b
commit 3eb3966fca
3 changed files with 57 additions and 50 deletions

@ -1,4 +1,5 @@
import type { MetricsMessengers } from "@model/metrics";
import { useMemo } from "react";
type MetricsGoal = {
type: "reachGoal";
@ -19,28 +20,31 @@ const sendMetrics = (vkPixelId: number | undefined, goal: string) => {
};
export const useVkMetricsGoals = (vkId: number | undefined) => {
return {
// Посетитель открыл квиз
quizOpened: () => sendMetrics(vkId, "penaquiz-start"),
// Посетитель нажал на кнопку стартовой страницы
firstPageOpened: () => sendMetrics(vkId, "penaquiz-startquiz"),
// Посетитель кликнул по номеру телефона на стартовой странице
phoneNumberOpened: () => sendMetrics(vkId, "penaquiz-phone"),
// Посетитель кликнул по email на стартовой странице
emailOpened: () => sendMetrics(vkId, "penaquiz-email"),
// Посетитель увидел определенный результат (id - айдишник вопроса с типом result)
resultIdShown: (resultId: string) => sendMetrics(vkId, `penaquiz-result-${resultId}`),
// Посетитель нажал на ссылку в результате
resultLink: () => sendMetrics(vkId, `penaquiz-resultlink`),
// Посетитель дошёл до формы контактов
contactsFormOpened: () => sendMetrics(vkId, "penaquiz-form"),
// Посетитель заполнил форму контактов
contactsFormFilled: () => sendMetrics(vkId, "penaquiz-contacts"),
// Посетитель заполнил поле формы контактов
contactsFormField: (field: string) => sendMetrics(vkId, `penaquiz-formfield-${field}`),
// Посетитель отправил заявку с мессенджером
messengerRequestSended: (messenger: MetricsMessengers) => sendMetrics(vkId, `penaquiz-messengers-${messenger}`),
// Посетитель прошёл вопрос
questionPassed: (questionId: string) => sendMetrics(vkId, `penaquiz-step${questionId}`),
};
return useMemo(
() => ({
// Посетитель открыл квиз
quizOpened: () => sendMetrics(vkId, "penaquiz-start"),
// Посетитель нажал на кнопку стартовой страницы
firstPageOpened: () => sendMetrics(vkId, "penaquiz-startquiz"),
// Посетитель кликнул по номеру телефона на стартовой странице
phoneNumberOpened: () => sendMetrics(vkId, "penaquiz-phone"),
// Посетитель кликнул по email на стартовой странице
emailOpened: () => sendMetrics(vkId, "penaquiz-email"),
// Посетитель увидел определенный результат (id - айдишник вопроса с типом result)
resultIdShown: (resultId: string) => sendMetrics(vkId, `penaquiz-result-${resultId}`),
// Посетитель нажал на ссылку в результате
resultLink: () => sendMetrics(vkId, `penaquiz-resultlink`),
// Посетитель дошёл до формы контактов
contactsFormOpened: () => sendMetrics(vkId, "penaquiz-form"),
// Посетитель заполнил форму контактов
contactsFormFilled: () => sendMetrics(vkId, "penaquiz-contacts"),
// Посетитель заполнил поле формы контактов
contactsFormField: (field: string) => sendMetrics(vkId, `penaquiz-formfield-${field}`),
// Посетитель отправил заявку с мессенджером
messengerRequestSended: (messenger: MetricsMessengers) => sendMetrics(vkId, `penaquiz-messengers-${messenger}`),
// Посетитель прошёл вопрос
questionPassed: (questionId: string) => sendMetrics(vkId, `penaquiz-step${questionId}`),
}),
[vkId]
);
};

@ -1,4 +1,5 @@
import type { MetricsMessengers } from "@model/metrics";
import { useMemo } from "react";
type ExtendedWindow = Window & {
ym?: (id: number, type: string, goal: string) => void;
@ -11,28 +12,31 @@ const sendMetrics = (yandexMetricsId: number | undefined, goal: string) => {
};
export const useYandexMetricsGoals = (id: number | undefined) => {
return {
// Посетитель открыл квиз
quizOpened: () => sendMetrics(id, "penaquiz-start"),
// Посетитель нажал на кнопку стартовой страницы
firstPageOpened: () => sendMetrics(id, "penaquiz-startquiz"),
// Посетитель кликнул по номеру телефона на стартовой странице
phoneNumberOpened: () => sendMetrics(id, "penaquiz-phone"),
// Посетитель кликнул по email на стартовой странице
emailOpened: () => sendMetrics(id, "penaquiz-email"),
// Посетитель увидел определенный результат (id - айдишник вопроса с типом result)
resultIdShown: (resultId: string) => sendMetrics(id, `penaquiz-result-${resultId}`),
// Посетитель нажал на ссылку в результате
resultLink: () => sendMetrics(id, `penaquiz-resultlink`),
// Посетитель дошёл до формы контактов
contactsFormOpened: () => sendMetrics(id, "penaquiz-form"),
// Посетитель заполнил форму контактов
contactsFormFilled: () => sendMetrics(id, "penaquiz-contacts"),
// Посетитель заполнил поле формы контактов
contactsFormField: (field: string) => sendMetrics(id, `penaquiz-formfield-${field}`),
// Посетитель отправил заявку с мессенджером
messengerRequestSended: (messenger: MetricsMessengers) => sendMetrics(id, `penaquiz-messengers-${messenger}`),
// Посетитель прошёл вопрос
questionPassed: (questionId: string) => sendMetrics(id, `penaquiz-step${questionId}`),
};
return useMemo(
() => ({
// Посетитель открыл квиз
quizOpened: () => sendMetrics(id, "penaquiz-start"),
// Посетитель нажал на кнопку стартовой страницы
firstPageOpened: () => sendMetrics(id, "penaquiz-startquiz"),
// Посетитель кликнул по номеру телефона на стартовой странице
phoneNumberOpened: () => sendMetrics(id, "penaquiz-phone"),
// Посетитель кликнул по email на стартовой странице
emailOpened: () => sendMetrics(id, "penaquiz-email"),
// Посетитель увидел определенный результат (id - айдишник вопроса с типом result)
resultIdShown: (resultId: string) => sendMetrics(id, `penaquiz-result-${resultId}`),
// Посетитель нажал на ссылку в результате
resultLink: () => sendMetrics(id, `penaquiz-resultlink`),
// Посетитель дошёл до формы контактов
contactsFormOpened: () => sendMetrics(id, "penaquiz-form"),
// Посетитель заполнил форму контактов
contactsFormFilled: () => sendMetrics(id, "penaquiz-contacts"),
// Посетитель заполнил поле формы контактов
contactsFormField: (field: string) => sendMetrics(id, `penaquiz-formfield-${field}`),
// Посетитель отправил заявку с мессенджером
messengerRequestSended: (messenger: MetricsMessengers) => sendMetrics(id, `penaquiz-messengers-${messenger}`),
// Посетитель прошёл вопрос
questionPassed: (questionId: string) => sendMetrics(id, `penaquiz-step${questionId}`),
}),
[id]
);
};

@ -23,7 +23,6 @@ export function useQuestionFlowControl() {
const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);
const currentQuestion = sortedQuestions.find((question) => question.id === currentQuestionId) ?? sortedQuestions[0];
console.log("currentQuestion", currentQuestion);
const linearQuestionIndex =
currentQuestion && sortedQuestions.every(({ content }) => content.rule.parentId !== "root") // null when branching enabled
@ -161,7 +160,7 @@ export function useQuestionFlowControl() {
if (nextQuestion.type === "result") return showResult();
setCurrentQuestionId(nextQuestion.id);
}, [currentQuestion, nextQuestion, showResult]);
}, [currentQuestion.id, nextQuestion, showResult, vkMetrics, yandexMetrics]);
const setQuestion = useCallback(
(questionId: string) => {