Как зафиксировать рекламный блок на сайте и увеличить доход

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

Описание проблемы

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

Задача

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

Результат

Увеличение конверсии, больше кликов по рекламе, рост рекламного дохода.

Реализация

Для начала нужно присвоить уникальный ID нашему рекламному блоку. Для этого код нашего банера нужно поместить между строками:

<div id="уникальное-название-блока">
<!-- код вашего рекламного блока -->
</div>

Теперь добавляем скрипт перед закрывающим тегом </body> в index.php или footer.php, в зависимости где он у Вас расположен:

<script type="text/javascript">
function getTopOffset(e) {
var y = 0;
do { y += e.offsetTop; } while (e = e.offsetParent);
return y;
}
var block = document.getElementById('уникальное-название-блока');
if ( null != block ) {
var topPos = getTopOffset( block );

window.onscroll = function() {
var scrollHeight = Math.max( document.documentElement.scrollHeight, document.documentElement.clientHeight),

// высота рекламного блока
blockHeight = 400,

// высота футера
footerHeight = 500,

// считаем позицию, до которой блок будет зафиксирован
stopPos = scrollHeight - blockHeight - footerHeight;

var newcss = (topPos < window.pageYOffset) ?
'top:20px; position: fixed;' : 'position:static;';

if ( window.pageYOffset > stopPos )
newcss = 'position:static;';

block.setAttribute( 'style', newcss );
}
}
</script>

Вот, в принципе и все. Я поставил себе этот js-код на инфо-сайты, немножко подрегулировав высоту рекламы и футера. Мой рекламный доход вырос в 2 раза!

Если будут вопросы — оставляйте в комментариях.

Удачи!

Оценка:
( 1 оценка, среднее 5 из 5 )
Виталий Крашенинин / автор статьи
Основатель блога, публицист, IT-специалист
Понравилась статья? Поделиться с друзьями:
Opt In Image
Хочешь первым получать свежую информацию от меня?
Тогда подписывайся ↓
Krasheninin IT Блог - все о веб-технологиях, и не только
Комментариев: 2
  1. Blade

    Прочитал статью. Есть некоторые замечания. Как можно с Вами связаться по телефону? У Вас есть Вайбер или Телеграм :?:

    1. Виталий Крашенинин (автор)

      Мой Телеграм: https://t.me/krasheninin_it

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

один × 3 =

>