Страницы

пятница, 26 июля 2019 г.

Как сделать плавающую рекламу РСЯ в Blogger?

Привет привет. Сегодня Econ Dude расскажет о том, как на своём сайте или блоге можно сделать плавающую рекламу Яндекса РСЯ в Blogger (блоггер, blogspot). Но на самом деле по той-же методике вы можете это сделать и в WordPress, просто я у себя тут пишу про блоггер по большей части.

В итоге будет примерно так (это тест):

Как сделать плавающую рекламу РСЯ в Blogger? / Econ Dude

Смотрите направо, на сайтбар

Периодически я меняю дизайн блога, думаю над разными способами монетизации, и примерно год у меня стояли только автоматические рекламные блоки от Google (AdSence) и проблем с ними не было. Писал по ним отчёт после месяца применения, но потом всё стало еще лучше и они практически удвоили доходы.

Однако в последнее время с ними начались какие-то проблемы, люди на Сёрче жаловались и в бурже тоже, поэтому я решил опять попробовать РСЯ, так-как в принципе и реклама от Яндекса хороша, она имеет свои плюсы.

Один из её плюсов в том, что вы можете использовать плавающие (фиксированные, неподвижные, зафиксированные, летающие...) рекламные блоки. В Гугл вы тоже можете их использовать, но по правилам Гугла это запрещено и у вас есть риск поймать санкции и отключение от АдСенс, что крайне неприятно.

Для Яндекса таких ограничений нет.

И хотя вы можете видеть как некоторые сайты (не будем показывать пальцем) используют плавающие блоки Google, и им никто ничего не говорит, но я не думаю что риски стоят свеч. По всей видимости Гугл иногда закрывает на это глаза для реально крупных, старых, трастовых и уважаемых сайтов.

Ваш и мой сайт не такие :)

Короче, давайте ближе к делу.

Смысл плавающего блока в том, что это скрипт, который его отображает на фиксированной позиции экрана. При чём если вы поищите ответ про эти блоки на английском например, то там код может работать криво и косо. Вообще мало статей как это сделать адекватно и хорошо, но, естественно, это реально сделать.

Одна из лучших статей про это есть в Шпаргалке Блоггера:


Вот от неё мы и будем отталкиваться. Кстати, я с администратором этого сайта делал текстовое интервью, можете почитать.

От туда мы возьмём вот этот пример:

4. Плавающий блок, замирающий над футером или другим элементом. Чистый JavaScript без jQuery

Именно его я себе сейчас поставил и он работает вполне нормально.
Дабы поставить себе такие рекламные блоки РСЯ в Blogger, вам нужно внести несколько изменений в код, который на своём сайте дала Наталья. Про эти изменения вы можете в принципе прочитать и там в комментариях, либо методом тыка всё настроить, но я скажу что конкретно нужно сделать дабы оно работало.

Для начала идём в ту статью, находим код и копируем его в блокнот.



Первое изменение


Вместо:

<script>

Вставляем:

<script>//<![CDATA[

А в конце кода вместо:

</script>

Вставляем:

//]]></script>

Это изменения под нашу платформу blogger.



Второе изменение


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

Нам нужны два виджета, а не один!

Одна из причин почему всё будет глючить, если вставить всё в один виджет в том, что код РСЯ уже включает в себя </script>, и у нас будет конфликт.

Можно попытаться вставлять код полёта в основной html код сайта и я думаю это будет работать, если заморочиться, но виджетами удобнее. Вообще в WP есть плагин, который в один клик делает это всё за вас, ну а мы в блоггер как всегда страдаем. Да и плагинам лично я не всегда доверяю.



Третье изменение


Пункт необязательный.

На всякий случай идите в основной код сайта и там поставьте:

 <b:widget id='HTML10' locked='false'  mobile='no' title='РСЯ В ПОЛЁТЕ' type='HTML' version='1'>

Найдите этот код рекламы по названию виджета (потом его можно убрать), у меня - РСЯ В ПОЛЁТЕ, и поставьте там что не нужно всё это делать для мобильной версии сайта. На всякий случай. Я думаю и без этого оно не будет видно на мобильной, но с любым подобным кодом есть шанс немного всё изгадить и что-то сломать.

