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

#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)

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
  • Durango
  • DreamBathrooms
  • khanakhh
  • GTA5RPClips
  • osvaldo12
  • magazineikmin
  • mdbf
  • InstantRegret
  • rosin
  • Youngstown
  • slotface
  • everett
  • kavyap
  • ngwrru68w68
  • megavids
  • modclub
  • tester
  • tacticalgear
  • cubers
  • thenastyranch
  • cisconetworking
  • ethstaker
  • Leos
  • provamag3
  • normalnudes
  • anitta
  • JUstTest
  • lostlight
  • All magazines