You don't have to tolerate ads!

Why I added the adblock popup to my website

I recently got linked to Maurycy's blog; more specifically, to their "No adblocker detected" article, which in turn was inspired by Stefan Bohacek's "Detect Missing Adblocker" WordPress plugin.

I have always been strongly opposed to ads (and willing to sacrifice even relatively large amounts of time and comfort to ensure I never see them), and I always recommend ad-blocking options whenever I notice ads on someone's devices, so I naturally thought it would be fun to implement something similar on my website. While I wrote my own implementation, I had some thoughts about ad-blocking, advertising, and most non-technical users' strange passivity about them; so I figured I would write this article to share those thoughts.

Enjoy? Maybe?

My implementation :3

First of all, if you are the kind of person that reads random deer's websites (weirdos /affectionate /<3), you probably already have at least some basic adblocking solution installed. So, for the sake of clarity, this is what my implementation looks like:

It pops up to the right of the website's main view (the DOE fantasy VM window) with a z-index of -1. It won't ever obstruct the website's content, and the user is provided with links to ad blocking tools and two different ways to close it.

In order to avoid creating noise for accessibility tools and/or users on browsers with no JavaScript support, it's right at the end of the tabbing order and is populated via JS after the page has finished loading. When users dismiss it, that status is stored as a boolean in localStorage['adblockDismissed'], so even if you choose to not/cannot use adblock, you should never see it again after dismissing it a single time. It also stores that key automatically 500ms after page load if it detects the popup was made invisible by an adblocking extension, so it remembers users at their "best". I'm aware popups are annoying, so I tried my best to make mine as unobtrusive as possible.

I'm also aware that getting browser-level adblock is harder on the disgusting walled gardens we pass for mobile operating systems, so the popup doesn't show up on the website's mobile view.

Code-wise, it's mostly based on Maurycy's implementation:

<!-- (...) -->
<script defer src="/globals/nativeads.js"></script>
<div hidden id="ad-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>
<!-- (...) -->

The basic idea is that ad blockers will see two extremely suspicious elements: a <script> tag loading something called nativeads.js, and a <div> with a bunch of ad-sounding class names.

Ideally, the user's ad blocking situation should kick in and stop at least one of those elements. If it blocks the <script>, the <div> never gets populated and the user doesn't see it; if it blocks the <div>, the user won't see it even if the <script> does populate it. Neat!

The <script>'s defer attribute makes it so that nativeads.js only runs after the user's browser finished loading and parsing the page, thus giving their adblock extension the best possible chance to block it.

As for the code itself, it's some extremely simple JavaScript:

const adContainer = document.getElementById('ad-note');

if (!localStorage.getItem('adblockDismissed') ||
    localStorage.getItem('adblockDismissed') === null) {
	adContainer.removeAttribute('hidden');
	adContainer.innerHTML = `<aside class="window red border"><span class="titlebar">No ad blocker detected!</span><div class="content"><p>No browser-level adblocker detected!</p><p>Advertising is annoying, obtrusive, wasteful and useless. Do yourself a favor and get an ad-blocking browser extension to stay safe and save time and bandwidth. <a href="https://github.com/gorhill/uBlock#ublock-origin">uBlock Origin</a> has generally good default settings!</p><p>I can't detect DNS-level adblocking without showing you an actual ad, so ignore this if you're already running a DNS-based adblocking solution (and if you aren't, hey, <a href="https://pi-hole.net">PiHole</a> is super easy to set up!)</p><p>Close this window or click <a onclick="document.getElementById('ad-note').setAttribute('hidden', true); localStorage.setItem('adblockDismissed', true)" style="cursor: pointer;">here</a> to dismiss this popup forever</p></div><button class="titlebarbutton" style="right: 0px;" aria-hidden="true" onclick="document.getElementById('ad-note').setAttribute('hidden', true); localStorage.setItem('adblockDismissed', true)"></button></aside>`
	setTimeout(autoDismiss, 500)
}

function autoDismiss() {
	if (getComputedStyle)(adContainer)['display'] == "none") {
		localStorage.setItem('adblockDismissed', true)
	}
}

It simply checks whether localStorage['adblockDismissed'] is set to false and, if it isn't (or if it doesn't exist at all), it unhides the <div id="ad-note"> we created in the page's HTML and populates it with innerHTML that fits the rest of my website's styling.

