百度广告管家:使用批量请求提升广告加载速度

在一些中大型规模的网站平均一个页面有5-15个广告位,随之而来的问题就是页面上广告请求过多,每一个广告都要向服务器请求一次,连续大量的请求导致页面整体展现速度受到影响。百度广告管家技术团队针对这一情况,开发了批量请求方法,该方法将大量的广告位请求合并在一次发出,有效提升广告的整体加载速度。

根据百度广告管家官方的技术资料,跟大家分享如何使用批量请求功能来提升用户体验:

说明:

此批量请求功能是通过BAIDU_CLB_preloadSlots函数加载一个或多个广告位的信息至客户端内存中来实现的。

该接口仅支持高级版两段式JS代码(m.js),请先确认您投放的广告位代码的类型。(请看下图切换使用高级版两段式)

使用步骤:

1、添加广告位代码的<head>部分

在页面的<head>部分加入以下代码:

<script type="text/javascript" src="http://cbjs.baidu.com/js/m.js"></script>
<script type="text/javascript">

BAIDU_CLB_addSlot("81371"); <!—“81371”为需要展示的广告位的id-->

BAIDU_CLB_addSlot("81351"); <!—“81351”为需要展示的广告位的id-->

BAIDU_CLB_enableAllSlots();

</script>

其中BAIDU_CLB_addSlot函数的参数为需要展示的广告位的id

2、加载广告位信息

在页面的<head>部分,步骤1的代码之后,加入以下代码:

<script type="text/javascript">
BAIDU_CLB_preloadSlots("81371", "81351");  <!—参数同上-->
</script>

其中BAIDU_CLB_preloadSlots的参数必须是在第1步被BAIDU_CLB_addSlot函数使用过的。

3、添加广告位代码的<body>部分

在需要展现广告的位置,加入<body>部分代码

<script type="text/javascript">
BAIDU_CLB_fillSlot("81371");  <!—“81371”为需要展示的广告位的id-->
</script> 

至此,批量请求功能投放成功,可以打开网站可以查看实际效果。

提示:如果您原来使用的即是高级版两段式JS代码,只需完成上述步骤中第2步即可,即:加入BAIDU_CLB_preloadSlots函数。

至此所有操作已完成,您可以到网站查看实际投放效果了。

完整示例:

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
    <title>百度广告管家:使用批量请求提升广告加载速度</title>

    <script type='text/javascript' src='http://cbjs.baidu.com/js/m.js'></script>
    <script type='text/javascript'>
        BAIDU_CLB_addSlot('12345');
        BAIDU_CLB_addSlot('54321');
        BAIDU_CLB_addSlot('11223');
        BAIDU_CLB_enableAllSlots();
        BAIDU_CLB_preloadSlots('12345','54321','11223');
</script>

</head>

<body>
    <div id="main">
        <div style="width:200px;float:left;"> <script type='text/javascript'>BAIDU_CLB_fillSlot('12345');</script> </div>
        <div style="width:200px;float:left;"> <script type='text/javascript'>BAIDU_CLB_fillSlot('54321');</script> </div>
        <div style="width:200px;float:left;"> <script type='text/javascript'>BAIDU_CLB_fillSlot('11223');</script> </div>
    </div>
</body>
</html>