Detect AdBlockers from a React Component

DetectAdBlock.js

/**
 *
 * Detect Ad Blockers
 *
 * Copyright (c) 2017, 2019 Four And A Half Giraffes, Ltd.
 * Permission is hereby granted, free of charge, to any person
 * obtaining a copy of this software and associated documentation
 * files (the "Software"), to deal in the Software without
 * restriction, including without limitation the rights to use,
 * copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following
 * conditions:
 *
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
 */

import React, { Component } from 'react';

class DetectAdBlock extends Component {
    constructor(props) {
        super(props);
        this.state = {
            adBlockDetected: false
        }

        this.detectAdBlocker = this.detectAdBlocker.bind(this);
    }

    componentDidMount() {
        this.detectAdBlocker();
    }

    componentWillUpdate(nextProps, nextState) {
        if (this.props.pathname !== nextProps.pathname) {
            this.detectAdBlocker();
        }
    }

    detectAdBlocker() {
        const head = document.getElementsByTagName('head')[0];

        const noAdBlockDetected = () => {
            this.setState({
                adBlockDetected: false
            });
        };

        const adBlockDetected = () => {
            this.setState({
                adBlockDetected: true
            });
        };

        // clean up stale bait
        const oldScript =
            document.getElementById('adblock-detection');
        if (oldScript) {
            head.removeChild(oldScript);
        }

        // we will dynamically generate some 'bait'.
        const script = document.createElement('script');
        script.id = 'adblock-detection';
        script.type = 'text/javascript';
        script.src = '/adframe.js'; // changed name of bait; seems ads.js was considered safe.
        script.onload = noAdBlockDetected;
        script.onerror = adBlockDetected;
        head.appendChild(script);
    }

    noticeContentJSX() {
        return (
            <div id="adblock-notice">
                <div className="message">
                    <h3>Hey, you!</h3>
                    <p>Your adblocker is on again.</p>
                    <button
                        onClick={this.detectAdBlocker}
                    >
                        Check for Adblocker again
                    </button>
                </div>
            </div>
        );
    }

    render() {
        return (
            <div id="adblock-wrapper">
                { this.state.adBlockDetected
                  ? this.noticeContentJSX()
                  : 'No adblocker here...'
                }
            </div>
        )
    }
}

export default DetectAdBlock;

a have ad block enabled, still i ads.js file is add to html document and adBlockDetected is false

Yeah im the same, I dont understand what is wrong. There is now present in the html a reference to ads and yet nothing is being detected.

I'll take a look. This was written years ago, and the current adblockers could have different bait methods.

I have solved it; rename your ads.js to adframe.js, and include it on the React component; it was caught by my adblocker. Will update posted code and the medium.com article.

hi,

thank your for this script, everything works! Just when the adblock is turned off it gives this error:
Uncaught SyntaxError: Unexpected token '<'
inside the adframe.js:1
any idea what is this about?

not sure without knowing your codebase, but it sounds like the request for adframe.js is returning HTML 404 page (or some other html-formatted page) rather than the real contents of adframe.js

Can you tell me a way to resolve 404 error onloading adframe.js?

@upendra-web, you will have to actually put an adframe.js file in the root of your server. It can be empty, but best for it to do something javascripty, like contain:

console.log('I am adframe.js');

Hi James! Thanks for all the code. I implemented the code but it seems todays chrome with AdblockPlus recognized neither "ads.js" nor "adframe.js" as an actual ad so it never detects that adblock is enabled. Using "pagead.js" as the bait file name works for me as of today.

Hi James! Thanks for all the code. I implemented the code but it seems todays chrome with AdblockPlus recognized neither "ads.js" nor "adframe.js" as an actual ad so it never detects that adblock is enabled. Using "pagead.js" as the bait file name works for me as of today.

Awesome. The industry keeps changing. That's interesting. I may come up with an array of filenames to test and a deploy script...

Wow !! It's amazing. 😍😍😍
just script.onload & script.onerror solved my problem within a nano sec.
Thank you dear