Прежде чем вы всё это делайте, сохраните весь ваш исходный HTML.



Четвёртое изменение


В коде полёта есть две вещи, которые нужно еще поменять.

Это:

document.querySelector('#aside1')

А так-же:

document.querySelector('footer')

Первое это то, что будет собственно говоря летать. Тут нам нужно указать ID виджета с рекламным блоком. Отдельного и нового виджета, куда вы кинули код РСЯ, и который у нас стоит до кода полёта в сайтбаре.

Как узнать ID виджета? Просто пишите ему любое название, например как я сделал - РСЯ В ПОЛЁТЕ, далее в html (theme => edit html) мы через ctrl+f ищем наше название виджета. и там будет widget id типа HTML10.

Вот это HTML10 нам и нужно поставить вместо #aside1 и не забудьте решётку. Как итог у нас будет: #HTML10 где цифра - это уже ваше ID.

Аналогичным образом мы должны заменить "footer" на тот виджет, до которого будет летать наша реклама. Если вы хотите чтобы она останавливалась на футере (снизу) в блоггер, то просто меняйте это на #HTML3, обычно такой АйДи. В моём случае нижнюю границу я поставил не на футере, а на другом блоге РСЯ, который снизу фиксированный. Довольно удобно, ID вы можете найти так-же, как я описал выше.



Пятое изменение


Вы можете поменять дистанцию (отступ) снизу от элемента после достижения которого идёт фиксация, до вашего блока. В коде это:

getBoundingClientRect().top + 0

Вот вместо нуля можно поставить +25 например, или даже минус.

Попробуйте разные варианты.



Итоговый код


У меня получился вот такой html код полёта:

<style>
.sticky {
  position: fixed;
  z-index: 101;
}
.stop {
  position: relative;
  z-index: 101;
}
</style> 
<script>//<![CDATA[
(function(){
var a = document.querySelector('#HTML10'), b = null, P = 0;
window.addEventListener('scroll', Ascroll, false);
document.body.addEventListener('scroll', Ascroll, false);
function Ascroll() {
  if (b == null) {
    var Sa = getComputedStyle(a, ''), s = '';
    for (var i = 0; i < Sa.length; i++) {
      if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
        s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
      }
    }
    b = document.createElement('div');
    b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
    a.insertBefore(b, a.firstChild);
    var l = a.childNodes.length;
    for (var i = 1; i < l; i++) {
      b.appendChild(a.childNodes[1]);
    }
    a.style.height = b.getBoundingClientRect().height + 'px';
    a.style.padding = '0';
    a.style.border = '0';
  }
  var Ra = a.getBoundingClientRect(),
      R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('#HTML7').getBoundingClientRect().top + 30);
  if ((Ra.top - P) <= 0) {
    if ((Ra.top - P) <= R) {
      b.className = 'stop';
      b.style.top = - R +'px';
    } else {
      b.className = 'sticky';
      b.style.top = P + 'px';
    }
  } else {
    b.className = '';
    b.style.top = '';
  }
  window.addEventListener('resize', function() {
    a.children[0].style.width = getComputedStyle(a, '').width
  }, false);
}
})()
//]]></script>

Жирным то, что мы исправили в исходном коде.

По ссылке выше в Шпаргалке Блоггера есть еще много вариантов кода, в том числе и более хитрые, но принципы их работы примерно такие-же.

Вообще html штука не самая сложная в мире. Если вы немного в программировании понимаете, то тут для вас всё довольно просто.

И вы можете видеть в коде у меня или по ссылке выше что там нет ничего левого, опасного или странного. Просто я это к тому, что будьте внимательны когда вы вставляете чужой код к вам на сайт, проверьте его. Очень часто туда помещают ссылки на сайт создателя кода, и это еще самое безобидное.

Еще момент. У вас на мониторе может всё нормально показываться, но желательно дать ссылку друзьям и людям с другими разрешениями, дабы всё точно протестировать и убедиться, что у всех всё отображается нормально. Хотя так-как тут просто всё вертикально идёт, то проблем быть не должно.

Вот такие дела.

Другие мои статьи про сайты, продвижение, SEO и монетизацию тут: