Merge branch 'vk-and-yandex-instructions' into 'dev'
added Vk and Yandex instructions See merge request frontend/squiz!302
This commit is contained in:
commit
97d9f85517
@ -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: <YandexInstruction />,
|
||||
},
|
||||
vk: {
|
||||
header: "VK Пиксель",
|
||||
@ -55,8 +56,7 @@ export default function AnalyticsModal({
|
||||
instructionTitle: "Как установить VK Пиксель в квиз?",
|
||||
instructionSubTitle: "Инструкция по настройке VK Пиксель",
|
||||
instructionHeader: "Настройка счётчика и интеграции",
|
||||
instructionText:
|
||||
"Повседневная практика показывает, что дальнейшее развитие различных форм деятельности требуют определения и уточнения соответствующий условий активизации.",
|
||||
instructionText: <VKPixelInstruction />,
|
||||
},
|
||||
};
|
||||
}, []);
|
||||
|
||||
214
src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/Instructions/VKInstruction.tsx
Normal file
214
src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/Instructions/VKInstruction.tsx
Normal file
@ -0,0 +1,214 @@
|
||||
import * as React from "react";
|
||||
import { Box, List, ListItem, Typography } from "@mui/material";
|
||||
|
||||
export const VKPixelInstruction = () => {
|
||||
return (
|
||||
<Box>
|
||||
<List>
|
||||
<Typography paragraph>
|
||||
Чтобы настроить VK пиксель , нужно выполнить следующие шаги:
|
||||
</Typography>
|
||||
<Typography paragraph>
|
||||
Перед тем, как создать пиксель, убедитесь, что корректно указали
|
||||
электронную почту для получения уведомлений — это нужно, чтобы доступы
|
||||
работали правильно. Сделать это можно в «Настройках» во вкладке
|
||||
«Контакты», и затем приступать к созданию пикселя.{" "}
|
||||
</Typography>
|
||||
<Typography paragraph>
|
||||
В VK Рекламе есть два способа создать пиксель:
|
||||
</Typography>
|
||||
<List>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
1) В момент создания рекламной кампании по продвижению сайта.
|
||||
Чтобы сделать это, введите в поле «Рекламируемый сайт» ссылку,
|
||||
после чего система предложит вам создать пиксель для этого домена.
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
2) На вкладке «Сайты». Чтобы создать пиксель, перейдите в раздел
|
||||
«Сайты» и нажмите на кнопку «Добавить пиксель». Введите домен
|
||||
сайта, для которого хотите отслеживать конверсии, и нажмите
|
||||
«Добавить».
|
||||
</Typography>
|
||||
</ListItem>
|
||||
</List>
|
||||
|
||||
<Typography paragraph>
|
||||
Если ранее вы рекламировали сайт, то возможно, на нем уже установлен
|
||||
пиксель — в этом случае при запуске рекламы вы увидите подсказку
|
||||
«Привязан пиксель ID 1234567». В таком случае вы можете добавить еще
|
||||
один пиксель на сайт через кнопку «Создать новый пиксель» (например,
|
||||
если у вас нет доступа к этому) или отправить{" "}
|
||||
<a href={"https://ads.vk.com/help/articles/sites#access"}>
|
||||
запрос на доступ к уже имеющемуся пикселю.
|
||||
</a>
|
||||
</Typography>
|
||||
|
||||
<Typography paragraph>
|
||||
отом Скопируйте номер пикселя и вставьте его в поле «Введите номер
|
||||
пикселя» в личном кабинете PenaQuiz. Опубликуйте квиз.
|
||||
</Typography>
|
||||
<Typography variant="h5">Как настроить события пикселя</Typography>
|
||||
|
||||
<Typography paragraph>
|
||||
Кампании по продвижению сайтов в VK Рекламе по умолчанию можно
|
||||
оптимизировать на клики и показы. Если вы используете пиксель, то
|
||||
сможете настроить оптимизацию на другие действия пользователей,
|
||||
например:
|
||||
</Typography>
|
||||
<List>
|
||||
<ListItem>
|
||||
<Typography>• Посетитель открыл квиз</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>• Посетитель увидел результат</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>• Посетитель увидел определенный результат</Typography>
|
||||
</ListItem>
|
||||
</List>
|
||||
<Typography paragraph>
|
||||
В разделе «Сайты» в меню слева выберите пиксель и нажмите «Настройка».
|
||||
Чтобы добавить событие, перейдите во вкладку «События» и нажмите
|
||||
кнопку{" "}
|
||||
<a href={"https://ads.vk.com/help/articles/sites#events"}>
|
||||
«Добавить событие».
|
||||
</a>
|
||||
</Typography>
|
||||
|
||||
<List>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель открыл квиз: <b>penaquiz-start</b>
|
||||
</Typography>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель нажал на кнопку стартовой страницы:{" "}
|
||||
<b>penaquiz-startquiz</b>
|
||||
</Typography>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель кликнул по номеру телефона на стартовой странице:{" "}
|
||||
<b>penaquiz-phone</b>
|
||||
</Typography>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель кликнул по email на стартовой странице:{" "}
|
||||
<b>penaquiz-email</b>
|
||||
</Typography>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель увидел результат: <b>penaquiz-result</b> (цель
|
||||
прописывается, если подключены результаты)
|
||||
</Typography>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель увидел определенный результат:{" "}
|
||||
<b>penaquiz-result-{"{id}"}</b>
|
||||
(где id — id результата. Например, marquiz-result-149495)
|
||||
</Typography>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель дошёл до формы контактов: <b>penaquiz-form</b>
|
||||
</Typography>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель заполнил форму контактов : <b>penaquiz-contacts</b>
|
||||
</Typography>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель отправил заявку с мессенджером:{" "}
|
||||
<b>penaquiz-messengers-X</b>, где X — один из мессенджеров.
|
||||
Например,
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<List>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
<b>penaquiz</b>-messengers-telegram
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
<b>penaquiz</b>-messengers-viber
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
<b>penaquiz</b>-messengers-whatsapp
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
<b>penaquiz</b>-messengers-vkontakte
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
<b>penaquiz</b>-messengers-messenger
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
<b>penaquiz</b>-messengers-skype
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
<b>penaquiz</b>-messengers-instagram
|
||||
</Typography>
|
||||
</ListItem>
|
||||
</List>
|
||||
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель увидел страницу «Спасибо»: <b>penaquiz-finish</b>
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель прошёл вопрос N: <b>penaquiz-stepN</b>
|
||||
(где N — порядковый номер вопроса. Например, <b>penaquiz</b>
|
||||
-step2)
|
||||
</Typography>
|
||||
</ListItem>
|
||||
</List>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
8. Кликните кнопку «Сохранить». <b>Готово!</b>
|
||||
</Typography>
|
||||
</ListItem>
|
||||
</List>
|
||||
<Typography paragraph>
|
||||
Если в консоли или в интерфейсе отсутствуют данные, значит цель не
|
||||
фиксируется. Скорее всего вы не указали номер счётчика в настройках или
|
||||
не опубликовали квиз после этого.
|
||||
</Typography>
|
||||
<Typography paragraph>
|
||||
Если данные присутствуют (цели в квиз работают), но в пикселе они не
|
||||
отображаются, то вам необходимо проверить последовательность целей в
|
||||
настройках пикселя (если настроена составная цель). Затем нужно
|
||||
дождаться срабатывания цели (возможны задержки со стороны VK) или
|
||||
обратиться в техподдержку VK с выяснением возможных проблем.
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
211
src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/Instructions/YandexInstruction.tsx
Normal file
211
src/pages/IntegrationsPage/PartnersBoard/AnalyticsModal/IntsructionsBlock/Instructions/YandexInstruction.tsx
Normal file
@ -0,0 +1,211 @@
|
||||
import * as React from "react";
|
||||
import { Box, List, ListItem, Typography } from "@mui/material";
|
||||
|
||||
export const YandexInstruction = () => {
|
||||
return (
|
||||
<Box>
|
||||
<Typography paragraph>
|
||||
<b>Важно!</b> Счётчик метрики может показывать статус{" "}
|
||||
<b>«Не найден» и быть окрашен в красный</b>, это связано с особенностями
|
||||
интеграции Метрики и PenaQuiz. Однако, если вы получаете статистику
|
||||
(видите посещения в отчётах), это означает, что счётчик работает и
|
||||
собирает статистику по вашему сайту.
|
||||
</Typography>
|
||||
<Typography variant="h5">
|
||||
Чтобы настроить Яндекс Метрику, нужно выполнить следующие шаги:
|
||||
</Typography>
|
||||
<List>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
1. Перейдите на сайт Яндекс Метрики metrika.yandex.ru"
|
||||
</Typography>{" "}
|
||||
</ListItem>
|
||||
<Typography>
|
||||
<b>а) Если у вас ещё нет счётчика:</b>
|
||||
</Typography>
|
||||
<Typography paragraph>
|
||||
Авторизуйтесь и нажмите «Добавить счётчик».
|
||||
</Typography>
|
||||
<Typography paragraph>
|
||||
Придумайте имя счётчика. Укажите <b>прямую ссылку на квиз</b> в поле
|
||||
«Адрес сайта». Для её получения откройте в PenaQuiz редактирование
|
||||
квиза (Мои квизы {"=>"} Редактировать), откройте вкладку «Установка
|
||||
квиза» {"=>"} «Ссылка на квиз», или же нажмите опубликовать и
|
||||
перейдите по ссылке на публикацию квиза, скопируйте ссылку с адресной
|
||||
строки и вставьте.
|
||||
</Typography>
|
||||
<Typography paragraph>
|
||||
Можете оставить включенными автоматические цели. Это поможет
|
||||
отправлять часть событий вашего квиза в качестве целей в Метрику без
|
||||
дополнительных настроек.
|
||||
</Typography>
|
||||
<Typography paragraph>Нажмите «Создать счётчик»:</Typography>
|
||||
<Typography paragraph>
|
||||
На следующей странице подтвердите и нажмите «Начать пользоваться».
|
||||
</Typography>
|
||||
<Typography paragraph>
|
||||
Введите номер счетчика в интеграции квиза “яндекс метрика”
|
||||
</Typography>
|
||||
<Typography>
|
||||
<b>б) Если у вас уже есть счётчик:</b>
|
||||
</Typography>
|
||||
<Typography paragraph>Зайдите в созданный счетчик</Typography>
|
||||
<Typography paragraph>
|
||||
Перейдите в настройки счётчика и добавьте{" "}
|
||||
<b>прямую ссылку на ваш квиз</b> в раздел «Дополнительные адреса».
|
||||
</Typography>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
2. Перейдите во вкладку «Интеграции» и выберите «Яндекс Метрика» в
|
||||
редакторе квиза.
|
||||
</Typography>{" "}
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
3. Скопируйте номер счётчика и вставьте его в поле «Номер счётчика»
|
||||
в личном кабинете PenaQuiz. Опубликуйте квиз.
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
4. На сайте Яндекс Метрики в настройках счётчика перейдите во
|
||||
вкладку <b>«Цели»</b>.
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
5. Если автоматических событий недостаточно, вы можете настроить
|
||||
дополнительные цели вручную. Создайте новую цель с помощью кнопки
|
||||
<b>«Добавить цель».</b>.
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<Typography paragraph>
|
||||
В поле <b>«Название»</b> укажите любой текст, соответствующий текущей
|
||||
цели (шагу квиза), выберите тип условия «JavaScript-событие» и в поле{" "}
|
||||
<b>«Идентификатор цели»</b> укажите идентификатор «Содержит»:
|
||||
</Typography>
|
||||
<List>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель открыл квиз: <b>penaquiz-start</b>
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель кликнул по номеру телефона на стартовой странице:{" "}
|
||||
<b>penaquiz-phone</b>
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель кликнул по email на стартовой странице:
|
||||
<b>penaquiz-email</b>
|
||||
</Typography>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель увидел результат: <b>penaquiz-result</b> (цель
|
||||
прописывается, если подключены результаты)
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель увидел определенный результат:{" "}
|
||||
<b>penaquiz-result- {"{id}"}</b>
|
||||
(где id — id результата. Например, marquiz-result-149495)
|
||||
</Typography>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель дошёл до формы контактов: <b>penaquiz-form</b>
|
||||
</Typography>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель заполнил форму контактов <b>penaquiz-contacts</b>
|
||||
</Typography>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель отправил заявку с мессенджером:{" "}
|
||||
<b>penaquiz-messengers-X</b>, где X — один из мессенджеров.
|
||||
Например,
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<List>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
<b>penaquiz</b>-messengers-telegram
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
<b>penaquiz</b>-messengers-viber
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
<b>penaquiz</b>-messengers-whatsapp
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
<b>penaquiz</b>-messengers-vkontakte
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
<b>penaquiz</b>-messengers-messenger
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
<b>penaquiz</b>-messengers-skype
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
<b>penaquiz</b>-messengers-instagram
|
||||
</Typography>
|
||||
</ListItem>
|
||||
</List>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель увидел страницу «Спасибо»: <b>penaquiz-finish</b>
|
||||
</Typography>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
• Посетитель прошёл вопрос N: <b>penaquiz-stepN</b>
|
||||
(где N — порядковый номер вопроса. Например, <b>penaquiz</b>
|
||||
-step2)
|
||||
</Typography>
|
||||
</ListItem>
|
||||
</List>
|
||||
<ListItem>
|
||||
<Typography>
|
||||
8. Кликните кнопку «Сохранить». <b>Готово!</b>
|
||||
</Typography>
|
||||
</ListItem>
|
||||
</List>
|
||||
<Typography paragraph>
|
||||
Если в консоли или в интерфейсе отсутствуют данные, значит цель не
|
||||
фиксируется. Скорее всего вы не указали номер счётчика в настройках или
|
||||
не опубликовали квиз после этого.
|
||||
</Typography>
|
||||
<Typography paragraph>
|
||||
Если данные присутствуют (цели в квиз работают), но в Метрике они не
|
||||
отображаются, то вам необходимо проверить последовательность целей в
|
||||
настройках Метрики (если настроена составная цель). Затем нужно
|
||||
дождаться срабатывания цели (возможны задержки со стороны Яндекс) или
|
||||
обратиться в{" "}
|
||||
<a href={"https://yandex.ru/support/"}>техподдержку Яндекс</a> с
|
||||
выяснением возможных проблем.
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@ -7,7 +7,7 @@ type InstructionsBlockProps = {
|
||||
headerText: string;
|
||||
subHeaderText: string;
|
||||
instructionTitle: string;
|
||||
instructionsText: string;
|
||||
instructionsText: JSX.Element;
|
||||
};
|
||||
|
||||
export const InstructionsBlock: FC<InstructionsBlockProps> = ({
|
||||
@ -78,9 +78,7 @@ export const InstructionsBlock: FC<InstructionsBlockProps> = ({
|
||||
>
|
||||
{instructionTitle}
|
||||
</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey3.main }}>
|
||||
{instructionsText}
|
||||
</Typography>
|
||||
{instructionsText}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user