Filtering out newsletter signup forms embedded in web articles

Very few sites on the internet are meant to facilitate reading — most are, in fact, designed to inhibit reading.

Alan Jacobs

Browsing and reading web articles comfortably online without an ad-blocker is difficult. Using uBlock Origin to block out ads drastically improves the experience, but even more can be done.

To improve focused reading, you’ll want to consider filtering out non-essential elements increasingly appearing embedded between paragraphs of text. One of these is newsletter signup blocks.

Newsletter signup embedded in the body of an article

Signup forms are annoying when they appear in the middle of the content you’ve started reading. But they are even more annoying when the visual styling that sets them apart from the rest of the content gets stripped away. If you use your browser’s reader mode, the article above will look like this:

Newsletter signup request in Firefox’s Reader mode

If you’ve used our Push to Kindle or Simple Print application, or a read-it-later application like Wallabag or Instapaper, you might have noticed similar intrusions.

Thankfully, there are people who maintain filter lists targetting such annoyances. A lesser known feature of ad blockers is their ability to do additional filtering using these lists to remove signup forms, social media share buttons, cookie warnings, and more.

Fanboy’s Annoyance List

One frequently-updated set of filters for removing such annoyances is Fanboy’s Annoyance List. It contains over 2,000 filters targetting just the various newsletter and email signup blocks.

Here’s a sample of the kind of element-hiding filters it contains targetting newsletters:

##.aol-newsletter
##.aol-newsletter-page
##.app_box_newsletter
##.app_mod_int--social
##.area-newsletter
##.ars-newsletter-callbox
##.article--newsletter--wrapper
##.article-body-weeklyNewsletter
##.article-bottom-newsletter-promo
##.article-chimp-subscribe

The line in bold contains the CSS selector that targets the newsletter blocks on the Ars Technica site (like the one in the screenshot above). If you browse with this list enabled in your ad blocker, you’ll see much less of these embedded in articles.

We’re big fans of uBlock Origin here, so if you’re using it, here’s how to enable Fanboy’s Annoyance List:

  1. In your browser, click the uBlock Origin toolbar button to open its panel
  2. Click the button with the cogs to open the settings dashboard
  3. Choose Filter Lists from the tabs at the top
  4. Scroll down until you reach the Annoyances section
  5. Enable Fanboy’s Annoyance
  6. Click Apply Changes

That’s it! Now when you load articles, you should start seeing fewer distractions in the text.

Applying filter lists in Push to Kindle, Simple Print, and Full-Text RSS

We’ve recently started applying most of the element filters in Fanboy’s Annoyance List in our software. When processing article content in Push to Kindle, Simple Print and Full-Text RSS, these filters now get applied.

Fanboy’s Annoyance filter list, however, normally gets applied in the context of a full web page. When we apply it within the context of just the article body, we use a small subset of its filters. As such, we’ll soon be whittling down the filter list to just those that match elements in article texts.

Page context aside, researchers at Brave have done some interesting work to figure out how much of the popular filter lists are now stale (filters that target elements or network requests that no longer occur on the web).

When it comes to newsletter and email signup forms, here are some of the CSS selectors from Fanboy’s Annoyance List that we’ve found matching elements in articles across a number of domains:

.newsletter-widget
#newsLetterSignUp
#article-newsletter-signup
#notification-articleblock
.et_bloom_optin
#newsletter-signup-short-form
.newsletter-signup
.newspack-inline-popup
.newsletter_signup

Any elements matching these filters (and a lot more) get removed from the final article that our extractor returns. We’ll include the full set of filters in the next release of Full-Text RSS.

Keeping the annoyance filter list up to date

Finally, it’s important to note that these filter lists are maintained through community effort. If you notice annoyances in articles or web pages that you read in your browser, please report them to the maintainers to help improve the list. You can either report as an issue or post in the EasyList forum.

If you notice annoyances in articles processed by our tools, please post in our forum. We’ll do our best to have them removed. (These filters can also sometimes match and remove elements that shouldn’t be removed, so if you’ve noticed any odd results using our tools lately, please do let us know and we’ll investigate.)

You can read comments on this post on Hacker News.