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