SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

memoize metrics hooks & fix hook dependencies

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
lib/utils/hooks/metrics/useVkMetricsGoals.ts
View File

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

52
lib/utils/hooks/metrics/useYandexMetricsGoals.ts
View File

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

3
lib/utils/hooks/useQuestionFlowControl.ts
View File

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