Ротатор баннеров вливают на сайт, ожидая увеличения конверсии (переходов или продаж, в зависимости от цели) рекламных блоков. По другому ротатор баннеров называют еще баннерокрутилкой. После установки скрипта ваши посетители видят разную рекламу на одном рекламном месте. В зависимости от вида ротатора, баннер могут меняться в течении некоторого заданного времени (один баннер показывается несколько секунд, а затем меняется на другой) или после обновления страницы, а также при переходе на другую страницу.
Как добавить ротатор баннеров на любой сайт
Я хочу поделиться с вами универсальным скриптом ротатора баннеров, который подойдет для любого сайта или блога.
<script> const banners = [ '<a href="ваша партнерская ссылка" target="_blank" rel="nofollow"><img src="ссылка на изображение баннера" alt="название баннера" width="300" height="250"></a>', '<a href="ваша партнерская ссылка" target="_blank" rel="nofollow"><img src="ссылка на изображение баннера" alt="название баннера" width="300" height="250"></a>', '<a href="ваша партнерская ссылка" target="_blank" rel="nofollow"><img src="ссылка на изображение баннера" alt="название баннера" width="300" height="250"></a>' ]; function rotateBanners(banners) { const randomIndex = Math.floor(Math.random() * banners.length); document.getElementById('adspace').innerHTML = banners[randomIndex]; } rotateBanners(banners); </script> <style> #adspace { } #adspace img { } </style> <div id="adspace"></div>
Скопируйте код и видоизмените его - вставьте баннеры. Замените примеры баннеров на свои. Каждый баннер должен быть в формате HTML-ссылки с изображением. Например:
const banners = [ '<a href="https://example.com/link1" target="_blank" rel="nofollow"><img src="https://example.com/banner1.jpg" alt="Banner 1" width="300" height="250"></a>', '<a href="https://example.com/link2" target="_blank" rel="nofollow"><img src="https://example.com/banner2.jpg" alt="Banner 2" width="300" height="250"></a>', '<a href="https://example.com/link3" target="_blank" rel="nofollow"><img src="https://example.com/banner3.jpg" alt="Banner 3" width="300" height="250"></a>' ];
href
: Замените на свою партнерскую ссылку или URL, куда будет вести баннер.src
: Замените на ссылку на изображение баннера.alt
: Замените на описание баннера (для SEO и доступности).width
иheight
: Укажите размеры баннера (при необходимости измените на свои).
Вставьте код на сайт. Сохраните изменения. Откройте HTML-файл вашего сайта или раздел, где вы хотите разместить ротатор баннеров.
Вставьте скопированный код в нужное место на странице.
- Если у вас WordPress – в виджет Текст,
- В Blogger (Blogspot) – в гаджет HTML/JavaScript,
- на Ucoz – добавить новый блок и вставить в поле HTML.
Генератор баннерокрутилки
В интернете существуют специальные сервисы для генерации ротатора баннеров. Примером является Робаннер. Чтобы воспользоваться генератором, необходимо вставить ссылки на изображения баннеров и партнерские ссылки на продукты.

Узнайте как повысить цену клика в Google Adsense
Ротатор баннеров на wordpress
Интересным плагином для wordpress, выполняющим ротацию баннером является Simple Ads Manager. Установите и активируйте плагин. В результате в левой панели админки WordPress у вас появится раздел “Реклама”.
Выберите подрубрику “Новое место”. Добавляем название и описание. Здесь еще есть дополнительные настройки. Сохраняем изменения. Теперь жмем на вкладку “Рекламные места” –> Название вашего рекламного места –> Новое объявление
Даем название объявлению, описание (не обязательно) и добавляем код объявления (это может быть изображение со ссылкой, флеш, скрипт и пр).
Здесь также вы найдете множество настроек – количество показов, приоритет, на каких страницах запретить показы и пр. Как вставить баннерокрутилку:
Код с id ротатора баннера:
<!--?php if(function_exists('drawAdsPlace')) drawAdsPlace(array('id' =--> 2), true); ?>
Теперь идем в редактор блога и вставляем этот код туда, где вы хотите видеть рекламу.
Как сделать ротатор баннеров на ucoz
Идем в админ панель ucoz. Здесь переходим по пути Инструменты –> Ротатор баннеров
Создаем категорию:
Нужно лишь дать ей название. Теперь нажмите на кнопку “Добавить баннер”:
Здесь даем название баннеру, выбираем категорию, в которой будут отображаться баннеры (вы только что ее создали), ссылку на изображение и партнерскую ссылку или весь код баннера, приоритет, дни недели пока баннера и некоторые другие настройки и сохраняем изменения. Таким образом мы добавляем несколько баннеров в одну категорию. Когда все баннеры будут добавлены – скопируйте код категории:
Включите конструктор на главной странице сайта ucoz, добавьте новый блок, вставьте код баннерокрутилки в режиме HTML и сохраните изменения. И еще приятное для владельцев блогов - скрипт от юкоа можно добавить на блоги других платформ, и он будет прекрасно работать! Спасибо за внимание!
Статья хорошая. Мне про Ucoz вообще сильно помогло, так как я ещё только начинаю своё знакомство со всем этим миром. Автору +++
Да, ucoz предлагает хороший вариант баннерокрутилки, но не каждый будет заводить сайт на юкозе лишь для этой цели.
Подскажите, как поставить более одного такого виджета? Один работает но когда добавляю еще то остается один но с ссылками от нового. Может часть кода нужно удалить? Какую? Спасибо.
Алексей, вам достаточно в другой баннерокрутилке сделать собственный идентификатор. В примере идентификатор <div id="adspace"> замените его на другой id, например id='bannerpro' или придумайте свое название. Измените во всем коде идентификатор на тот, который вы придумали. Особенно это важно в этой строке:
document.getElementById('adspace').innerHTML = (mycrib[sort]);
Она примет вид:
document.getElementById('bannerpro').innerHTML = (mycrib[sort]);
Если непонятно - пишите.
Спасибо тебе добрый человек! Ты мне реально сильно помог!
А что делать если у меня на юкозе админ панель вообще не такая? В такую как увас я зайти не могу, а в той которая есть нет таких функций
Bern Offender, не знала, что админке на юкозе могут различаться... Может, плохо искали?
Здравствуйте. Я могу вашу статью опубликовать на моем сайте с ссылкой на источник? Если да, тогда дайте знать.
Анонимный, если только одну, то размещайте..
Не не работает смена баннеров. три банера сразу отображаются. а хотелось бы что бы в одном блоке просто менялись баннера.
Замечательный, компактный и простой скрипт, но: Как сделать автоматическую смену баннеров - без обновления страницы?
Ответить можно в личку.
Спасибо!