АКТУАЛЬНО:

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

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

Описание задачи

Я подключил блок рекламы на своем сайте. Статьи у меня длинные и при прокрутке реклама прокручивается вместе с текстом, из-за чего посетители не переходят по рекламе. Необходимо зафиксировать рекламный блок в определенном месте сайта (левая/правая колонка) так, чтобы при прокрутке (скроллинге) рекламный блок всегда оставался на своем месте (т.н. плавающий sticky baner).

Плавающий рекламный банер

Реализация

Для начала необходимо присвоить уникальный 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('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 – высота футера (подвала) вашего сайта;

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

Код для фиксации баннера на 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>

Если что-то не работает – обязательно напишите. Оставляйте свои замечания в комментариях.

Удачи!

Оценка:
( 2 оценки, среднее 5 из 5 )
Подписка на KRASHENININ.TECH

Получайте регулярные обновления на почту!


Виталий Крашенинин/ автор статьи
Основатель блога, публицист, IT-специалист. Предоставляю услуги по администрированию, техническому обслуживанию и поисковому продвижению веб-сайтов.
Не забудьте поделиться материалом в соцсетях:
KRASHENININ.TECH - блог о веб-технологиях, и не только
Подписаться
Уведомление о
guest
2 Комментарий
Встроенные отзывы
Просмотреть все комментарии
Blade
Blade
10 месяцев назад

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

2
0
Буду рад вашим мыслям!x
()
x
Читайте ранее:
Что такое Baidu?

Про поисковую систему Baidu написано не так уж много статей в интернете. В основном, данная тема интересна владельцам бизнеса, которые...

Закрыть