title: Detect adblock with react
body: <p>I am trying to detect if AdBlock plus is running in firefox, it does not need to work 100% of the time, but I at least want to disable the built in adblockers that come with firefox and chrome.</p>
  <hr />
  <p>It looks like the most promising solution is from this <a href="https://github.com/sitexw/BlockAdBlock" rel="nofollow noreferrer">blockAdBlock</a> package. They show an <a href="https://fuckadblock.sitexw.fr/blockadblock/" rel="nofollow noreferrer">example which works,</a> but it requires manipulation of the main index.html file. I'm using Gatsby, which doesn't really give you access to the .html files, so I would like to detect the adblocker in my component.</p>
  <p>The code in their <a href="https://github.com/sitexw/BlockAdBlock/blob/master/blockadblock.js" rel="nofollow noreferrer">blockadblock.js</a> file is an IIFE, which I don't understand too well, but I understand enough to know that it's invoked when it's created.</p>
  <p>If I just copy paste the code from that file and place it inside my component and then try to check for the adBlocker, it looks like blockAdBlock is never undefined</p>
  <pre><code>const BAB = (function(window) {...})(window);
  
  if (typeof blockAdBlock === 'undefined'){     //Always true
      alert('works')
      canRunAds = false
   }
  </code></pre>
  <p>If their example works, I feel that I should be able to get something working from it.</p>
  <hr />
  <p><strong>Most Solutions I've seen</strong></p>
  <p>Every <a href="https://stackoverflow.com/a/18180709/6331353">common answer</a> I've seen which uses something like putting a div in which looks like</p>
  <pre><code>&lt;div id=&quot;ad-container&quot;&gt;
    &lt;img src=&quot;../ad/ad.png&quot; id=&quot;ad&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and then uses some javascript to check if 'ad-container' has a height &gt; 1. My divs which names like &quot;ad-container&quot; (or ad, ad-block, ad-banner) are not removed by an adblocker so this method is faulty.</p>