Централизованное управление баннерами

Самостоятельно создавайте баннеры на своем сайте без привлечения программистов

10 февраля 2017, версия 1.1


Изучаем приложение «Умные баннеры», которое призвано помочь рядовому пользователю самостоятельно добавлять на страницы своего сайта баннеры для привлечения внимания посетителей к отдельным страницам, товарам и тому подобному.

Предполагается следующий порядок действий:

  1. Создать баннер.
  2. Добавить в него изображения, прописать каждому изображению ссылку, если это необходимо.
  3. Указать другие параметры баннера.
  4. Скопировать код размещения баннера и добавить его в шаблон темы дизайна.
  5. Отслеживание статистики переходов.

Посмотрим, как этот процесс выглядит на практике.

1. Создание баннера

При добавлении нового баннера в бекенде приложения требуется указать условное название (на сайте не отображается и видно только вам в бекенде для удобства), размеры баннера в пикселях и необходимость обрабатывать изображения под размер баннера.

Первый вопрос, который возникает при указании размеров: как сделать баннер автоматически растягивающимся по всей ширине страницы? Ответ на него найти не удалось. Видимо, ширина баннера всегда фиксированная. Как минимум, это значит, что широкий баннер на небольших экранах не будет помещаться, а значит, нужно задавать ему такую ширину, чтобы баннер поместился на любом экране. Если учитывать максимальное количество устройств пользователей начиная от нетбуков и планшетов, то баннер имеет смысл делать небольшим по ширине.

Настройка «Обрабатывать изображения под размер баннера» уменьшает размер изображений, если они не помещаются в прямоугольник баннера с указанными размерами.

2. Добавление изображений

Изображения можно загружать по одному или сразу пачкой. Привычным в последнее время перетаскиванием из файлового менеджера удалось загрузить фотографии, только если прицелиться точно на кнопку выбора файлов. Специальной «чувствительной» для перетаскивания файлов области в приложении нет. Но зато сразу после загрузки все выбранные изображения сразу сохраняются, и подтверждать загрузку кнопкой «Сохранить» нет необходимости.

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

Для каждого изображения можно также указать описание. Где это описание отображается, удалось выяснить опытным путем: оно появляется в виде стандартной всплывающей подсказки браузера при наведении курсора на изображение. При использовании планшетов оно останется скрытым, т. к. курсора, который можно было бы навести на баннер, на них нет.

Другая особенность, на которую обратили внимание: щелчок по баннеру приводит к перенаправлению на адрес, указанный для текущего изображения, причем это перенаправление сопровождается 302-м кодом ответа сервера. Если вам нужно обязательно использовать 301-й код редиректа для организации поисковой оптимизации, текущая версия приложения пока что не предоставляет возможности изменить это.

Загруженные изображения легко менять местами простым перетаскиванием. После перетаскивания нужно сохранить настройки баннера, чтобы новый порядок применился на сайте.

Каждое изображение можно временно отключить и затем включить снова. Нечаянно обнаружилась незаявленная разработчиком, но, возможно, полезная для кого-то возможность: если загрузить для баннера только одно изображение, то баннер будет статичным — без анимации.

3. Расширенные настройки баннера

Сразу после добавления первого баннера видим подсказку о том, что для подсчета переходов по баннерам требуется добавление поселения в структуре сайта. Переходим по ссылке в настройки структуры и добавляем поселение. Только не забудьте при этом отметить, что поселение должно быть скрытым, иначе в главном меню сайта может появиться ссылка на приложение «Умные баннеры», которая покажет посетителю сайта сообщение о несуществующей странице.

Доступный набор настроек баннера:

  • анимация появления и исчезновения изображений:

    — Скачками
    — Скачками вниз
    — Скачками слева
    — Скачками справа
    — Скачками вверх
    — Плавное появление
    — Плавно вниз
    — Плавно вниз 2
    — Плавно слева
    — Плавно слева 2
    — Плавно справа
    — Плавно справа 2
    — Плавно вверх
    — Плавно вверх 2
    — Кручение по горизонтали
    — Кручение по вертикали
    — Торможение
    — Вращение
    — Вращение слева вниз
    — Вращение справа вниз
    — Вращение слева вверх
    — Вращение справа вверх
    — Качели
    — Увеличение
    — Увеличение вниз
    — Увеличение слева
    — Увеличение справа
    — Увеличение вверх

  • скорость анимации: 5 режимов
  • время показа каждого изображения — в миллисекундах
  • размер кнопок листания изображений (отображаются по бокам баннера) и кнопок навигации по изображениям (отображаются в виде кружков в нижней части баннера): три размера и возможность отключить показ кнопок
  • основной цвет и цвет фона кнопок; для выбора цвета используется удобный визуальный интерфейс, но может и ввести значение цвета вручную в виде шестнадцатеричного значения (значения цвета в виде «red» или «black» не поддерживаются)

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

4. Размещение баннера на сайте

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

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

5. Просмотр статистики

Приложение показывает статистику показов всего баннера и каждого из его изображений, а также количество переходов и соотношение количества переходов к количеству показов (CTR), т. е. фактическую «привлекательность» баннера и его отдельных слайдов. Эта информация поможет оценивать качество оформления и корректировать настройки баннера, чтобы достигать более высоких значений.

Итог

Приложение оставило противоречивое впечатление. Несомненные плюсы (быстрое добавление, отключение баннеров и отдельных изображений, статистика переходов, множество интересных эффектов анимации) смазываются небольшими минусами (отсутствие возможности динамически растягивать баннер на всю ширину экрана или блока, в который он вставлен, отсутствие возможности показать текст описания изображения-слайда без использования курсора мыши, отсутствие функции предварительного просмотра перед окончательным сохранением). И еще немного не хватает чуть больше эстетики в оформлении бекенда приложения. Конечно, на его функциональность это никак не влияет, но все же хочется, чтобы рабочий инструмент (к тому же использующийся для создания «красоты» на сайте) давал дополнительный стимул для творчества.

* * *

«Умные баннеры» в Магазине Webasyst: https://www.webasyst.ru/store/app/smartb/