2018-11-07广告的异步加载（百度SSP）

2019-04-03 本文已影响0人公纸晓白

1.iframe引入

创建网页分析广告（myad.html）：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <style>
    .ads{
position:absolute;
 left:0;
 bottom:0;
  background-color:rgba(0,0,0,0.3);
     color:#fff;
      font-size:12px;
         line-height: 18px;
         z-index: 1000;

    }
    </style>
</head>
<body style="margin:0">
<script type="text/javascript" src="http://dup.baidustatic.com/js/ds.js"></script>
<script type="text/javascript">
<!-- 读取url中的参数“id”并绘制广告 -->
(function() {
    var match = location.href.match(/(\?|&)id=([^&]+)(&|$)/);
    if (match) {
        var slotId = parseInt(match[2], 10);
        if (slotId) {
        //  alert(slotId);
        //  alert(match[2]);
            BAIDU_CLB_fillSlot(match[2]);
            let span=document.createElement("span");
            span.setAttribute("class","ads");
            let textNode=document.createTextNode("广告");
            span.appendChild(textNode);
            document.getElementsByTagName('body')[0].appendChild(span);
            //$('body').append('<span style="position:absolute; left:0;bottom:0; background-color:rgba(0,0,0,0.3); color:#fff; font-size:12px; line-height: 18px;">广告</span>');
        
            // console.log(document.getElementsByTagName("div")[0]); 
        }
    }
})();
</script>
</body>
</html>

其他页面引入：

<iframe src="myad.html?id=9999" width="180" height="150" scrolling="no" frameborder="0" style="display:block;margin:0"></iframe>

src路径写对，id为百度ssp提供的广告id.

此方法无法在引入的页面识别是否为空，容错率过低。

2.两段式广告异步加载：

在页面写好广告位：

可以循环引入，我当时为Nunjucks框架：{{item.id}}为广告id

  {% for item in ad %}
   <div class='ad' id="job_ad_{{item.id}}"></div>
{% endfor %}

页面后面引入广告js：

<script type="text/javascript" src="http://dup.baidustatic.com/js/ds.js"></script>

js代码里识别并加载：

BAIDU_CLB_fillSlotAsync('{{item.id}}', 'job_ad_{{item.id}}');
BAIDU_CLB_fillSlotAsync(广告id，广告位id名)；
下面为添加的广告和举报提示，延时保证广告加载完后再添加提示字样。

  setTimeout(() => {
  {% for item in ad %}
BAIDU_CLB_fillSlotAsync('{{item.id}}', 'job_ad_{{item.id}}');
setTimeout(() => {
if($('div[id="job_ad_{{item.id}}"]').html().length !== 0){
  $('div[id="job_ad_{{item.id}}"]').append("<div class='height'></div><span style='position:absolute; left:0;bottom:0; background-color:rgba(0,0,0,0.3); color:#fff; font-size:12px; line-height: 18px;'>广告</span><a class='report-ad' href='http://report.0550.com/report' target='_blank' style='display:none; position:absolute;height:auto;text-decoration:none; left:40px;bottom:0; background-color:rgba(0,0,0,0.3); color:#eee; font-size:12px; line-height: 18px;'>举报</a>")
}
  },5000);
{% endfor %}
  },2000);
    $('div[class="ad').hover(function(){
                    $(this).children('.report-ad').show();
                    },function(){
                    $(this).children('.report-ad').hide();
                })