Read more

Ad blockers: How to debug blocked elements

Daniel Straßner
November 08, 2021Software engineer at makandra GmbH

Some users might use Adblock Plus or similar browser plugins to reduce the number of ads displayed. If you run into an issue that your application or part of an application is blocked, this card will give you some guidance on how to debug it.


Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

In general ad blocking is not an issue for most of our web apps. But if your application uses iframes or is embedded in another site it's more prone to it.

Blocked elements most of the time appear to the user as empty frames in the page. The indicator icon of the ad blocker also gives hints about blocked elements.

A more detailed inspection can be seen in the browser's dev tools. If you install Adblock Plus, there will be a separate tab in the dev tools:

Image

In the example above this shows you that the element was blocked as a part of the URL matched a filter of EasyList Show archive.org snapshot .
To fix this issue the URL has to be changed so it does not contain the relevant part.
You might also have a look at the filter list to get a sense of what to not use in your URLs.

Posted by Daniel Straßner to makandra dev (2021-11-08 10:03)