Ротатор баннеров на любой сайт (баннерокрутилка)

ротатор баннеров скрипт

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

Как добавить ротатор баннеров на любой сайт

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

<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 у вас появится раздел “Реклама”.
плагин баннерокрутилки
Выберите подрубрику “Новое место”. Добавляем название и описание. Здесь еще есть дополнительные настройки. Сохраняем изменения. Теперь жмем на вкладку “Рекламные места” –> Название вашего рекламного места –> Новое объявление ротатор баннеров на wordpress

Даем название объявлению, описание (не обязательно) и добавляем код объявления (это может быть изображение со ссылкой, флеш, скрипт и пр). код ротатора баннеров

Здесь также вы найдете множество настроек –  количество показов, приоритет, на каких страницах запретить показы и пр. Как вставить баннерокрутилку:
Код с id ротатора баннера:

<!--?php if(function_exists('drawAdsPlace')) drawAdsPlace(array('id' =--> 2), true); ?>

Теперь идем в редактор блога и вставляем этот код туда, где вы хотите видеть рекламу.

Как сделать ротатор баннеров на ucoz

Идем в админ панель ucoz. Здесь переходим по пути Инструменты –> Ротатор баннеров ротатор баннеров на ucoz

Создаем категорию:

категория ротаторов баннеров юкоз
Нужно лишь дать ей название. Теперь нажмите на кнопку “Добавить баннер”: баннерокрутилка юкоз

Здесь даем название баннеру, выбираем категорию, в которой будут отображаться баннеры (вы только что ее создали), ссылку на изображение и партнерскую ссылку или весь код баннера, приоритет, дни недели пока баннера и некоторые другие настройки и сохраняем изменения. Таким образом мы добавляем несколько баннеров в одну категорию. Когда все баннеры будут добавлены – скопируйте код категории:

получить код

Включите конструктор на главной странице сайта ucoz, добавьте новый блок, вставьте код баннерокрутилки в режиме HTML и сохраните изменения. И еще приятное для владельцев блогов - скрипт от юкоа можно добавить на блоги других платформ, и он будет прекрасно работать! Спасибо за внимание!

Оцените статью
Добавить комментарий

  1. Анонимный

    Статья хорошая. Мне про Ucoz вообще сильно помогло, так как я ещё только начинаю своё знакомство со всем этим миром. Автору +++

    Ответить
  2. Иванова Наталья

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

    Ответить
  3. Алексей Рупор

    Подскажите, как поставить более одного такого виджета? Один работает но когда добавляю еще то остается один но с ссылками от нового. Может часть кода нужно удалить? Какую? Спасибо.

    Ответить
  4. Иванова Наталья

    Алексей, вам достаточно в другой баннерокрутилке сделать собственный идентификатор. В примере идентификатор <div id="adspace"> замените его на другой id, например id='bannerpro' или придумайте свое название. Измените во всем коде идентификатор на тот, который вы придумали. Особенно это важно в этой строке:
    document.getElementById('adspace').innerHTML = (mycrib[sort]);
    Она примет вид:
    document.getElementById('bannerpro').innerHTML = (mycrib[sort]);
    Если непонятно - пишите.

    Ответить
  5. Анонимный

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

    Ответить
  6. Berg Offender

    А что делать если у меня на юкозе админ панель вообще не такая? В такую как увас я зайти не могу, а в той которая есть нет таких функций

    Ответить
  7. Иванова Наталья

    Bern Offender, не знала, что админке на юкозе могут различаться... Может, плохо искали?

    Ответить
  8. Анонимный

    Здравствуйте. Я могу вашу статью опубликовать на моем сайте с ссылкой на источник? Если да, тогда дайте знать.

    Ответить
  9. Иванова Наталья

    Анонимный, если только одну, то размещайте..

    Ответить
  10. Анонимный

    Не не работает смена баннеров. три банера сразу отображаются. а хотелось бы что бы в одном блоке просто менялись баннера.

    Ответить
  11. Станислав

    Замечательный, компактный и простой скрипт, но: Как сделать автоматическую смену баннеров - без обновления страницы?
    Ответить можно в личку.
    Спасибо!

    Ответить