Detect Missing Ad-blocker WordPress plugin

• Download plugin
• View source
• Resources
• Non-WordPress version

Do you have experience working with ads or ad-blockers? I would love your help!

Some people call ads on the web the internet’s original sin. The bottom line is, ads can install malware, they slow down the websites they’re on, they invade our privacy, the whole online ad industry is a big scam.

Chances are that you already know all this and have an ad-blocking browser extension installed. And if you’re wondering if there’s more you can do, and happen to run a WordPress site, I have something that might interest you.

A few years ago I had a dilemma. I wanted to include embedded tweets on one of my projects. This would allow the company to track my website’s visitors.

I since resolved this problem with another privacy-oriented plugin, but at the time, I decided to give people coming to my website a fair warning.

The current ad detection mechanism relies on using common CSS classes used by ads (shout out to @retr0id for the idea), which means that the note is treated as an ad, and if you have an ad-blocking extension installed, it will hide it.

If you’d like to see a demo, disable your ad-blocker and reload this page.

Recommended browser extensions, plugins, and add-ons

• uBlock Origin: open-source, supports Chrome, Chromium, MS Edge, Opera, Firefox and Safari up to version 13
• 1Blocker: supports iPhone, iPad, and Mac
• AdNauseam: obfuscates browsing data and protects users from tracking by advertising networks

Some plugins, including Adblock Plus and Ghostery, work directly with the advertising industry, and will not automatically block all ads.

Also, note that some websites may break when you visit them with an ad-blocking extension enabled. Most extensions allow you to exclude specific websites, so that’s one easy fix if that happens.

Non-WordPress sites

I would like to eventually release a non-WordPress version, but in the meantime, here’s a few tips on how you can add this to your site. (Also check out how others implemented this idea below.)

First, you will need to add a page element that looks like a typical ad to most ad-blocking plugins.

<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>TITLE</p>
    </div>
    <div class="ftf-dma-note-content">MESSAGE</div>
  </div>
</div>

Next, we’ll need to add this inline CSS to hide the warning so that it only shows up if nativeads.js.css was blocked from loading. (Or you can move this to a CSS file with your other existing styles.)

<style>
  .ftf-dma-note {
    display: none;
    pointer-events: none;
  }

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

Some ad-blockers work by blocking requests to specific files used by ads. We can take advantage of that by creating a file called nativeads.js.css with the following CSS rules:

.ftf-dma-note{
  display: block !important;
  pointer-events: all !important;
}

If this file is not blocked, and the “ad” on your page hasn’t been removed by an ad-blocker, these styles will ensure it’s visible.

This gets you the general functionality. You might also want to look into adding a bit of JavaScript to handle the close button and to prevent the note from showing when your site’s visitors browse the rest of your site after already closing it, which will also require using cookies.

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

(Shout out to Billiam for helping me with the CSS-only version!)

Other implementations

• Julian Foad wrote about how he customized this warning on his site.
• Andreas Grüner created a straightforward version without any dependencies packaged as “Pro Adblocker”. (Here’s the original version of the page in German.)
• Simon MacDonald created a web component based on this idea.
• And Simon Erkelens turned it into a module for the Silverstripe framework/CMS.

#adblocker #ads #php #plugin #privacy #security #web-development #webdev #wordpress #wordpress-plugin