海天无影Blog

广告和网页同时异步加载功能

/ 1576阅 / 52评 / 0

海天的两个网站,博客和电影站都已经投放了百度联盟和Google Adsense(以下简称GA)的广告,而每个网站的都是GA的广告数量多一点,不为别的,只因为GA的价钱高一点,虽然GA点一次也就才很少的几分钱,但可是美元。而百度既然申请下来了,不放的话有点不好意思,所以就象征性的每个网站摆了一个百度的广告。

虽然现在GA的价钱比百度高一点,GA的时间也不百度老,但海天发现百度联盟广功能的确很强大,很照顾站长。就比如这次说的百度联盟广告和网页同时异步加载功能。

百度联盟广告最近新推出了一个很实用的功能,广告和网页内容同时异步加载功能,这个功能就能够解决因为广告而影响网页的加载速度。

网页的加载原理,是从一个页面从头到尾一步步执行来的,如果你的广告JS代码,放在网页中,那么执行下来到广告的时候,必须先运行加载完广告,然后再接着处理下面的网页内容,这样是很影响网页加载速度的。

海天原来也弄过这样一个方法来解决因为广告影响网页加载速度的问题,就是加载完页面后再加载广告的JS代码。这个问题的确可以很好的解决因为广告而引起的网页加载速度慢,但是这样做也有一个稍稍的不好之处,就是现在很多站长因为要优化网页速度,将页面需要调用的JS代码都一起放在网页的最后来加载,再加上现在广告业是网页最后加载,就造成了最后突然要加载很多JS代码,会使网页打开,稍微卡那么一小下。

现在百度广告管家提供了Iframe代码广告位置的投放,因为Iframe的执行机制是异步加载,所以广告和网页内容的加载不会受到相互影响。下面就来看看代码:

1、创建并上传proxy.html文件到你的网站。proxy.html的内容如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body style="margin:0">
<script type="text/javascript" src="http://cbjs.baidu.com/js/s.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) {
BAIDU_CLB_singleFillSlot(match[2]);
}
}
})();
</script>
</body>
</html>
注:文件用于读取Iframe标签里的src传递过来的广告位id,然后调用百度广告管家系统的函数,最后将对应的具体广告内容加载。

2、开始在网页中投放iframe广告代码

1) 在百度广告管家的管理系统中查看广告位的id、宽度和高度信息,如下图所示:

百度广告管家投放iframe广告

百度广告管家投放iframe广告,选择广告位

2)得到上面的参数后, 参照以下规范写出iframe代码,然后将代码放到网页需要加载广告相应的位置。iframe广告代码如下:

<iframe src="proxy.html?id=44049" width="728" height="60" scrolling="no" frameborder="0" style=”display:block;margin:0”></iframe>
注:其中,src属性的取值由proxy.html文件的有效路径加上“?id=广告位id”组成;而width和height的值分别是广告位的宽度和高度。两处所需取值分别对应上一步图片中看到的广告位id、宽度和高度。

虽然这个方法用起来还是有点麻烦,广告改动的时候,还需要在百度广告管家中修改iframe代码,但是不得不说这个方法的确很好的解决了网页加载速度的问题。而且看文章的调用方法,其他广告比如GA,一样可以用百度广告管家管理来实现这个广告和网页内容同时异步加载的功能。

百度广告管家,对于广告的管理和投放真的做的很不错,除了上面这个广告和网页内同容时异步加载的实用功能以外。还有对“一个人一天只弹出一次广告”、“针对不同网络供应商、地域显示不同广告”等其他很不错的广告管理和投放功能。大家没事可以试试百度广告管家哦~

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注