3
votes

AdBlock dans ReactJs

J'ai du mal à trouver une solution sans aucun progrès jusqu'à présent. J'essaie de savoir si l'utilisateur a un AdBlocker et si c'est le cas, je veux afficher un message lui conseillant de le désactiver. Mais, jusqu'à présent, aucun succès.

J'importe mon composant dans mon conteneur principal comme:

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;

et puis c'est mon adblocker.js

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

Le problème est qu'il n'y a rien à montrer non plus j'ai activé mon AdBlock.

reactjs adblock

0 commentaires

3 Réponses :

0
votes

Je vous suggère d'utiliser le package npm react-ad-block-detect :

Installez le package:

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

Ensuite, essayez ceci :

npm i react-ad-block-detect

2 commentaires

Oui . Je connais ce package, mais je préfère garder mon code propre sans utiliser trop de bibliothèques. Mais fait toujours l'affaire pour quelqu'un. Merci mon pote. À votre santé .

Génial! aucun problème

4
votes

Je pense que ça devrait être plus facile que ça. Je ne peux pas vraiment tester cela car je travaille avec adblock off, mais quelque chose comme ça devrait fonctionner:

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

4 commentaires

Merci mon pote . Il fait parfaitement le travail.

Comment puis-je "réinitialiser" le composant AdblockDetect lors du démontage? De plus, que fait "ref = {r => (this.fakeAdBanner = r)}"?

Pour le contexte, je redirige l'utilisateur au lieu de renvoyer this.props.children à partir du code ci-dessus. Ensuite, je laisse l'utilisateur mettre en pause son adblocker et cliquer sur un bouton qui exécute history.goBack pour le ramener à la page avec les publicités (et le détecteur d'adblock). Cependant, même si adblock est mis en pause, le détecteur adblock est toujours déclenché. Je pense que c'est parce que la hauteur est déjà définie sur 0. J'ai essayé de régler this.fakeAdBanner.style.height (et largeur) à 1px à nouveau sur componentWillUnmount, mais cela ne l'a pas résolu pour moi.

Hm cela semble étrange si le composant était vraiment démonté, êtes-vous sûr qu'il est démonté?

2
votes

Avec le hook 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

0 commentaires