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>
  );
};