It also sets a 500ms timer to check the element's computed styles. That way, if the user's adblock re-hides the element before they get a chance to dismiss it, the script will make sure not to waste time repopulating it next time.

There are obviously cleaner ways to render the popup, sure, but I knew I'd want to write a tutorial about it, so I prioritized code simplicity/readability over "good practices" etc.

The CSS component is obviously dependant on your page's stylesheet and however you'd want it to look. In my case, most of it was already handled by preexisting rules, so I only had to set its size and position (and correct for some edge cases caused by it being outside the DOE window).

/* (...) */
#ad-note {
	background: var(--bg0);
	bottom: 20px;
	height: fit-content;
	position: absolute;
	right: 20px;
	width: 40ch;
	z-index : -1;
}

#ad-note aside {
	position: unset; /* .window causes some Bull Shit, apparently */
}

#ad-note:where(:hover, :focus) {
	z-index: 2;
}
/* (...) */
@media screen and (max-width: 812px) {
	/* (...) */
	#ad-note {
		display: none !important; /* !important just to make sure */
	}
	/* (...) */
}

Of course, if you want your popup to be more (or less) elaborate you can just do so. As far as I can tell, the part that actually triggers adblock extensions most reliably is the long list of suspicious classes, so as long as the wrapper has those you can take the concept and do pretty much whatever with it.

Sadly, this can't account for DNS-based adblockers such as PiHole, AdGuard Home or Technitium. Those solutions rely on the domain the ad's being loaded from, so there aren't any real reliable ways to trigger those without showing the user an actual ad, and I refuse to do that. Good on you if you're already using one of those, though! The popup shouldn't come back once you dismiss it, but you should probably consider a browser-level adblocker anyways (for YouTube ads, if nothing else)?

Final thoughts

First of all, check out shouldiblockads.com if you aren't convinced already.

Also, uh, I'm sorry about this section's preachy tone, I guess.

Look, a lot has been said about how ads are bad from an anti-capitalist and/or anti-consumerist point of view. I'm not beating that dead horse any more than it needs to. Yes, they are, but that's not the argument I'm trying to make here.

Ads are unnecessary. You don't have to put up with them; you don't have to tolerate them; you don't have to keep making excuses for them.

It's been proven that ad agencies inflate their numbers to manufacture consent for their continued existence, and in reality very few (if any) people actually get any useful/actionable information from seeing advertisments. They're useless. You don't need them. Take a couple minutes to actually think about whether your life has ever been meaningfully improved by seeing an ad. Think about whether you have ever gotten any important piece of information from an ad (not a PSA, mind you). If you somehow have ever found yourself in any of those situations, think about how often that has happened, and whether you would have realistically obtained that information from any other sources if you hadn't seen the ad itself.

If ads are useless, then what reason do you have left to keep exposing yourself to them while knowing full on well that you can almost effortlessly get rid of them almost completely? Apathy? Not getting around to it? Hey, you've read this whole article. Take a couple minutes to go set up adblock; I promise by the end of it reading will have taken longer.

You don't need ads. The people paying ad companies to show you ads don't need ads. The people that put ads on their websites or apps or whatever don't actually need ads. Considering the amount of energy and resources burned by the advertising industry, humanity doesn't need ads.

Are/were you pissed about Proof-Of-Work cryptocurrency's environmental impacts? About the environmental impact caused by all the new datacenters built during the Machine Learning/AI economic bubble? About Taylor Swift's private jet usage? Do you have any fucking idea how much money, energy and human-hours are wasted on advertising? Burned forever for demonstrably no fucking good at all? Get mad about advertising too.

Speaking of being mad: did you get annoyed by my popup? Did it annoy you more or less than the thousands of ads you are forcibly exposed to on a daily basis? Was it too preachy? Is that preachiness more or less manipulative than the ones desperately trying to sell you weight-loss pills or whatever the fuck it is that ad agencies are trying to sell nowadays? What made mine get your attention over those? Hey, if you don't notice normal ads' presence, why would you notice their absence? Might as well get rid of them, no?

Just... You genuinely don't need ads in your life! They're annoying, harmful, privacy-violating, often manipulative and, most of all: fucking useless, unnecessary and OPTIONAL. Block ads; I promise it'll be a net positive in your life.

Thank you for your time.

Back