jquery - 检测用户是否启用了广告拦截器，仅重定向到另一个页面一次，并使用jQuery显示替代广告

Question

这个问题已经问了好几次了，但从来没有完全这样。我想要什么：


检查用户是否启用了广告拦截器
如果是这样，请将用户重定向到登录页面
在该目标网页上，显示一个将用户定向到原始目的地的链接
只要启用了广告拦截器，就只会将用户定向到该目标网页一次（或每x天一次）
广告（隐藏的）必须替换为自定义HTML


最好使用jQuery（客户端，因为据我所知不可能检测到adblocker服务器端）。

注意：我只关心Google广告。

Answer 1

测试信息


答案写于2013年11月21日。
仅在Windows 8 64位计算机上的Chrome 31和Firefox 25上进行了测试
此JSFiddle中改进的可读性。


更新为了增加用户友好性，我不再在我的网站上应用此技术。

你需要什么


jQuery
jQuery Cookie
在您的网站上运行的.js文件（此后称为scripts.js）
用于广告的div包装器。不要使用太容易被检测为与广告相关的类！尝试类似class="cont-ad"的方法。因此，您可以将每个广告分别包装在具有该类的div中，例如<div class="cont-ad">。
解释您为何需要在网站上投放广告的页面。我称它为ads.html。给该页面的正文标记一个易于识别但又独特的类。 （您可以改用ID，但我会更轻松地找到类。）我将为正文提供一个类on-ads。


注意：只有ads.html页面内的body标签可以具有此类！

前三个文件的加载顺序应为：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/jquery.cookie.js"></script>
<script src="/js/scripts.js"></script>

我现在要发布的所有脚本都将放在 scripts.js中。

检查Adblocker是否处于活动状态

如前所述，我们需要检查adblock客户端，而不是服务器端。这意味着我们不能为此使用PHP。在网络上，我发现不同的广告块处理广告的方式有所不同。因此，我们需要几个条件来查看广告是否已被屏蔽。我将为此使用jQuery。

有些adblocker隐藏了广告，有些则不允许广告加载，有些则只是将高度降低为零。这是下面找到的三个条件。

