Как использовать плагин Sticky Ads [шорткоды, ручная вставка, через ads inserter, flat, realbig]

Выпуск плагин в паблик выявил некоторые недостатки при его использовании, ведь нужды и ситуации у всех разные, а гибкости изначально не хватило. Эта проблема должна уйти после обновления до версии 1.0.6.

Если у вас уже все настроено и работает как надо — можно ничего не трогать, а эту инструкцию применить только для создания новых блоков.

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

Вставка через редактор/шорткод

Итак, предполагалось, что шорткоды и функции вставки блоков через редактор будут достаточно удобны и просты в использовании. Алгоритм вставки рекламного блока в общем случае выглядит следующим образом:

1. Создаем новый блок в меню Sticky Ads (Рис. 1)
2. Копируем код рекламы (РСЯ, Адсенс и др) и вставляем его в поле редактора (Рис. 1)
3. Задаем нужную высоту контейнера (Рис. 1)
4. Публикуем блок (Рис. 1)
5. Вставляем его в запись (Рис. 2)

Дополнительные настройки расположены, собственно, в меню настроек (Рис. 3), где можно задать общую высоту отступа от верхнего края экрана. Если не срабатывает прилипание (конфликты с темой), можно подключить альтернативный способ загрузки скрипта (тут уже будет работать связка css + js).

Ну и для медленных сайтов или при искользовании сторонних сервисов может быть полезен пункт с настойкой задержки подгрузки скрипта. Если используете альтернативный метод — поиграйтесь с временем и определите для своего сайта, какая задержка будет наиболее оптимальна: не слишком долгой и чтобы гарантированно срабатывала после загрузки кода страницы и рекламных блоков.

Вставка вручную

Не удобны шорткоды? Не беда! Обратите внимание на рис. 3 — в самом низу есть кусок html разметки для оборачивания рекламного блока. Выглядит он так:

<div class="sticky-ad-block" data-height="" data-margin-top=""> </div>

Внутрь этого div’а нужно вставить ваш рекламный код и всю эту конструкцию уже можно будет добавлять в статью или плагины для вывода рекламы. Например, это может выглядеть так:

<div class="sticky-ad-block" data-height="" data-margin-top="">

<!-- Yandex.RTB R-A-99999-99 -->
<div id="yandex_rtb_R-A-99999-99"></div>
<script type="text/javascript">
(function(w, d, n, s, t) {
w[n] = w[n] || [];
w[n].push(function() {
Ya.Context.AdvManager.render({
blockId: "R-A-99999-99",
renderTo: "yandex_rtb_R-A-99999-99",
async: true
});
});
t = d.getElementsByTagName("script")[0];
s = d.createElement("script");
s.type = "text/javascript";
s.src = "//an.yandex.ru/system/context.js";
s.async = true;
t.parentNode.insertBefore(s, t);
})(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

Доступные аттрибуты:

1. data-height — высота контейнера, в котором будет кататься рекламный блок
2. data-margin-top — отступ от верха экрана

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

Используем плагины для автоматической вставки

Здесь покажу на примере Ads Inserter, хотя то же самое будет работать и в плагине Flat.

Ads Inserter поддерживает вывод шорт кода, значит можно добавить новый блок Sticky Ads и скопировать нужный шорт код из его настроек, см. Рис 4.

Шорткод вставляем в Ads Inserter, как показано на рис. 5. Остальные настройки уже на ваше усмотрение.

Если нет желание возиться с шорткодом, делаем вручную — оборачиваем код рекламы в наш див и готово! (Рис. 6 ниже)

Сервис Realbig

С версии 1.0.6 я несколько упростил код и уменьшил количество действий для вставки рекламы вручную. Как написано выше, нам теперь нужен лишь один оборачивающий div.

Чтобы плагин работал с данным сервисом, вам нужно следовать нескольким простым действиям:

1. Создаете рекламный блок в сервисе RealBig — как вы это делаете обычно
2. Получаете оттуда код для вставки на ваш сайт, например:

   <div id="content_rb_99999" class="content_rb" data-id="99999"></div>

3. Теперь его нужно обернуть в мой див, чтобы получилась такая картина:

   <div class="sticky-ad-block" data-height="" data-margin-top=""><div id="content_rb_99999" class="content_rb" data-id="99999"></div></div>

4. Получившийся код можно вставить в статью, плагины Ads Inserter или Flat и т.д.

Пример:

Однако, это сторонний сервис и работа как с ним, так и с другими такими сервисами не гарантируется. В данный момент (18.06.2018) реклама протестирована и работает нормально на моих сайтах. Если возникнут проблемы — пробуйте сначала прямой вывод через шорткод или просто обернув рекламный код в нужный div с классом «sticky-ad-block».

Если будут вопросы — обращайтесь в телеграм (ссылка в сайдбаре).

Еще не приобрели плагин? Тогда вам сюда: