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).
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
@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! *_*
@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.
@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.
@bekopharm That's awesome, thank you for spreading the word!
@stefan @bekopharm I've just added this to my site! Thanks!!
@JonTheNiceGuy @bekopharm Nice! My pleasure!
@JonTheNiceGuy @stefan @bekopharm So that's its origin story? I love it. I saw it in the wild a few weeks ago, at https://dbzer0.com/
@n8chz @JonTheNiceGuy @bekopharm It's always fascinating (and very rewarding!) when one of my many niche and highly specific projects catches some attention.
@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.
@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!
@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.
@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!)
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.
@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).
@billiam That should work, thank you!
@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.
@macdonst @bekopharm Nice! I'll be sure to link to it when it's published. Thank you for the heads-up!
@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!
@stefan Thanks for the link!