У сьогоднішньому блозі я розповім як зафіксувати рекламний блок на сайті за допомогою 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>
Ось і все. У випадку, якщо щось не працює – залишайте відгуки у коментарях.
Успіхів!