212 lines
10 KiB
TypeScript
212 lines
10 KiB
TypeScript
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>
|
||
);
|
||
};
|