Конечно, один из предзаданных шаблонов для баннера этого сервиса, «проброс кода», не новый.
Но действительно эффективным его применение для загрузки внешних кодов стало после того, как появилась возможность откладывать загрузку баннера ADFOX. Причем момент загрузки можно настраивать индивидуально для каждого баннера отдельно, указав число экранов ниже видимой области (если нужно, для смартфонов число может быть и менее единицы).
Напомню, загрузка внешних кодов, например, виджеты социальных и обменных сетей, более чем замедляет загрузку страницы без применения каких-либо дополнительных средств. Разумеется, можно эти средства создать и использовать.
Но можно использовать и то, что на сайте уже есть – загрузчик кодов ADFOX. Вместе с адаптивным кодом (с вызовом в зависимости от ширины экрана) система размещения рекламы может стать более чем интересным инструментом еще и дизайна.
Главное, не забудьте ознакомиться с требованиями к пробрасываемому коду.
Особое внимание следует обратить на примечание:
Если в HTML-коде, который требуется добавить в ADFOX в качестве баннера, присутствует document.write, использовать шаблон Проброс кода [context] нельзя. В таком случае рекомендуем добавить код через шаблон Banner HTML5 [context].
И пример, как без него, форма обратной связи от Битрикс24 в подвале на этом сайте. Можете проверить на PageSpeed Insights, именно этот код не сказывается на производительности и скорости загрузки страниц сайта.
А это используемый код:
<div id="adfox_172595967490934548"></div>
<script>
window.yaContextCb.push(()=>{
Ya.adfoxCode.create({
ownerId: 367918,
containerId: 'adfox_172595967490934548',
params: {
pp: 'i',
ps: 'esvu',
p2: 'jdnu'
},
lazyLoad: {
fetchMargin: 50,
mobileScaling: 2
}
})
})
</script>Первое, на что нужно обратить внимание — он асинхронный, не адаптивный. Последний, на мой взгляд, лучше подходит для вызова рекламы (раздельно десктоп / планшет / смартфон). Но в данном случае пробрасываемый код одинаков для всех устройств, сам адаптируется под выделенную область, можно и не заморачиваться.
А главное — два параметра, которые указывают, когда именно загружать:
fetchMargin: 50 — на десктопе, когда до формы остается 50 процентов высоты экрана;
mobileScaling: 2 — на смартфоне, множитель первого параметра, т.е. в итоге загрузка происходит, когда до формы остается 100 (50 х 2) процентов высоты экрана.
Значения могут быть любыми (mobileScaling может быть и не целым), т.е. теми, которые нужны именно вам.