Что такое White Page?

White Page — это статический сайт-заглушка, который показывается вместо основного контента при проверке модерацией рекламных платформ или для определённых категорий трафика (whitelist). White Page должен выглядеть как обычный безобидный сайт (блог, магазин, корпоративный сайт и т.д.).

---

1. Требования к White Page

1.1 Формат архива

White Page загружается как ZIP-архив со следующими требованиями:

• Максимальный размер архива: 10 МБ

• В корне архива должен находиться файл index.html

• Архив может содержать вложенные папки с ресурсами (CSS, JS, изображения, шрифты и т.д.)

Правильная структура ZIP:

my-whitepage.zip
├── index.html          ← обязательно в корне
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/
    ├── logo.png
    └── banner.jpg

Неправильная структура (index.html внутри подпапки):

my-whitepage.zip
└── my-site/            ← ✗ нельзя вкладывать в папку
    ├── index.html
    └── css/
        └── style.css

1.2 Полностью статический контент

White Page должен быть полностью статическим сайтом:

• ✅ HTML, CSS, JavaScript, изображения, шрифты

• ✅ Inline-стили и inline-скрипты

• ❌ Серверные скрипты (PHP, Python, Node.js и т.д.)

• ❌ Динамические API-запросы к внешним серверам (могут вызвать блокировку)

• ❌ Подключение внешних ресурсов с подозрительных доменов

1.3 Только относительные URL

Это самое важное правило. Все ссылки на ресурсы (CSS, JS, изображения, шрифты) внутри White Page должны быть относительными.

✅Правильно — относительные пути:

<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>
<img src="images/logo.png" alt="Logo">

/* В CSS-файлах тоже относительные пути */
background-image: url('../images/bg.jpg');

@font-face {
  src: url('../fonts/roboto.woff2');
}

❌Неправильно — абсолютные пути:

<!-- ✗ Абсолютный путь -->
<link rel="stylesheet" href="/css/style.css">
<script src="/js/main.js"></script>
<img src="/images/logo.png" alt="Logo">

<!-- ✗ Полный URL на свои файлы -->
<link rel="stylesheet" href="https://my-server.com/css/style.css">

Почему? Относительные пути корректно работают на домене любой кампании, где будет опубликована White Page.

1.4 Допустимые внешние ресурсы

Подключение популярных внешних библиотек через CDN допускается:

<!-- ✅ Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<!-- ✅ Bootstrap, jQuery и другие популярные CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

---

2. Создание White Page

1. Перейдите в раздел PWA → White Pages

2. Нажмите кнопку "Добавить"

3. Заполните поля:

   • Name — понятное название (например, «Блог о кулинарии»)

   • Active — статус активности

   • ZIP archive — загрузите подготовленный ZIP-архив

4. Нажмите "Save"

После сохранения архив будет автоматически распакован и загружен на CDN. Статус сменится на Ready после успешной обработки.

---

3. Редактирование HTML

Вы можете редактировать содержимое index.html прямо в браузере:

1. В таблице White Pages нажмите ⋮ (меню действий) напротив нужной записи

2. Выберите "Edit HTML"

3. Откроется редактор с двумя панелями:

   • Слева — редактор кода с подсветкой синтаксиса

   • Справа — живой предпросмотр страницы

4. Внесите изменения в HTML

5. Нажмите "Save" для сохранения

Горячие клавиши в редакторе

---

4. Просмотр на CDN

Чтобы просмотреть опубликованную White Page:

1. Нажмите ⋮ → "Open CDN"

2. Страница откроется в новой вкладке

---

5. Использование в кампаниях

При создании или редактировании кампании в разделе Трекер → Кампании:

1. В поле White Page выберите нужную страницу из выпадающего списка

2. В списке отображаются:

   • White Pages вашей команды

   • Системные White Pages (отмечены как «Системный») — доступны всем командам

---

6. Статусы White Page

После загрузки статус обновляется автоматически — дождитесь Ready (или Error), перезагружать страницу не нужно. При статусе Error нажмите на него, чтобы увидеть причину ошибки.

---

7. Частые ошибки

Страница отображается без стилей / картинок

Причина: Используются абсолютные пути вместо относительных. Решение: Замените все /css/..., /js/..., /images/... на css/..., js/..., images/... (без ведущего /).

Ошибка при загрузке архива

Причина: Файл index.html не находится в корне архива. Решение: Убедитесь, что при создании ZIP файл index.html лежит на верхнем уровне, а не внутри подпапки.

Статус «Error» после загрузки

При статусе Error нажмите на него, чтобы увидеть причину. Затем пересоберите архив по правилам из раздела 1 (размер до 10 МБ, index.html в корне, относительные пути). Если ошибка повторяется — обратитесь в поддержку.