检测用户是否启用了广告拦截器,重定向到另一个页面但只有一次,并使用jQuery显示广告的替代方案

测试信息

> 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.为该页面的body-tag提供一个易于识别但也是唯一的类. (你可以使用ID代替,但我觉得课程更容易.)我会给身体一个广告课程.

注意：只有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.

有些广告拦截器会隐藏广告,有些广告无法加载广告,有些则只会将高度降低为零.这些是以下三个条件.

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

请注意,最后一个条件也可以写为.is(“：hidden”).我认为不可见更清楚了.

正如我之前所说,这些条件会检查广告是否“被屏蔽”.当这返回true时,我们可以做我们想要的！

更改内容并添加另一个If子句

首先,我们希望显示隐藏广告的替代方案.我们将更改广告包装的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',{
            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) {

但是我们在这个功能中需要什么呢？首先,我们需要将“BACk”链接的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',// 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',// 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',{
                expires: 7,// Not really necessary
                path: '/'
            });

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