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

Question

这个问题已被问过很多次,但从来没有完全像这样.我想要什么:

• 检查用户是否启用了广告拦截器
• 如果是,请将用户重定向到目标网页
• 在该登录页面上,显示指向用户到原始目标的链接
• 只要启用了广告拦截器,用户就只会被定向到该目标网页一次(或每x天一次)
• 广告(隐藏)必须由自定义HTML替换

优先使用jQuery(客户端,因为据我所知,无法检测到adblocker服务器端).

注意:我只关注Google广告.

Answer 1

测试信息

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

更新为了提高用户友好性,我不再在我的网站上应用此技术了.

你需要什么

• jQuery的
• jQuery Cookie
• scripts.js在您的站点上运行的.js文件(以下称为)
• 广告的div包装器.不要使用太容易检测的与广告相关的类!尝试类似的东西class="cont-ad".因此,您将每个广告单独包装在该类的div中,例如<div class="cont-ad">.
• 您可以在其中解释为什么需要在您的网站上展示广告的页面.我会叫它ads.html.为该页面的body-tag提供一个易于识别但也是唯一的类.(你可以改用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.

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

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>');

但我们也希望将用户重定向到目标网页,对吧？但只有一次.那么我们要做的是:

• 检查是否ads_checked存在cookie (我将在一分钟内回复),如果没有,请转到我们的登录页面
• 将用户前往的位置保存在另一个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) {

但是我们在这个功能中需要什么呢？首先,我们需要将"back"链接的href设置为原始位置.我们将原始目的地保存在cookie中,因此非常有用!在那之后,我们想删除那个cookie(locational_cookie) - 我们不再需要它了.但是,我们需要另一个cookie.(饿了吗？)

回想一下我们之前构建的前一段代码:在嵌入式if子句中,我们检查是否存在一个名为的cookie 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";
        }
    }
});