网页根据屏幕尺寸控制广告加载 完美解决方案(支持CDN)

现在大部分的网页都设计成响应式/自适应网页,Wordpress的主题最流行的就是响应式布局了。然而令很多网页开发者苦恼的是页面上的广告如何也能自适应呢,本文将详细介绍网页上投放百度联盟与Google AdSense广告,实现广告自适应加载(无插件)的方法。

一、PHP方法(仅支持Wordpress网站)

WordPress有很多的自带函数,其中就有一个wp_is_mobile() 函数,该函数的作用是测试当前浏览器是否在移动设备(智能手机,平板电脑等)上运行。

wp_is_mobile() 返回值为布尔型。

下面我们来看一个实例:

<?php if ( wp_is_mobile() ) : ?>
    /* 如果是移动设备,请将要显示的代码插入到本行的下方 */
<?php else : ?>
    /* 如果是桌面设备,请将要显示的代码插入到本行的下方 */
<?php endif; ?>

wp_is_mobile() 使用起来是不是特别简单?但它有以下弊端

  • 非Wordpress网站或不是Wordpress生成的网页无法使用
  • 网站页面使用了CDN静态缓存,判断会失效。
  • WordPress使用了WP Super Cache或W3 Total Cache等缓存插件后,虽可以开启移动设备与桌面采用不同的缓存来解决上面的问题,但会额外耗费资源,特别是当大量网页需要缓存的时候,会造成所需存储空间翻倍,而且每次访问都需要经过额外的判断,影响页面加载时间。

怎么做才是最完美的解决方案?请往下阅读。

二、JavaScript方法(推荐)

这种方法支持所有网站的网页,并不限于Wordpress。

1、百度联盟广告自适应实例

当桌面浏览时加载广告,移动设备浏览时不加载广告。

/* 
百度联盟广告自适应:当浏览器可见区域宽度大于768像素时加载广告,否则不加载
原文链接:https://www.zhanzhangb.com/2020-407.html
 */
<script>
if (768 < document.documentElement.clientWidth) {
	document.writeln("<div class=\"_30bsg7808bf\"></div>"); /* 将_30bsg7808bf修改为正确的类名 */
    (window.slotbydup = window.slotbydup || []).push({
        id: "u8888888", /* 将u8888888修改为正确的id */
        container: "_30bsg7808bf", /* 将_30bsg7808bf修改为正确的类名 */
        async: true
    });
}
</script>
<script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/c.js" async="async" defer="defer" >
</script>

另一种情况是,当桌面浏览时加载固定尺寸广告,当移动设备浏览时加载百度联盟的移动广告:

/* 
百度联盟广告自适应:当浏览器可见区域宽度大于768像素时加载固定尺寸广告,否则加载移动广告
原文链接:https://www.zhanzhangb.com/2020-407.html
 */
<script>
if (768 < document.documentElement.clientWidth) {
	document.writeln("<div class=\"_30bsg7808bf\"></div>"); /* 将_30bsg7808bf修改为正确的类名 */
    (window.slotbydup = window.slotbydup || []).push({
        id: "u8888888", /* 将u8888888修改为正确的id */
        container: "_30bsg7808bf", /* 将_30bsg7808bf修改为正确的类名 */
        async: true
    });
}else {
/* 以下是移动广告的相关代码 */
	document.writeln("<div class=\"_5absc18f9d6\"></div>"); /* 将_30bsg7808bf修改为你自己的移动广告的类名 */
    (window.slotbydup = window.slotbydup || []).push({
        id: "u9999999", /* 将u9999999修改为你自己的移动广告的id */
        container: "_5absc18f9d6", /* 将_5absc18f9d6修改为你自己的移动广告的类名 */
        async: true
    });
}
</script>
<script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/c.js" async="async" defer="defer" >
</script>

当桌面浏览时加载百度联盟固定尺寸广告,当移动设备浏览时加载 Google AdSense的自适应广告:

/* 
广告自适应:当浏览器可见区域宽度大于768像素时加载百度联盟广告,否则加载Google AdSense自适应广告
原文链接:https://www.zhanzhangb.com/2020-407.html
 */
<script>
if (768 < document.documentElement.clientWidth) {
	document.writeln("<div class=\"_30bsg7808bf\"></div>"); /* 将_30bsg7808bf修改为正确的类名 */
    (window.slotbydup = window.slotbydup || []).push({
        id: "u8888888", /* 将u8888888修改为正确的id */
        container: "_30bsg7808bf", /* 将_30bsg7808bf修改为正确的类名 */
        async: true
    });
	document.writeln("<script type=\"text/javascript\" src=\"//cpro.baidustatic.com/cpro/ui/c.js\" async=\"async\" defer=\"defer\" >"); /* 加载百度联盟JS脚本 */
}else  { 
/* 以下是Google AdSense自适应广告的相关代码 */
	document.writeln("<ins class=\"adsbygoogle\"");
	document.writeln("style=\"display:block\"");
	document.writeln("data-ad-client=\"ca-pub-4026513110826579\""); /* 将ca-pub-4026513110826579修改为自己的发布商ID */
	document.writeln("data-ad-slot=\"7266153905\""); /* 将7266153905修改为自己的广告ID */
	document.writeln("data-ad-format=\"auto\""); /* data-ad-format 参数的值:auto完全自适应、rectangle矩形、vertical垂直、horizontal横幅 */
	document.writeln("data-full-width-responsive=\"true\"></ins>");  /* true会完全占据屏幕宽度,false会留出边距 */
	(adsbygoogle = window.adsbygoogle || []).push({});
	document.writeln("<script async src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>"); /* 加载Google AdSense JS脚本 */
}
</script>

以上代码均通过测试并得到官方认可,绝无广告违规投放的风险,其中document.documentElement.clientWidth为获取浏览器的 可见区域宽度,兼容IE、FireFox、Chromium(Chrome的内核)、Webkit(Safari的内核)等所有浏览器(目前未发现不支持document.documentElement.clientWidth的浏览器 )。

网上还有另外的方式,其原理是将HTML元素的display属性改为”none”,从而达到不显示相应内容的效果。但对于联盟广告用户来说,这个不是一个最佳的方案。请看以下示例:

原文链接:https://www.zhanzhangb.com/2020-407.html
<script>
function zzb_ads_none(){
	document.getElementById("_30bsg7808bf").style.display="none";
};
if (768 > document.documentElement.clientWidth) {
	zzb_ads_none();
}
</script>

其中”_30bsg7808bf”是百度联盟的广告类,这样是可以屏蔽广告展示,但问题在于以下代码依然会触发:

(window.slotbydup = window.slotbydup || []).push
//当页面加载完成后,依然会触发广告加载

也就是说百度联盟的广告会加载,但不会显示,这样会影响网页速度、还有可能遭到百度联盟判为违规投放。


  • 微信或QQ扫一扫

《网页根据屏幕尺寸控制广告加载 完美解决方案(支持CDN)》有1条留言

留下评论