对于许多免费发布内容的网站而言,广告(一种或多种广告)是其获取收入的主要来源之一。
从广告收入将用于支付费用,以所经营的网站 ,如Web服务器, 内容分发网络 (CDN), 网络连接 ,最重要的是, 作家产生的内容。
但是,广告可能会对读者造成极大的刺激。 广告在每个角落出现并弹出,导致许多互联网用户在浏览器中安装广告拦截程序扩展程序,从而使广告不可见 。
对于出版商来说,这是一个非常不幸的消息。 没有显示的广告意味着更少的页面浏览量 ,这将导致更少的收入。
我认为出版商,读者和广告商之间必须存在相互关系。 发布者应发布读者喜欢的有用内容 ,而广告商将在经济上支持发布者发布更多有用内容,以换取相关和潜在的客户。
当用户使用广告拦截器软件时,许多网站都会显示一条消息或一种替代方法来恳求其支持 。 在这篇文章中,我们将向您展示如何在您的网站中应用它。 让我们来看看。
入门
首先,让我们看看其中一个广告拦截软件如何删除广告。 作为此处的示例,我们添加了一些包装在div
中的class="ads"
广告图像; 此类用于设置样式以及将区域定义为广告。
<div class="ads">
<img src="images/ads.jpg" height="250" width="300" alt="">
</div>
从技术上讲,该图像应出现在浏览器中,但它不会出现在浏览器中,如下所示。 广告拦截器软件屏蔽了该图像。 要进行验证,您可以在浏览器控制台中看到错误日志。
另外,广告拦截器还通过添加display:none
隐藏广告图像,如下所示。
一旦知道了如何在网站上展示广告以及广告拦截器如何拦截广告,我们现在就可以确定我们应该如何编写脚本以显示在广告拦截器处于活动状态时将显示的替代消息 。
编写脚本
我们有几种方法可以做到这一点,其中一种方法是验证img
仍然包含display:none
。 否则,我们将显示替代消息。 而且,使用jQuery,非常容易做到这一点。 首先,让我们创建一个新JavaScript函数。
function appendMessage() {
var div = $('<div>').attr('id', 'message').text('Ad block is active');
var add = $('body').append(div);
}
上面的函数将创建一个内容为“广告块处于活动状态”的div
元素,并将其附加到文档body
。
然后,我们将创建一个JavaScript条件语句,该语句表示:如果使用display:none设置了图像,则将运行appendMessage()
函数。
setTimeout(function(){
if($('img').css('display') == "none") {
appendMessage();
}
}, 500);
这将使我们能够准确地验证是否在display:none
上未添加display:none
。
以下是整个代码:
$(document).ready(function() {
function appendMessage(argument) {
var div = $('<div>').attr('id', 'message').text('Ad block is installed and active. Please support us by disabling it.');
var add = $('body').append(div);
}
setTimeout(function(){
if($("img").css('display') == "none") {
appendMessage();
}
}, 500);
});
请点击以下链接查看此功能的工作原理。
如果您有广告屏蔽,则应该看到以下消息(否则,您应该看到的是广告图片)。
重要笔记
此代码假定广告是图片。 值得注意的是,每个广告都是唯一的。 查看广告的显示方式,并找出隐藏的元素。