如何使用JavaScript检测AdBlock是否已安装在访问者的设备上

本文概述

• A.使用一个简单的把戏
• B.使用BlockAdBlock(FuckAdBlock)

AdBlockers确实是一个复杂的讨论主题, 因为很多人不支持在网站上看到广告, 但是作为网站管理员, 你将希望在自己的网站上看到广告, 因为它们可以产生收益。根据Google的估算, 广告拦截每年给Google带来8.87亿美元的费用。但是, 广告必不可少。除非禁用AdBlock, 否则许多页面(例如《福布斯》)都不允许你访问其网站(对于开发人员来说, 这不是障碍, 因为我们可以仅检查元素并移除覆盖层)：

从某种意义上讲, 互联网上的大多数内容都是免费的, 仅仅是因为广告。我们大多数人都没有数以百万计的银行, 我们写书信很有趣, 你知道吗？如果你想在你的网站中实现这种功能, 或者只是向用户显示道德的信息, 即他们应该在没有广告拦截器的情况下访问你的网站, 则可以使用JavaScript轻松实现。

重要讯息

强烈建议你不要阻止使用AdBlock的用户访问你的网站。相反, 你应该只显示一条消息, 警告用户不要使用AdBlocker, 因为这是你唯一的收入。

福布斯从使用adblock的用户开始使用此阻止措施, 然后福布斯的跳出率提高了27％, 达到27.9(尽管这仍然是一个非常不错的成绩), 每天的综合浏览量下降了近9％, 为3.16, 每个访问者的网站停留时间减少了9％到不到3分钟的时间(详细了解阻止adblock的网站在SEO上所遭受的苦难)。

如果在阅读了上一条消息和此活动的后果之后, 你仍然想要实现它, 那么在本文中, 你将学习如何检测你的用户是否已使用JavaScript安装了AdBlock。

A.使用一个简单的把戏

验证用户是否在浏览器上安装了AdBlock的第一种最简单的方法是, 在主脚本的某个入口点(最好在加载其他所有脚本之前)创建一个布尔值标志变量, 标识为adblockEnabled。此变量将设置为true：

window.adblockEnabled = true;

// Some other JS here ..

一旦flag变量存在, 继续创建一个名为adframe.js的新简单脚本文件。该脚本的代码如下：

// adframe.js (an extra file with the following line of code)
window.adblockEnabled = false;

创建一个新文件(仅使用前一行代码)显然很重要。如你所见, 该脚本仅更新标识为adblockEnabled的窗口中的布尔标志变量, 该变量最初设置为true。一旦使用脚本标签或AJAX将脚本(adframe.js)加载到文档中, 并且在用户计算机上安装了AdBlock, 那么adframe.js文件将永远不会加载(使window.adblockEnabled保持设置为true), 因此使你能够检测用户是否在浏览器上安装了adblock。

请在单个文件中查看以下实现示例：

<!-- Set by default that adblock isn't enabled by a flag variable -->
<script type="text/javascript">
    window.adblockEnabled = true;
</script>

<!-- 
 Load the adframe.js script to change the adblock status to false
 obviously if the script is blocked by adBlock, then the adblockEnabled
 will remain as true, which means that adblock is enabled
 
 Code of the adframe.js file:

 window.adblockEnabled = false;
-->
<script type="text/javascript" src="adframe.js"></script>

<!-- Verify in some script if adblock is enabled -->
<script type="text/javascript">
    if(window.adblockEnabled) {
         alert("Hey, you're using adblock :(");
    }
</script>

这很容易做到, 并且一直有效。

B.使用BlockAdBlock(FuckAdBlock)

如果你是喜欢库的开发人员, 那么有一个有用的香草脚本, 可让你检查用户是否已安装AdBlock。 BlockAdBlock(最初命名为FuckAdBlock, 但是在新存储库中使用BlockAdBlock命名为更方便的名称)是一个有用的脚本, 可让你检测讨厌的广告拦截器。

要使用此库, 你只需下载脚本的副本, 然后使用脚本标签将其添加到你的文档中：

<script src="./blockadblock.js"></script>

如果使用包管理器, 则可以通过NPM安装它：

npm install blockadblock

或使用Bower：

bower install blockadblock

如果你需要有关此插件的更多信息, 请在此处访问Github中的官方存储库。

要检测用户是否使用BlockAdBlock在计算机上安装了adblock, 只需使用script标签将脚本添加到文档中即可。然后, 验证变量blockAdBlock是否存在, 如果不存在, 则意味着blockadblock.js脚本已被阻止(已安装adblock)。然后, 添加2个事件侦听器, 这些侦听器将在检测到计算机上的AdBlock状态后立即触发：

<script src="./blockadblock.js"></script>

<script>
    /**
     * Callback executed if adblock is installed 
     **/
    function adblockDetected(){
        alert("You're using adblock");
    }

    /**
     * Callback executed if adblock is disabled 
     **/
    function adblockDisabled(){
        console.log("Everything in order, show ads");
    }


    /**
     * Verify adblock
     **/
    if(typeof blockAdBlock === "undefined"){
        adblockDetected();
    }else{

        blockAdBlock.onDetected(adblockDetected);

        blockAdBlock.onNotDetected(adblockDisabled);
    }
</script>

两种方法都可以很好地工作, 如果用户使用adblock, 则由你决定使用哪种方法以及怎么做。

编码愉快！