diff --git a/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/AnalyticsModal.tsx b/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/AnalyticsModal.tsx
index 32461c20..677c117b 100644
--- a/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/AnalyticsModal.tsx
+++ b/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/AnalyticsModal.tsx
@@ -16,6 +16,8 @@ import { updateQuiz } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { QuizMetricType } from "@model/quizSettings";
import { InstructionsBlock } from "./IntsructionsBlock/InstructionsBlock";
+import { YandexInstruction } from "./IntsructionsBlock/Instructions/YandexInstruction";
+import { VKPixelInstruction } from "./IntsructionsBlock/Instructions/VKInstruction";
interface Props {
isModalOpen: boolean;
@@ -46,8 +48,7 @@ export default function AnalyticsModal({
instructionTitle: "Как установить Яндекс Метрику в квиз?",
instructionSubTitle: "Инструкция по настройке Яндекс Метрики",
instructionHeader: "Настройка счётчика и интеграции",
- instructionText:
- "Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют определения и уточнения соответствующий условий активизации.Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют определения и уточнения соответствующий условий активизации.Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют определения и уточнения соответствующий условий активизации.",
+ instructionText: ,
},
vk: {
header: "VK Пиксель",
@@ -55,8 +56,7 @@ export default function AnalyticsModal({
instructionTitle: "Как установить VK Пиксель в квиз?",
instructionSubTitle: "Инструкция по настройке VK Пиксель",
instructionHeader: "Настройка счётчика и интеграции",
- instructionText:
- "Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют определения и уточнения соответствующий условий активизации.",
+ instructionText: ,
},
};
}, []);
diff --git a/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/Instructions/VKInstruction.tsx b/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/Instructions/VKInstruction.tsx
new file mode 100644
index 00000000..557560e7
--- /dev/null
+++ b/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/Instructions/VKInstruction.tsx
@@ -0,0 +1,214 @@
+import * as React from "react";
+import { Box, List, ListItem, Typography } from "@mui/material";
+
+export const VKPixelInstruction = () => {
+ return (
+
+
+
+ Чтобы настроить VK пиксель , нужно выполнить следующие шаги:
+
+
+ Перед тем, как создать пиксель, убедитесь, что корректно указали
+ электронную почту для получения уведомлений — это нужно, чтобы доступы
+ работали правильно. Сделать это можно в «Настройках» во вкладке
+ «Контакты», и затем приступать к созданию пикселя.{" "}
+
+
+ В VK Рекламе есть два способа создать пиксель:
+
+
+
+
+ 1) В момент создания рекламной кампании по продвижению сайта.
+ Чтобы сделать это, введите в поле «Рекламируемый сайт» ссылку,
+ после чего система предложит вам создать пиксель для этого домена.
+
+
+
+
+ 2) На вкладке «Сайты». Чтобы создать пиксель, перейдите в раздел
+ «Сайты» и нажмите на кнопку «Добавить пиксель». Введите домен
+ сайта, для которого хотите отслеживать конверсии, и нажмите
+ «Добавить».
+
+
+
+
+
+ Если ранее вы рекламировали сайт, то возможно, на нем уже установлен
+ пиксель — в этом случае при запуске рекламы вы увидите подсказку
+ «Привязан пиксель ID 1234567». В таком случае вы можете добавить еще
+ один пиксель на сайт через кнопку «Создать новый пиксель» (например,
+ если у вас нет доступа к этому) или отправить{" "}
+
+ запрос на доступ к уже имеющемуся пикселю.
+
+
+
+
+ отом Скопируйте номер пикселя и вставьте его в поле «Введите номер
+ пикселя» в личном кабинете PenaQuiz. Опубликуйте квиз.
+
+ Как настроить события пикселя
+
+
+ Кампании по продвижению сайтов в VK Рекламе по умолчанию можно
+ оптимизировать на клики и показы. Если вы используете пиксель, то
+ сможете настроить оптимизацию на другие действия пользователей,
+ например:
+
+
+
+ • Посетитель открыл квиз
+
+
+ • Посетитель увидел результат
+
+
+ • Посетитель увидел определенный результат
+
+
+
+ В разделе «Сайты» в меню слева выберите пиксель и нажмите «Настройка».
+ Чтобы добавить событие, перейдите во вкладку «События» и нажмите
+ кнопку{" "}
+
+ «Добавить событие».
+
+
+
+
+
+
+ • Посетитель открыл квиз: penaquiz-start
+
+
+
+
+
+ • Посетитель нажал на кнопку стартовой страницы:{" "}
+ penaquiz-startquiz
+
+
+
+
+
+ • Посетитель кликнул по номеру телефона на стартовой странице:{" "}
+ penaquiz-phone
+
+
+
+
+
+ • Посетитель кликнул по email на стартовой странице:{" "}
+ penaquiz-email
+
+
+
+
+
+ • Посетитель увидел результат: penaquiz-result (цель
+ прописывается, если подключены результаты)
+
+
+
+
+
+ • Посетитель увидел определенный результат:{" "}
+ penaquiz-result-{"{id}"}
+ (где id — id результата. Например, marquiz-result-149495)
+
+
+
+
+
+ • Посетитель дошёл до формы контактов: penaquiz-form
+
+
+
+
+
+ • Посетитель заполнил форму контактов : penaquiz-contacts
+
+
+
+
+
+ • Посетитель отправил заявку с мессенджером:{" "}
+ penaquiz-messengers-X, где X — один из мессенджеров.
+ Например,
+
+
+
+
+
+ penaquiz-messengers-telegram
+
+
+
+
+ penaquiz-messengers-viber
+
+
+
+
+ penaquiz-messengers-whatsapp
+
+
+
+
+ penaquiz-messengers-vkontakte
+
+
+
+
+ penaquiz-messengers-messenger
+
+
+
+
+ penaquiz-messengers-skype
+
+
+
+
+ penaquiz-messengers-instagram
+
+
+
+
+
+
+ • Посетитель увидел страницу «Спасибо»: penaquiz-finish
+
+
+
+
+ • Посетитель прошёл вопрос N: penaquiz-stepN
+ (где N — порядковый номер вопроса. Например, penaquiz
+ -step2)
+
+
+
+
+
+ 8. Кликните кнопку «Сохранить». Готово!
+
+
+
+
+ Если в консоли или в интерфейсе отсутствуют данные, значит цель не
+ фиксируется. Скорее всего вы не указали номер счётчика в настройках или
+ не опубликовали квиз после этого.
+
+
+ Если данные присутствуют (цели в квиз работают), но в пикселе они не
+ отображаются, то вам необходимо проверить последовательность целей в
+ настройках пикселя (если настроена составная цель). Затем нужно
+ дождаться срабатывания цели (возможны задержки со стороны VK) или
+ обратиться в техподдержку VK с выяснением возможных проблем.
+
+
+ );
+};
diff --git a/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/Instructions/YandexInstruction.tsx b/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/Instructions/YandexInstruction.tsx
new file mode 100644
index 00000000..ae98bf7a
--- /dev/null
+++ b/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/Instructions/YandexInstruction.tsx
@@ -0,0 +1,211 @@
+import * as React from "react";
+import { Box, List, ListItem, Typography } from "@mui/material";
+
+export const YandexInstruction = () => {
+ return (
+
+
+ Важно! Счётчик метрики может показывать статус{" "}
+ «Не найден» и быть окрашен в красный, это связано с особенностями
+ интеграции Метрики и PenaQuiz. Однако, если вы получаете статистику
+ (видите посещения в отчётах), это означает, что счётчик работает и
+ собирает статистику по вашему сайту.
+
+
+ Чтобы настроить Яндекс Метрику, нужно выполнить следующие шаги:
+
+
+
+
+ 1. Перейдите на сайт Яндекс Метрики metrika.yandex.ru"
+ {" "}
+
+
+ а) Если у вас ещё нет счётчика:
+
+
+ Авторизуйтесь и нажмите «Добавить счётчик».
+
+
+ Придумайте имя счётчика. Укажите прямую ссылку на квиз в поле
+ «Адрес сайта». Для её получения откройте в PenaQuiz редактирование
+ квиза (Мои квизы {"=>"} Редактировать), откройте вкладку «Установка
+ квиза» {"=>"} «Ссылка на квиз», или же нажмите опубликовать и
+ перейдите по ссылке на публикацию квиза, скопируйте ссылку с адресной
+ строки и вставьте.
+
+
+ Можете оставить включенными автоматические цели. Это поможет
+ отправлять часть событий вашего квиза в качестве целей в Метрику без
+ дополнительных настроек.
+
+ Нажмите «Создать счётчик»:
+
+ На следующей странице подтвердите и нажмите «Начать пользоваться».
+
+
+ Введите номер счетчика в интеграции квиза “яндекс метрика”
+
+
+ б) Если у вас уже есть счётчик:
+
+ Зайдите в созданный счетчик
+
+ Перейдите в настройки счётчика и добавьте{" "}
+ прямую ссылку на ваш квиз в раздел «Дополнительные адреса».
+
+
+
+ 2. Перейдите во вкладку «Интеграции» и выберите «Яндекс Метрика» в
+ редакторе квиза.
+ {" "}
+
+
+
+ 3. Скопируйте номер счётчика и вставьте его в поле «Номер счётчика»
+ в личном кабинете PenaQuiz. Опубликуйте квиз.
+
+
+
+
+ 4. На сайте Яндекс Метрики в настройках счётчика перейдите во
+ вкладку «Цели».
+
+
+
+
+ 5. Если автоматических событий недостаточно, вы можете настроить
+ дополнительные цели вручную. Создайте новую цель с помощью кнопки
+ «Добавить цель»..
+
+
+
+ В поле «Название» укажите любой текст, соответствующий текущей
+ цели (шагу квиза), выберите тип условия «JavaScript-событие» и в поле{" "}
+ «Идентификатор цели» укажите идентификатор «Содержит»:
+
+
+
+
+ • Посетитель открыл квиз: penaquiz-start
+
+
+
+
+ • Посетитель кликнул по номеру телефона на стартовой странице:{" "}
+ penaquiz-phone
+
+
+
+
+ • Посетитель кликнул по email на стартовой странице:
+ penaquiz-email
+
+
+
+
+
+ • Посетитель увидел результат: penaquiz-result (цель
+ прописывается, если подключены результаты)
+
+
+
+
+ • Посетитель увидел определенный результат:{" "}
+ penaquiz-result- {"{id}"}
+ (где id — id результата. Например, marquiz-result-149495)
+
+
+
+
+
+ • Посетитель дошёл до формы контактов: penaquiz-form
+
+
+
+
+
+ • Посетитель заполнил форму контактов penaquiz-contacts
+
+
+
+
+
+ • Посетитель отправил заявку с мессенджером:{" "}
+ penaquiz-messengers-X, где X — один из мессенджеров.
+ Например,
+
+
+
+
+
+ penaquiz-messengers-telegram
+
+
+
+
+ penaquiz-messengers-viber
+
+
+
+
+ penaquiz-messengers-whatsapp
+
+
+
+
+ penaquiz-messengers-vkontakte
+
+
+
+
+ penaquiz-messengers-messenger
+
+
+
+
+ penaquiz-messengers-skype
+
+
+
+
+ penaquiz-messengers-instagram
+
+
+
+
+
+ • Посетитель увидел страницу «Спасибо»: penaquiz-finish
+
+
+
+
+ • Посетитель прошёл вопрос N: penaquiz-stepN
+ (где N — порядковый номер вопроса. Например, penaquiz
+ -step2)
+
+
+
+
+
+ 8. Кликните кнопку «Сохранить». Готово!
+
+
+
+
+ Если в консоли или в интерфейсе отсутствуют данные, значит цель не
+ фиксируется. Скорее всего вы не указали номер счётчика в настройках или
+ не опубликовали квиз после этого.
+
+
+ Если данные присутствуют (цели в квиз работают), но в Метрике они не
+ отображаются, то вам необходимо проверить последовательность целей в
+ настройках Метрики (если настроена составная цель). Затем нужно
+ дождаться срабатывания цели (возможны задержки со стороны Яндекс) или
+ обратиться в{" "}
+ техподдержку Яндекс с
+ выяснением возможных проблем.
+
+
+ );
+};
diff --git a/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/InstructionsBlock.tsx b/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/InstructionsBlock.tsx
index afa87ee1..cf6cff13 100644
--- a/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/InstructionsBlock.tsx
+++ b/src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/InstructionsBlock.tsx
@@ -7,7 +7,7 @@ type InstructionsBlockProps = {
headerText: string;
subHeaderText: string;
instructionTitle: string;
- instructionsText: string;
+ instructionsText: JSX.Element;
};
export const InstructionsBlock: FC = ({
@@ -78,9 +78,7 @@ export const InstructionsBlock: FC = ({
>
{instructionTitle}
-
- {instructionsText}
-
+ {instructionsText}
)}