docs.modx.pro
  1. Компоненты
  2. BannerPro
  3. Начало работы

Быстрый старт ​

Выводим один баннер в позиции sidebar и проверяем учёт клика.

Шаг 1: Установите зависимости ​

  1. Установите BannerPro через менеджер пакетов MODX (MODX 3, PHP 8.2+).
  2. Проверьте, что установлен pdoTools. Без него сниппет вернёт текст You need to install pdoTools to use this snippet!.
  3. Проверьте VueTools. Без него страница Компоненты → BannerPro не загрузит Vue-интерфейс.
  4. Очистите кэш MODX.

Шаг 2: Создайте позицию ​

Откройте Компоненты → BannerPro → Позиции и создайте позицию:

Вкладка «Позиции»

ПолеЗначение
Названиеsidebar
КонтекстПусто (все контексты) или web

Имя позиции стабильнее ID: его видно в шаблоне и оно не меняется между стендами.

Без позиций кнопка Новый баннер покажет предупреждение. Сначала создайте слот.

Шаг 3: Создайте баннер ​

Откройте вкладку Баннеры. Пока настройка не завершена, панель «Настройка BannerPro» покажет чеклист: позиции, баннеры, привязки, плагин Clickout, опционально учёт показов.

Создайте запись (Новый баннер или Создать из шаблона):

ПолеЧто указать
НазваниеВнутреннее имя баннера
ТипИзображение или HTML (вкладка «Основное»)
URL[[~5]] для ресурса MODX или внешний адрес
Изображение / HTMLКонтент баннера
АктивенДа
Позицииsidebar

Для первого теста оставьте даты на вкладке Показ пустыми. Баннер будет работать без ограничения по времени.

Форма нового баннера

Подробно по экранам: Админка.

Шаг 4: Вставьте сниппет ​

Добавьте вызов в шаблон или чанк сайта.

fenom
{'!BannerPro' | snippet : [
  'positionName' => 'sidebar',
  'tpl' => 'byAd',
  'limit' => 1
]}
modx
[[!BannerPro?
  &positionName=`sidebar`
  &tpl=`byAd`
  &limit=`1`
]]

Сниппет по умолчанию сортирует баннеры через RAND(), поэтому такой вызов не кэширует HTML.

Шаг 5: Проверьте клик ​

Откройте страницу с баннером. В HTML ссылка должна вести на адрес вида:

text
/bannerclick/42

42 в URL: ID связи в bannerpro_ads_positions, плейсхолдер [[+adposition]].

Клик по ссылке запускает плагин BannerProClickout на событии OnPageNotFound, пишет запись в bannerpro_clicks и перенаправляет посетителя на URL баннера.

Шаг 6: Включите показы ​

Если нужна статистика показов, включите настройку bannerpro_track_impressions.

После этого сниппет оборачивает баннер в data-bannerpro-impression, подключает impression.js и отправляет pixel-запрос:

text
/bannerimpression/{adposition}

Плагин BannerProImpression должен быть включён на OnPageNotFound.

Проверка ​

Что проверитьОжидаемый результат
Страница с вызовом сниппетаВы видите баннер
Исходный кодСсылка содержит bannerclick/{adposition}
Клик по баннеруОткрывается URL баннера
Вкладка СтатистикаСчётчик кликов растёт после первого клика с IP за сутки
bannerpro_track_impressions = ДаВ HTML есть data-bannerpro-impression

Статистика BannerPro

Что дальше ​