bekopharm,
@bekopharm@social.tchncs.de avatar

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)

macdonst,
@macdonst@mastodon.online avatar

@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/

stefan,
@stefan@stefanbohacek.online avatar

@macdonst @bekopharm Nice! I'll be sure to link to it when it's published. Thank you for the heads-up!

macdonst,
@macdonst@mastodon.online avatar
stefan,
@stefan@stefanbohacek.online avatar

@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!

allo,
@allo@chaos.social avatar

@bekopharm
I've had this on some sites for years. It doesn't even need a script to detect adblockers as one can just serve the message as image from ads.yoursite.tld/ads/ad.jpg and every reasonable adblocker should filter it.

stefan,
@stefan@stefanbohacek.online avatar

@bekopharm That's awesome, thank you for spreading the word!

JonTheNiceGuy,
@JonTheNiceGuy@toot.io avatar

@stefan @bekopharm I've just added this to my site! Thanks!!

stefan,
@stefan@stefanbohacek.online avatar

@JonTheNiceGuy @bekopharm Nice! My pleasure!

billiam,
@billiam@mas.to avatar

@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.

stefan,
@stefan@stefanbohacek.online avatar

@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!

stefan,
@stefan@stefanbohacek.online avatar

@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.

stefan,
@stefan@stefanbohacek.online avatar

@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!)

billiam,
@billiam@mas.to avatar

@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.

billiam,
@billiam@mas.to avatar

@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).

stefan,
@stefan@stefanbohacek.online avatar

@billiam That should work, thank you!

phryk,
@phryk@mastodon.social avatar

@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! _

phryk,
@phryk@mastodon.social avatar

@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. 😈

  • All
  • Subscribed
  • Moderated
  • Favorites
  • random
  • DreamBathrooms
  • everett
  • tacticalgear
  • magazineikmin
  • thenastyranch
  • rosin
  • tester
  • Youngstown
  • khanakhh
  • slotface
  • ngwrru68w68
  • kavyap
  • mdbf
  • InstantRegret
  • JUstTest
  • osvaldo12
  • GTA5RPClips
  • ethstaker
  • normalnudes
  • Durango
  • cisconetworking
  • anitta
  • modclub
  • cubers
  • Leos
  • provamag3
  • megavids
  • lostlight
  • All magazines