3

这个问题已经被问过很多次了，但从来没有完全像这样。我想要什么：

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

首选使用 jQuery（客户端，因为据我所知，无法检测到 adblocker 服务器端）。

注意：我只关心谷歌广告。

4

1 回答 1

7

测试信息

  • 答案写于 2013 年 11 月 21 日。解决方案可能不适用于所有年龄段
  • 仅在 Windows 8 64 位机器上的 Chrome 31 和 Firefox 25 上测试
  • 提高了此JSFiddle的可读性。

更新为了提高用户友好性，我不再在我的网站上应用这种技术。

你需要什么

  • jQuery
  • jQuery 饼干
  • scripts.js在您的站点上运行的 .js 文件（以下称为）
  • 广告的 div 包装器。不要使用太容易检测到与广告相关的类！尝试类似的东西class="cont-ad"。因此，您将每个广告单独包装在具有该类的 div 中，例如<div class="cont-ad">.
  • 一个页面，您可以在该页面上解释为什么需要在您的网站上投放广告。我会打电话ads.html的。为该页面的 body-tag 赋予一个易于识别但也是唯一的类。（您可以改用 ID，但我发现 classes 更容易。）我会给 body 一个 class 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.

检查广告拦截器是否处于活动状态

正如我之前所说，我们需要检查广告拦截客户端，而不是服务器端。这意味着我们不能为此使用 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) {

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

回想一下我们之前构建的前一段代码：在嵌入的 if 子句中，我们检查是否存在名为ads_checked. 如果该 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";
        }
    }
});
于 2013-11-21T21:03:07.980 回答