Notes »

Ad-blocker banner

This is related to my block ads and trackers post:

  • Show an ad recommending installing an ad-blocker.
  • If the visitor is already using an ad-blocker, the ad is not shown.

I’m using a rule from easy list, that will block any /ad.css? file from loading.

The basic idea is:

  • We add a banner that is hidden by default using CSS.
  • When the ad.css is loaded, the banner is shown.
  • Because an ad-blocker will identify that CSS as an ad, it will be blocked and the banner will remain hidden.

This is the HTML in my website –removing specifics of my site’s CSS–:

<div class="ads" style="display: none;">
    <h3>This website is safe, because it is free of ads and trackers</h3>
    <p>But browsing the rest of the Internet exposes us to many threats!</p>
    <p>Protect yourself by installing an ad-blocker such as <a href="https://ublockorigin.com/" target="_new">uBlock Origin</a>.</p>
</div>

Tips:

  • Because this may not work with all ad-blockers –e.g. they may not use easy list–, make the message generic enough.
  • If the user is actually using an ad-blocker that is not using easy list, upgrading to uBlock Origin is actually a good thing!

The ad.css file can be something like the following –you may need to adapt it to fit your site’s CSS–:

.ads h3, .ads strong {
    color: #fff;
}

.ads a {
    color: #ff6;
}

.ads {
    border-radius: 6px;
    display: block !important;
    background-color: #e52c1b;
    color: #fff;
    padding: 1em;
}

In the <head> of your website, add this line –adjust the path to your CSS file accordingly–:

<link rel="stylesheet" href="/css/ad.css?1984">

You can use any other pattern that has a match in easy list, but this one should do it.

Depending on your cache settings, the user may need to invalidate the cache in the browser (e.g. reload + shift key) so the banner disappears after the ad-blocker is installed.

Last updated Jan 7, 2024
Internet