# Media Plan Builder: гайд по сервису

Media Plan Builder — внутренний веб-сервис маркетингового агентства для сборки медиапланов, расчета бюджета и KPI, а также подготовки клиентского preview. Текущий релиз сфокусирован на одном шаблоне: **Яндекс ПромоСтраницы**.

![Dashboard](./screenshots/01-dashboard.svg)

## 1. Назначение сервиса

Сервис помогает менеджеру быстро собрать единый proposal-документ без ручных расчетов в Excel. Пользователь вводит данные клиента, бюджет, прогнозные коэффициенты и текстовые блоки, а система автоматически пересчитывает финансовую часть, KPI и показывает live preview клиентского медиаплана.

Основной результат работы сервиса — аккуратный клиентский медиаплан в формате веб-preview. PDF-экспорт в текущем релизе пока находится в режиме placeholder.

## 2. Что входит в текущий релиз

### 2.1 Dashboard медиапланов

На странице `/plans` отображается список медиапланов.

Доступные возможности:

- просмотр всех медиапланов;
- поиск по клиенту;
- фильтр по статусу: все, черновик, опубликован, архив;
- просмотр суммы проекта и CPL;
- открытие медиаплана в редакторе;
- дублирование медиаплана;
- архивирование медиаплана;
- переход к созданию нового медиаплана.

![Dashboard](./screenshots/01-dashboard.svg)

### 2.2 Создание медиаплана

На странице `/plans/new` менеджер создает новый медиаплан на основе шаблона.

Заполняются поля:

- название клиента;
- сайт;
- GEO;
- период размещения;
- инструмент;
- шаблон;
- менеджер.

После отправки формы создается объект медиаплана и открывается редактор.

![Create plan](./screenshots/02-create-plan.svg)

### 2.3 Редактор медиаплана

Редактор доступен по адресу `/plans/[id]/edit`. Интерфейс разделен на две части:

- слева — панель редактирования с аккордеонами;
- справа — live preview клиентского документа.

Все изменения сразу отражаются в preview.

![Editor](./screenshots/03-editor.svg)

В верхнем меню редактора доступны:

- `Вернуться к списку`;
- `Проверить`;
- `Предпросмотр`;
- `Скачать PDF`;
- `Опубликовать`;
- `Скопировать ссылку`;
- индикатор автосохранения.

### 2.4 Данные клиента

В разделе редактируются:

- название клиента или бренда;
- сайт;
- GEO;
- категория / отрасль;
- цель кампании.

Эти данные используются в preview, dashboard и validation.

### 2.5 Документ

В разделе редактируются:

- название документа;
- дата подготовки через date picker;
- период размещения;
- инструмент;
- тип аккаунта;
- валюта.

Тип аккаунта влияет на расчет:

- `Агентский` — комиссия к рекламному бюджету не добавляется;
- `Клиентский` — добавляется комиссия 10% от рекламного бюджета.

### 2.6 Бюджет

Менеджер вводит:

- рекламный бюджет без НДС;
- стоимость настройки;
- стоимость продакшна;
- стоимость сопровождения.

Система автоматически считает:

- комиссию клиентского аккаунта 10%, если выбран клиентский аккаунт;
- НДС на рекламный бюджет;
- рекламный бюджет с НДС;
- сумму услуг без НДС;
- НДС на услуги;
- услуги с НДС;
- итог проекта.

Финансовая часть в preview выделена отдельным блоком. Обычные суммы отображаются обычным весом, а цена в строке `Итого проект` выделена сильнее.

![Finance](./screenshots/05-finance.svg)

### 2.7 Прогноз

Менеджер вводит:

- количество статей;
- стоимость открытия;
- долю дочитываний;
- долю переходов на сайт;
- Post-Read CR.

Система автоматически считает:

- открытия статей;
- дочитывания;
- переходы на сайт;
- Post-Read конверсии;
- CPL Post-Read.

Формулы вынесены в отдельный расчетный модуль.

### 2.8 Тексты

В редакторе можно менять:

- краткий вывод;
- описание решения;
- список аргументов;
- следующий шаг.