if($("ins.adsbygoogle").is(':empty') ||
   $("ins.adsbygoogle").height() === 0 ||
   !$("ins.adsbygoogle").is(":visible")) {

请注意，最后一个条件也可以写为 .is(":hidden")。我以为看不见就清楚了。

如前所述，这些条件可以检查广告是否被“屏蔽”。当这返回true时，我们可以做我们想做的！

更改内容并添加另一个条件句

首先，我们要显示隐藏广告的替代方案。我们将更改广告包装的HTML。这将完全删除广告代码，但这没关系，因为它还是被阻止了。

$(".cont-ad").html('<span class="adblock-message">Please. Do not take my ads away! <a href="http://www.yoursite.com/ads.html" target="_self" title="Ads">Read more.</a></span>');

但是我们也想将用户重定向到登录页面，对吗？但是只有一次。因此，我们将要做的是：


检查cookie ads_checked是否存在（我将在一分钟后返回），如果不存在，请转到我们的登录页面
将用户前往的位置保存在另一个Cookie locational_cookie中


在代码中，它看起来像这样。

if ($.cookie('ads_checked') == null) {
    // Set cookie with value of current page
    $.cookie('locational_cookie', window.location, {
        expires: 7, // Not really necessary
        path: '/'
    });
    // Redirect
    window.location = "http://www.yoursite.com/ads.html";
}

我们只想替换广告，仅在广告被阻止时才重定向用户，因此我们将以上所有内容放在了第一个if子句中：

if ($("ins.adsbygoogle").is(':empty') ||
    $("ins.adsbygoogle").height() === 0 ||
    !$("ins.adsbygoogle").is(":visible")) {

    // Change the HTML content of the ad
    $(".cont-ad").html('<span class="adblock-message">Please. Do not take my ads away! <a href="http://www.yoursite.com/ads" target="_self" title="Ads">Read more.</a></span>');

    if ($.cookie('ads_checked') == null) {
        // Set cookie with value of current page
        $.cookie('locational_cookie', window.location, {
            expires: 7, // Not really necessary
            path: '/'
        });

        // Redirect
        window.location = "http://www.yoursite.com/ads.html";
    }
}

在那里，这是第一个大块。

检查登录页面，未设置Cookie，设置另一个并添加内容

拥有 ads.html登陆页面的想法是，用户可以查找您对广告的立场以及您为什么需要收入。无需我们正在构建的脚本，就可以访问该页面。这意味着并非所有内容都需要一直都在该页面上。例如，如果用户首先导航到 ads.html，则我们将要创建的“返回原始目标”按钮/链接就不会出现（当“原始目标”实际上是该页面本身时） ）。

因此，如果用户已被重定向，则必须添加链接“返回原始目的地”。我们可以通过检查先前设置的cookie的存在来做到这一点。可以肯定的是，我们也可以只检查为该页面提供的body标签，但这并不是必须的。

if ($("body").hasClass("on-ads") && $.cookie('locational_cookie') != null) {

但是，在此函数中我们需要什么？首先，我们需要将“后退”链接的href设置为原始位置。我们将原始目的地保存在Cookie中，因此非常有用！之后，我们要删除该cookie（ locational_cookie）-我们不再需要它。不过，我们需要另一个Cookie。 （饿了吗？）

回想一下我们之前构建的前一代码段：在嵌入式if子句中，我们检查是否存在名为 ads_checked的cookie。如果该cookie不存在，我们希望将用户发送到登录页面，但只希望将其发送到该页面一次。因此，我们要做的是：当用户位于此登录页面上时，设置一个cookie-如果该cookie存在，则无法再次重定向用户。现在我们也创建该cookie。

请注意，我们必须将反向链接附加到 ads.html页面上的某些HTML元素。在这里，它称为 #wrapper。

if ($("body").hasClass("on-ads") && $.cookie("locational_cookie") != null) {
    // Append back link
    $("#wrapper").append('<p>Get to your <em><a href="' + $.cookie("locational_cookie") + '" target="_self">original destination</a></em>.</p>');
    // Remove locational cookie
    $.removeCookie('locational_cookie', {path: '/'});

    // Set ads_checked cookie
    $.cookie('ads_checked', 'true', {
        expires: 7, // so the user will be redirected to the landing page again after 7 days
        path: '/'
    });
}

结果

基本上就是这样！一切准备就绪，我们可以通过一个很好的文档准备功能来实现这一点。这是 JSFiddle，可能会更清晰一些。

$(document).ready(function () {
    if ($("body").hasClass("on-ads") && $.cookie("locational_cookie") != null) {

        // Append back link
        $("#wrapper").append('<p>Get to your <em><a href="' + $.cookie("locational_cookie") + '" target="_self">original destination</a></em>.</p>');

        // Remove locational cookie
        $.removeCookie('locational_cookie', {
            path: '/'
        });

        // Set ads_checked cookie
        $.cookie('ads_checked', 'true', {
            expires: 7, // so the user will be redirected to the landing page again after 7 days
            path: '/'
        });
    }

    if ($("ins.adsbygoogle").is(':empty') || $("ins.adsbygoogle").height() === 0 || !$("ins.adsbygoogle").is(":visible")) {

        // Change the HTML content of the ad
        $(".cont-ad").html('<span class="adblock-message">Please. Do not take my ads away! <a href="http://www.yoursite.com/ads" target="_self" title="Ads">Read more.</a></span>');

        if ($.cookie('ads_checked') == null) {

            // Set cookie with value of current page
            $.cookie('locational_cookie', window.location, {
                expires: 7, // Not really necessary
                path: '/'
            });

            // Redirect
            window.location = "http://www.yoursite.com/ads";
        }
    }
});