Beko Pharm (deprecated)

Nothing warms my heart more than another website picking up the idea "Detect Missing Ad-blocker" of https://stefanbohacek.com/project/detect-missing-adblocker-wordpress-plugin/ (after seeing it on mine in action).

#adblock

It's made for WordPress but the idea is so dead simple that it can be integrated in almost anything with some work (if nobody else did that work already :D)

Edith says: This is blowing up. I have no Soundcloud (:P) but @stefan has a Support My Work page at https://stefanbohacek.com/support-my-work/ suggesting organizations to donate to 🫡

Detect Missing Ad-blocker WordPress plugin | Stefan Bohacek

Provide a more secure experience to your website’s visitors.

Apr 30, 2024 at 11:57amWeb
Show threadphryk 🏴Apr 30, 2024
@bekopharm Oh wow, I had heard of this, but did not realize it actually works without JS – so it's feasible for my site, too! *_*
Show threadphryk 🏴Apr 30, 2024
@bekopharm I'm probably gonna be super obnoxious about it tho and make it an unclosable overlay obscuring the entire page like I did back in the day when my site detected IE6. 😈
Show threadBeko Pharm (deprecated)Apr 30, 2024

@phryk it does. JS is optional but there is no way to make it go away by saving a (functional) cookie so it does not show again and again.

That may not matter depending on your layout, of course 🙃

Keep in mind that website previews will start rendering that too.

Show threadStefan BohacekApr 30, 2024
@bekopharm That's awesome, thank you for spreading the word!
Show threadJon "The Nice Guy" SpriggsApr 30, 2024
@stefan @bekopharm I've just added this to my site! Thanks!!
Show threadStefan BohacekApr 30, 2024
@JonTheNiceGuy @bekopharm Nice! My pleasure!
Show threadBilliamApr 30, 2024

@stefan @bekopharm Thanks, what a great idea!

In the CSS blocking test, shouldn't the `.ftf-dma-note.d-none` use `display:block`, so that if the CSS file isn't blocked, the div is visible?

Right now it would be hidden if the css file loads.

Show threadStefan BohacekApr 30, 2024

@billiam @bekopharm Thank you!

And yes, you are right, good catch! I fixed the blog post, and I'll also review the plugin version to make sure everything works fine there as well.

Really appreciate it!

Show threadStefan BohacekApr 30, 2024

@billiam @bekopharm So I had another look at this, and it's actually a bit trickier.

When the note initially loads, it has both the ftf-dma-note and d-none classes, and should be only visible if the external CSS file doesn't load, *unless* a cookie, which indicates that the visitor dismissed the notification during an earlier visit, is present.

The d-none class is removed if that cookie is not found, as seen here: https://github.com/stefanbohacek/detect-missing-adblocker/blob/master/src/scripts/detect.js.

detect-missing-adblocker/src/scripts/detect.js at master · stefanbohacek/detect-missing-adblocker

Provide a more secure experience to your website’s visitors. - stefanbohacek/detect-missing-adblocker

GitHub
Show threadStefan BohacekApr 30, 2024
@billiam I think I figured out the correct order of styles rules now. (Not asking for you to review this, but feel free, if you find yourself bored!)
Show threadBilliamApr 30, 2024

@stefan

Ahh I see. I think in the current implementation, the javascript is non-optional.

The block will always have the `d-none` class, and the priority of the inline style will win out, and the block will be displayed, regardless of whether the `nativeads.js.css` file loads.

For a javascript-less approach, you could:

Remove the default `d-none` class. Hide the block by default with the inline style, show the block with the external CSS.

Show threadBilliamApr 30, 2024

@stefan Then for the JS file, you'd instead add `d-none` if the cookie exists, or the close button is clicked.

So the only changes are: Removing the `d-none` class in the markup, and adding via javascript (instead of removing).

Show threadStefan BohacekApr 30, 2024
@billiam That should work, thank you!
Show threadMeercat ✅ 
May 1, 2024
@bekopharm @stefan Good idea👍
Show threadSimon MacDonaldMay 2, 2024

@bekopharm @stefan this is a great idea. I converted it into a web component and put up a beta on my site.

Blog post coming tomorrow.

https://simonmacdonald.com/

Simon MacDonald

Portfolio for Simon MacDonald, Human Goodreads

SimonMacDonald.com
Show threadStefan BohacekMay 2, 2024
@macdonst @bekopharm Nice! I'll be sure to link to it when it's published. Thank you for the heads-up!
Show threadSimon MacDonaldMay 2, 2024

@stefan @bekopharm Post is finally up.

https://mastodon.online/@macdonst/112373385029695543

Simon MacDonald (@[email protected])

Detect Missing Adblocker Component Nudging folks to install an Adblocker in order to protect themselves https://simonmacdonald.com/blog/posts/2024-05-02-detect-missing-adblocker-component

Mastodon
Show threadStefan BohacekMay 2, 2024

@macdonst @bekopharm This is great! I added a link to your blog to https://stefanbohacek.com/project/detect-missing-adblocker-wordpress-plugin/#other-implementations.

Thank you for putting this together!

Detect Missing Ad-blocker WordPress plugin | Stefan Bohacek

Provide a more secure experience to your website’s visitors.

Show threadSimon MacDonaldMay 2, 2024
@stefan Thanks for the link!