AdBlock进入ReactJs

Question

直到现在，我都在努力寻找一个没有任何进展的解决方案。我试图抓住用户是否有AdBlocker，如果有，我想显示一条消息，建议他关闭它。但是，到现在为止没有成功。

我将我的组件导入我的主容器，如：

<DetectAdBlock pathname={window.location.pathname} />

然后这是我的adblocker.js

import React from 'react';
import PropTypes from 'prop-types'

class DetectAdBlock extends React.Component {

    static propTypes = {
        pathname: PropTypes.string.isRequired
};

    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 = '/ads.js';
        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()
                  : null
                }
            </div>
        )
    }
}
// DetectAdBlock.propTypes = {
//     pathname: PropTypes.string.isRequired
// };

DetectAdBlock.defaultProps = {
    pathname: ''
}
export default DetectAdBlock;

问题是没有任何东西可以显示我启用了AdBlock。

Answer 1

我认为它应该比那更容易。我实际上无法测试这个，因为我正在使用adblock off，但这样的事情应该有效：

class AdblockDetect extends Component {
  state = {
    usingAdblock: false,
  }

  componentDidMount() {
    this.setState({ usingAdblock: this.fakeAdBanner.offsetHeight === 0 });
  }

  render() {
    if (this.state.usingAdblock === true) {
      return this.props.children;
    }

    return (
      <div
        ref={r => (this.fakeAdBanner = r)}
        style={{ height: '1px', width: '1px', visiblity: 'none', pointerEvents: 'none' }}
        className="adBanner"
      />
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <AdblockDetect>You are using adblock</AdblockDetect>
      </div>
    );
  }
}

Answer 2

我建议你使用npm包react-ad-block-detect：

安装包：

npm i react-ad-block-detect

然后尝试这个：

import React, { Component } from 'react';
import AdBlockDetect from 'react-ad-block-detect';

class MyComponent extends Component {
    render() {
        return (
            <AdBlockDetect>
                <p>Show this if an ad blocker has been enabled.</p>
            </AdBlockDetect>
        );
    }
}