JS скрипт ротации баннеров для сайта

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

Из минусов:

На сайте должна быть подключена библиотека JQuery, так как этот кусочек кода написан не на чистом JS. Думаю, это маленький минус, т.к на большинстве сайтов JQuery подключена по-умолчанию.
Получается не идеальный сплит-тест, потому как показ баннеров будет рандомный, а не с одинаковом количеством показов каждого баннера. Но по UTM меткам (subid) для ссылки, которые обычно предоставляют партнерские программы, можно косвенно определить эффективность тизера.

А вот и сам скрипт (его вставляем в любой js файл вашего сайта, в самое начало, или в конец):

$('.myrotator').replaceWith(function(){
        var imgs = [
          '<a rel="nofollow" href="https://yandex.ru/?subid=bbb1"><img src="https://seodnevnik.ru/img/image-1.jpg" /></a>',
          '<a rel="nofollow" href="https://yandex.ru/?subid=bbb2"><img src="https://seodnevnik.ru/img/image-2.jpg" /></a>',
          '<a rel="nofollow" href="https://yandex.ru/?subid=bbb3"><img src="https://seodnevnik.ru/img/image-3.jpg" /></a>',
        ];      
        var i = Math.floor(Math.random() * imgs.length);
        return imgs[i];
})

В этом куске кода, вы меняете ссылки и картинки на нужные вам:

'<a rel="nofollow" href="https://yandex.ru/?subid=bbb1"><img src="https://seodnevnik.ru/img/image-1.jpg" /></a>',
'<a rel="nofollow" href="https://yandex.ru/?subid=bbb2"><img src="https://seodnevnik.ru/img/image-2.jpg" /></a>',
'<a rel="nofollow" href="https://yandex.ru/?subid=bbb3"><img src="https://seodnevnik.ru/img/image-3.jpg" /></a>',
'<a rel="nofollow" href="https://yandex.ru/?subid=bbb4"><img src="https://seodnevnik.ru/img/image-4.jpg" /></a>',

Количество строк (баннеров), может быть любое. UTM-метка ?subid=… добавлена к ссылкам для примера.

Хочешь научиться создавать крутые баннеры, которые привлекают внимание? 💥 Запишись на курс веб-разработки и создавай свои шедевры! 🤩

В то место сайта, где требуется случайный показ баннеров, вставляем:

<span class="myrotator"></span>

* т.е. сами ссылки находятся в js-файле, а в коде страницы у вас будет только эта строчка, что убирает прямые ссылки на партнерку.

P.S.
Раньше я уже публиковал скрипт ротации баннеров, написанный на PHP. Там более интересный вариант, но со своим существенным минусом — при включенном плагине кэширования, он не будет работать.

Данный JS скрипт-ротатор будет работать даже если на сайте включено кэширование.

JS скрипт ротации баннеров (тизеров)