Adblocker Not Installed warning

Help Customization
1

Based on this Detect Missing Ad-Blocker plugin for Wordpress, I pounded on write.as a little.

Test — adblocker-test is the result. It has the following custom CSS:


#ftf-dma-note
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background-color: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

div.ftf-dma-note-content-wrapper {
    background: #fff;
    color: #333;
    width: 50%;
    height: 50%;
    padding: 1em;
}
  
  /* this is the close label */
  .ftf-dma-close-btn {
    float: right;
    cursor: pointer;
  }

  .ftf-dma-note.d-none {
    display: none !important;
    pointer-events: none !important;
  }

Then within the page, I have the following html:


<div
  id="ftf-dma-note"
  class="ftf-dma-note ad native-ad native-ad-1 ytd-j yxd-j yxd-jd aff-content-col aff-inner-col aff-item-list ark-ad-message inplayer-ad inplayer_banners in_stream_banner trafficjunky-float-right dbanner preroll-blocker happy-inside-player blocker-notice blocker-overlay exo-horizontal ave-pl bottom-hor-block brs-block advboxemb wgAdBlockMessage glx-watermark-container overlay-advertising-new header-menu-bottom-ads rkads mdp-deblocker-wrapper amp-ad-inner imggif bloc-pub bloc-pub2 hor_banner aan_fake aan_fake__video-units rps_player_ads fints-block__row full-ave-pl full-bns-block vertbars video-brs player-bns-block wps-player__happy-inside gallery-bns-bl stream-item-widget adsbyrunactive happy-under-player adde_modal_detector adde_modal-overlay ninja-recommend-block aoa_overlay message"
>
  <div class="ftf-dma-note-content-wrapper">
    <span onclick="" id="ftf-dma-close-btn" class="ftf-dma-close-btn"
      >Close</span
    >
    <div class="ftf-dma-note-header">
      <p>Adblocker not detected!</p>
    </div>
    <div class="ftf-dma-note-content">Consider installing a browser extension which blocks ads and other malicious content (<i><a href="https://shouldiblockads.com">why?</a></i>):<ul>
<li><a href="https://ublockorigin.com/">UBlock Origin</a></li>
<li><a href="https://underpassapp.com/StopTheMadness/">StopTheMadness</a></li>
<li><a href="https://www.ghostery.com/">Ghostery</a></li>
</div>
  </div>
</div>

There’s also custom JavaScript


const cookieNameValue = "ftf-dma-notice=shown";
const note = document.getElementById("ftf-dma-note");
const noteCloseButton = document.getElementById("ftf-dma-close-btn");

if (note !== null && noteCloseButton !== null) {
  noteCloseButton.onclick = (ev) => {
    note.classList.add('d-none');
    document.cookie = cookieNameValue;
  };  
}

but this is only needed if you want to set a cookie so that the user who has clicked “Close” won’t have to see the warning again.

Why might you want to do this? Should I Block Ads? has an explanation.

Presented as an illustration that quite a bit of customization is available in write.as if you get clever.

2 Likes
2

You are a freakn legend! I approve :grin:

I wont be adding this to mine (because I am lazy) but man I do love this.

1 Like
3

This is really cool!! Thanks for sharing, @davepolaschek!

1 Like
4

Matt, one of the things I’ve been wondering is if it’s possible to change the landing page for a blog (when no page is specified, for example).

I think there are a few cases where this might be a handy thing, and this warning is one of them.

Thanks!

1 Like
5

Oh yeah, that’d be great for this. There’s been some discussion around it that might help for now, here: Home Page, and an older feature request: Option to Set Pinned Page as Homepage. But I think this would be a great feature, so I would like to add an easy way to do this in the future.

6

Yes. That would also be a nice option for “book” blogs, letting people land on the table of contents or cover page, rather than seeing multiple pages. I’ve figured out how to force display of just a single page, but the data still gets squirted across the wire.

Anyway, I’ve got three sites now that could use that feature.

1 Like