Есть действия:

- вернуть шаблонный текст;
- скопировать текст.

### 2.9 Состав работ

Состав работ разделен на три группы:

- настройка;
- продакшн;
- сопровождение.

Каждый список можно редактировать: добавлять, удалять и менять пункты.

### 2.10 Команда проекта

Для каждой роли можно редактировать:

- название роли;
- описание зоны ответственности;
- иконку из списка.

Иконки отображаются в клиентском preview.

### 2.11 Допущения и пояснения

Допущения редактируются отдельным списком. В редакторе есть предупреждение, что это методологически и юридически важный блок.

В preview пункты оформлены с длинным тире в том же ритме, что и `Состав работ`.

### 2.12 Проверка медиаплана

Validation panel показывает:

- общий статус проверки;
- ошибки;
- предупреждения;
- секцию, к которой относится проблема;
- кнопку перехода к разделу.

Проверяются:

- обязательные поля клиента;
- сайт;
- данные менеджера;
- рекламный бюджет;
- стоимость открытия;
- возможность посчитать Post-Read конверсии и CPL;
- нетипичные коэффициенты и бюджеты.

### 2.13 Публичный preview

После публикации менеджер может открыть публичную ссылку `/p/[token]`.

Публичная страница использует тот же `PlanDocument`, но показывает более клиентский интерфейс.

![Public preview](./screenshots/04-public-preview.svg)

На публичной странице доступны:

- просмотр медиаплана;
- кнопка `Скачать PDF` с placeholder-сообщением;
- кнопка связи с менеджером.

### 2.14 PDF placeholder

Кнопка `Скачать PDF` уже есть в редакторе и публичной версии. В текущем релизе она показывает сообщение:

> PDF-экспорт будет подключен на следующем этапе.

### 2.15 Хранение данных

В текущем MVP данные хранятся в `localStorage` браузера.

Это удобно для frontend-проверки, но имеет ограничения:

- у каждого пользователя свой список медиапланов;
- публичные ссылки работают только в браузере, где есть соответствующий план;
- нет синхронизации между пользователями;
- нет серверного хранения истории.

## 3. Инструкция по работе с сервисом

### Шаг 1. Открыть список медиапланов

Перейдите на:

```text
/plans
```

На странице отображается список существующих медиапланов.

![Dashboard](./screenshots/01-dashboard.svg)

### Шаг 2. Создать новый медиаплан

Нажмите `Создать медиаплан`.

Заполните:

- клиента;
- сайт;
- GEO;
- период;
- менеджера.

Нажмите `Создать и открыть редактор`.

![Create plan](./screenshots/02-create-plan.svg)

### Шаг 3. Заполнить данные документа

В редакторе откройте раздел `Документ`.

Укажите:

- название документа;
- дату подготовки;
- период;
- инструмент;
- тип аккаунта.

Если выбран `Клиентский` аккаунт, система автоматически добавит комиссию 10% к рекламному бюджету.

![Editor](./screenshots/03-editor.svg)

### Шаг 4. Заполнить бюджет

Откройте раздел `Бюджет`.

Введите:

- рекламный бюджет;
- настройку;
- продакшн;
- сопровождение.

Readonly-поля пересчитаются автоматически. Проверяйте итог проекта в preview справа.

### Шаг 5. Настроить прогноз

Откройте раздел `Прогноз`.

Введите:

- стоимость открытия;
- долю дочитываний;
- долю переходов;
- Post-Read CR.

Система пересчитает открытия, дочитывания, переходы, конверсии и CPL.

### Шаг 6. Отредактировать тексты

Откройте раздел `Тексты`.

Проверьте:

- краткий вывод;
- решение;
- обоснование;
- следующий шаг.

При необходимости используйте `Вернуть шаблон`.

### Шаг 7. Проверить состав работ

Откройте раздел `Состав работ`.

Проверьте списки:

- настройка;
- продакшн;
- сопровождение.

Добавьте или удалите пункты под конкретный проект.

### Шаг 8. Настроить команду

Откройте раздел `Команда`.

