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的工作，但这样的东西应该可以工作：

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

使用React钩子

import React, { useState, useEffect } from 'react'

const AdblockDetect = () => {
  const [usingAdblock, setUsingAdblock] = useState(false)

  let fakeAdBanner
  useEffect(() => {
    if (fakeAdBanner) {
      setUsingAdblock(fakeAdBanner.offsetHeight === 0)
    }
  })

  if (usingAdblock === true) {
    return null
  }

  return (
    <div>
      <div
        ref={r => (fakeAdBanner = r)}
        style={{ height: '1px', width: '1px', visibility: 'hidden', pointerEvents: 'none' }}
        className="adBanner"
      />
      Adblock!
    </div>
  )
}

export default AdblockDetect

Answer 3

我建议您使用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>
        );
    }
}