发表新帖
发表新帖

Ad Blocker detection AKA Adblock Plus

前端 未结
关注
15 1262
北海茫月
北海茫月 2020-12-02 06:14

After searching Google and Stackoverflow for a few hours I could not find a solution. What I\'m trying to do is detect Adblock plus and display a simple message for now.

相关标签:
15条回答
  • 甜味超标
    2020-12-02 06:41

    The following snippet will pretty much detect all ad blockers. Requires jQuery.

    (function(){
    var bait = 'http://googleads.g.doubleclick.net/pagead/gen_204?id=wfocus&gqid=advertisment&advert=ads';
      $.ajax({ url: bait, dataType: "script"})
      .fail(function () { alert('ad blocked'); })
      .abort(function () { alert('ad blocked'); });
    })();
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    It's wrapped in a self-executing anonymous function so it doesn't interfere with other vars or code on the site.

    The bait uses the most popular ad serving network (Google's double click) and includes a few other query params used by easylist and others.

    The fail() and abort() methods are both required, but only one or the other will be invoked.

    Don't put the code in adblocker.js or similar since those sort of filenames themselves get blocked from loading. Either inline it or include it in an random/arbitrary filename or combine it in your main site JS file.

    0 讨论(0)
  • 野的像风
    2020-12-02 06:43

    Here is a simplest way to deal with it (no iframe, no jquery):

    var elem = document.createElement('div');
elem.className = 'adclass';
document.body.appendChild(elem);
window.setTimeout(function () {
    var isAdblockEnabled = !(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
    if (isAdblockEnabled) {
        // Adblock is enabled
    }
}, 0);
    0 讨论(0)
  • 野性不改
    2020-12-02 06:43

    I know this is kinda old, but here's IMHO a better way to do it:
    Add this to your <head> section:

    <script type="text/javascript">
window.onload = function() {
var iframe = document.createElement('iframe'),
    randomDomain = Math.floor(Math.random() * (10000 - 100 + 1)) + 100,
    iframeLoaded = true;
    
iframe.src = "http://"+ randomDomain +".com/ads.html";
iframe.height = ".1px";
iframe.width = ".1px";
iframe.id = 'some-ad';
iframe.onload = function() {iframeLoaded = false;};

document.body.appendChild(iframe);

setTimeout(function() { 
    var someAd = document.getElementById('some-ad');
    if(!iframeLoaded ||
       someAd == null || 
       someAd.style.display == "none" || 
       someAd.style.display == "hidden" || 
       someAd.style.visibility == "hidden" || 
       someAd.offsetHeight == 0)
        document.getElementById('ab-message').style.display = 'block';
    someAd.remove();
}, 500);
};
</script>`<br>

    Now you can use the ab-message id wherever you want to display a message to AdBlock users:

    <div id="ab-message" style="display: none">Your message here!</div>

    Note the inline style added to hide it originally (Of course, you can also do this from your own CSS file).
    Also note that it takes 500ms, that's because it has to wait for the adblocker to do its thing or it won't work.

    A little explanation of how this script works

    First, it appends an iframe with a source of a randomly generated link. (It is randomly generated because some adblocks are smart, at some point, they realize a link is fake).
    Then it runs multiple checks on that iframe (if it was loaded successfully or if its style was modified). If one of these tests is true, it then displays the ab-message element to adblock users.

    This script works for most (if not all) ad blockers.

    EXTRA

    No point, really, could have just created a gist, but instead I created a Github project, but still, check it out and star it if it helped you.
    abDetector: Simple vanilla JavaScript AdBlock Detector.
    Enjoy.

    0 讨论(0)
 看不清?
提交回复
热议问题