Для каждой роли можно изменить:

- название;
- описание;
- иконку.

### Шаг 9. Проверить допущения

Откройте раздел `Допущения`.

Проверьте формулировки перед отправкой клиенту.

### Шаг 10. Запустить проверку

Нажмите `Проверить` в верхнем меню или откройте раздел `Проверка`.

Если есть ошибки, исправьте их в соответствующих разделах. Если есть предупреждения, проверьте, действительно ли прогнозные значения реалистичны.

### Шаг 11. Опубликовать медиаплан

Нажмите `Опубликовать`.

Сервис присвоит медиаплану статус `Опубликован` и подготовит публичную ссылку.

### Шаг 12. Скопировать ссылку

Нажмите `Скопировать ссылку`.

Передайте ссылку клиенту или команде для просмотра.

### Шаг 13. Открыть публичный preview

Откройте публичную страницу:

```text
/p/[token]
```

![Public preview](./screenshots/04-public-preview.svg)

## 4. Возможные функции в следующих обновлениях

### 4.1 Backend и общая база данных

Главный следующий этап — заменить `localStorage` на серверное хранение.

Возможности:

- единый список медиапланов для всей команды;
- работа с одного аккаунта на разных устройствах;
- корректные публичные ссылки;
- сохранение истории изменений;
- резервное копирование данных.

### 4.2 Авторизация и роли

Можно добавить роли:

- администратор;
- менеджер;
- руководитель группы;
- клиентский просмотр.

Роли позволят ограничивать доступ к редактированию, публикации и архивированию.

### 4.3 Реальный PDF export

Следующий этап PDF:

- генерация PDF из `PlanDocument`;
- корректные отступы под печать;
- сохранение фирменного стиля;
- скачивание из редактора и публичной страницы.

### 4.4 Несколько шаблонов медиапланов

Можно добавить шаблоны:

- Яндекс Директ;
- VK Реклама;
- Telegram Ads;
- Programmatic;
- комплексный медиаплан из нескольких каналов.

### 4.5 Версионирование медиапланов

Полезно для согласований:

- версия 1;
- версия 2 после правок клиента;
- история изменений бюджета и KPI;
- сравнение версий.

### 4.6 Комментарии и согласование

Клиент или руководитель сможет:

- оставлять комментарии к блокам;
- задавать вопросы;
- согласовывать медиаплан;
- видеть статус согласования.

### 4.7 Библиотека клиентов и менеджеров

Можно вынести в справочники:

- клиентов;
- менеджеров;
- индустрии;
- типовые цели кампаний;
- шаблонные тексты;
- типовые составы работ.

### 4.8 Расширенная аналитика и риск-модель

Будущая validation-система может показывать:

- риск завышенного CR;
- риск недостаточного бюджета;
- диапазон прогноза: pessimistic / base / optimistic;
- рекомендации по корректировке бюджета.

### 4.9 Импорт из Excel

Для переходного периода можно добавить:

- импорт текущих Excel-медиапланов;
- распознавание строк бюджета;
- перенос прогнозных значений;
- автосборку preview.

### 4.10 Экспорт и интеграции

Возможные интеграции:

- CRM;
- Google Drive;
- Bitrix24;
- amoCRM;
- Slack / Telegram-уведомления;
- email-отправка публичной ссылки.

## 5. Текущие технические ограничения

Текущий релиз — frontend MVP.

Ограничения:

- нет базы данных;
- нет авторизации;
- нет серверного API;
- нет настоящего PDF export;
- данные завязаны на браузер пользователя;
- публичная ссылка не является настоящей серверной публичной ссылкой.

Эти ограничения нормальны для текущего этапа, потому что MVP проверяет UX, структуру документа, расчетную модель и визуальный формат медиаплана.

## 6. Рекомендуемый следующий этап

Перед переходом к backend стоит:

1. Провести командную проверку текущего UI.
2. Зафиксировать финальную структуру медиаплана.
3. Утвердить расчетную модель.
4. Утвердить визуальный вид preview.
5. После этого подключать серверное хранение, пользователей и PDF.