На странице есть 30 нативных рекламных блоков.
Каждый рекламный блок имеет конструкцию:
Из div блока
<div id="teaser01" align="center"></div>
И js, который подгружает фрейм с рекламой в нужный div по id.
<script type="text/javascript">
(function(a,e,f,g,b,c,d){a[b]||(a.FintezaCoreObject=b,a[b]=a[b]||function(){(a[b].q=a[b].q||[]).push(arguments)},a[b].l=1*new Date,c=e.createElement(f),d=e.getElementsByTagName(f)[0],c.async=!0,c.defer=!0,c.src=g,d&&d.parentNode&&d.parentNode.insertBefore(c,d))})
(window,document,"script","https://content.mql5.com/core.js","fz");
fz("show","teaser01");
</script>
У каждого рекламного блока своя уникальная метка в div и js вместо
teaser01.
Задача: Запускать скрипт 1 раз на странице только при появлении этого блока в поле видимости. Для подсчета реальных показов и ctr.
появился div блок teaser01 — запускаем 1 раз скрипт с меткой teaser01
появился div блок teaser02 — запускаем 1 раз скрипт с меткой teaser02
и т.д.
Как я пытался сделать, найдя похожий вопрос на хабре:
<script type="text/javascript">
var target = $('#teaser01');
var targetPos = target.offset().top;
var winHeight = $(window).height();
var scrollToElem = targetPos - winHeight;
$(window).scroll(function(){
var winScrollTop = $(this).scrollTop();
if(winScrollTop > scrollToElem){
(function(a,e,f,g,b,c,d){a[b]||(a.FintezaCoreObject=b,a[b]=a[b]||function(){(a[b].q=a[b].q||[]).push(arguments)},a[b].l=1*new Date,c=e.createElement(f),d=e.getElementsByTagName(f)[0],c.async=!0,c.defer=!0,c.src=g,d&&d.parentNode&&d.parentNode.insertBefore(c,d))})
(window,document,"script","https://content.mql5.com/core.js","fz");
fz("show","teaser01");
}
});
</script>
Но данное решение вставляет ∞ количество рекламы в один блок.
Помогите, пожалуйста, скорректировать решение, с учетом того, что на странице будет 30 таких рекламных блоков.
