测试信息

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，但我会更容易找到类。）我将为主体提供一个类on-ads。

注意：只有ads.html页面中的正文标记可以包含此类！

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

<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是否处于活动状态

正如我之前所说，我们需要检查广告拦截客户端，而不是服务器端。这意味着我们不能使用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', window.location, {
            expires: 7, // Not really necessary
            path: '/'
        });

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

那里，这是第一大块。

检查是否在登陆页面，取消设置Cookie，设置另一个并添加内容

拥有ads.html目标网页的想法是，用户可以查看您对广告的态度以及您需要收入的原因。无需我们正在构建的脚本，就可以访问此页面。这意味着并非所有内容都必须始终在该页面上。例如，如果用户首先导航到ads.html（当“原始目的地”实际上是那个时），那么我们要创建的“返回原始目的地”按钮/链接一定不能存在页面本身）。

因此，如果用户已被重定向，我们必须添加“返回原始目的地”链接。我们可以通过检查我们之前设置的cookie的存在来做到这一点。可以肯定的是，我们还可以检查我们仅为该页面提供的正文标记，但这不是真正必要。

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', {
        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";
        }
    }
});

检测用户是否启用了广告拦截器，重定向到另一个页面但只有一次＆amp;用jQuery显示广告的替代品

1 个答案:

测试信息

你需要什么

检查Adblocker是否处于活动状态

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

检查是否在登陆页面，取消设置Cookie，设置另一个并添加内容

结果