Як зафіксувати рекламний блок на сайті й збільшити дохід

У сьогоднішньому блозі я розповім як зафіксувати рекламний блок на сайті за допомогою Java Script. В результаті отримаємо: збільшення конверсії, більше кліків по рекламі, зростання рекламного доходу. Мій приклад ви зможете застосувати на будь-якому сайті.

Фіксований рекламний блок на сайті

Я підключив блок реклами на своєму сайті. Статті у мене довгі й при гортанні реклама прокручується разом з текстом, через що кількість кліків по рекламі зменшується. Щоб це виправити та збільшити дохід, необхідно зафіксувати рекламний блок на одному місці – так, щоби при прокручуванні він завжди залишався на своїй позиції. Цей спосіб має назву – sticky baner.

Як реалізувати?

Для початку необхідно присвоїти рекламному блоку унікальний ідентифікатор ID. Для цього код банера поміщаємо між рядками:

<div id="уникальное-название-блока">

</div>

Тепер у шаблоні перед закриваючим </body> додаємо код:

<script type="text/javascript">
function getTopOffset(e) {
var y = 0;
do { y += e.offsetTop; } while (e = e.offsetParent);
return y;
}
var block = document.getElementById('fixblock');
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>

Пояснення до коду:

fixblock – id вашого рекламного блока;
blockHeight – висота рекламного блока;
footerHeight – висота секції footer вашого сайту.

Бонус: код фіксації банера на 2 сторони (лівий + правий)

Теперь ускладнимо задачу. До прикладу, у нас 2 банери на сторінці, кожний з них закріплений у своєму сайдбарі (left+right). При прокручуванні обидва банери повинні залишатися на фіксованій позиції.

Ось рішення, яке я частково знайшов на просторах інтернету:

<script type="text/javascript">
function getTopOffset(e) {
var y = 0;
do { y += e.offsetTop; } while (e = e.offsetParent);
return y;
}
var block = document.getElementById('fixblock1');
var block2 = document.getElementById('fixblock2');
if ( null != block || null != block2 ) {
var topPos = getTopOffset( block );
var topPos2 = getTopOffset( block2 );
window.onscroll = function() {
var scrollHeight = Math.max( document.documentElement.scrollHeight, document.documentElement.clientHeight),
blockHeight = 620,
footerHeight = 100,
stopPos = scrollHeight - blockHeight - footerHeight;
var scrollHeight2 = Math.max( document.documentElement.scrollHeight, document.documentElement.clientHeight),
blockHeight = 620,
footerHeight = 100,
stopPos = scrollHeight - blockHeight - footerHeight;
var newcss = (topPos < window.pageYOffset) ?
'top:20px; position: fixed;' : 'position:static;';
var newcss2 = (topPos2 < window.pageYOffset) ?
'top:25px; position: fixed;' : 'position:static;';
if ( window.pageYOffset > stopPos )
newcss = 'position:static;';
if ( window.pageYOffset > stopPos )
newcss2 = 'position:static;';
block.setAttribute( 'style', newcss );
block2.setAttribute( 'style', newcss2 );
}
}
</script>