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

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

Из минусов:

  1. На сайте должна быть подключена библиотека JQuery, так как этот кусочек кода написан не на чистом JS. Думаю, это маленький минус, т.к на большинстве сайтов JQuery подключена по-умолчанию.
  2. Получается не идеальный сплит-тест, потому как показ баннеров будет рандомный, а не с одинаковом количеством показов каждого баннера. Но по 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 скрипт-ротатор будет работать даже если на сайте включено кэширование.

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

  1. seoonly.ru

    спасибо, скрипт крут

    Ответить
  2. irmaseo.ru

    спасибо, очень полезная информация

    Ответить