Білі сторінки

Що таке 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 в корені, відносні шляхи). Якщо помилка повторюється — зверніться в підтримку.