Full version (without ads :-)) is accessible on my blog http://bit.ly/bypass-adblock

You're losing ~ 25% of your revenue because of AdBlock, which is not negligible. If your ads are not unpleasant or harassing, you do not have a fake button leading to advertising, or pop-up windows, IN MY OPINION you have the right to fight AdBlock.

But how?

The aim of this article is to help you, as a website owner, to combat advertising blocking. To win, you need to understand how AdBlock works. Identify its strengths and weaknesses and set a strategy against blocking advertising accordingly.

What AdBlock is?

AdBlock is primarily referred to as web browser add-ons that block ads on websites. The user simply installs them into the web browser and no longer has to worry about anything when browsing through the Internet. AdBlock will solve everything in the background.

What and how it is blocked?

So how can AdBlock find advertising and just not show it to the user? To find the answer, at least have basic knowledge of HTML and CSS. Let's have the following HTML structure:

<div id="article">
  This is an article.
</div>
<div id="advertisement"> 
  Buy new phone with 50% discount!
</div>
<div id="article_2">
  Another article.
</div>

On a glance, it's clear what advertising is, and what an advertiser isn't. The AdBlock add-on just looks at its database of well-known ads and compares the individual elements on the page. If it finds a match, it removes the element from the page. Since id = "Advertisement" is most likely in the database of known ads, AdBlock deletes this element and all its children in HTML.

What's AdBlock targeting?

AdBlock can write rules on anything in HTML and CSS. It can focus on the level of HTML tag immersion, their classes, id, attribute data, css rules and their order.

How to find out what AdBlock is catching on my page?

If you don't know what AdBlock is grasping for on your page, I attach a simple guide.

1. Install AdBlock Plus as a add-on to your browser,
2. open DevTools (F12 keyboard shortcut),
3. in DevTools, click on the "AdBlock Plus" tab,
4. up in dropdown, set up "Show _ Blocked _ Items of _ any _ type",
5. Reload Page

You'll get a red sheet of all the blocked elements on the page, their types (script, element, etc.), domains and blocking rules. You can read from it what easlist the rule comes from.

Program for "acceptable ads"

The first ways is an official one. AdBlock Plus has a program for "acceptable ads" that grants an exception with blocking advertising under certain conditions.

Conditions include:

• Placing advertising outside the main content
• Clear resolution of what is content and what is advertising
• Advertising size on the page

Create issue in easylist to remove rule

If you think AdBlock is blocking an element that isn't advertising, or a rule on your page breaks a layout, you can add an issue to the appropriate easylist with a comment on what's blocking, what's breaking it, and how to reproduce it. If the easylist administrator approves your claim, the rule will be removed or replaced.

Proxy URLs

Proxing a familiar advertising URL through your domain. AdBlock can focus on URLs in the link in HTML (for example, advertima.eshop.com/mobile), thereby blocking the entire advertising element. So if you change the URL in the link to, for example, yourdomain.com/direct?ID=3958104 and redirect from this URL to advertima.eshop.com/mobile, AdBlock has nothing to grab on to.

Advertising scripts that AdBlock simply blocks can also be tackled this way.

Hashing CSS classes and attributes

The often used technique of fighting AdBlock is hashing out CSS classes and other elements. If a CSS ad has a class called Ad, it's simple to filter it out. If you're throwing up the value, filtering it will be more native. If you dynamically hash out the value, filtering using CSS classes will be virtually impossible.

Such dynamic shedding can have different implemnnings. For example, you can use a bundler (e.g. Webpack, together with CSS Modules), which classes use the hashing feature to execute such as class name + git commit hash.

Advertising camouflage

Another problem with advertising as such is its uniqueness and simple filtering. So how do you disguise such advertising?

Add other non-promotional elements to the page that have the same HTML structure, but different content. Such an element is more challenging not to include in the filtering rule.

If AdBlock adds a rule that blocks both advertising and the non-advertising element, you can go back a few steps above and create an issue in the relevant easylist.

Using SVG instead of text "Advertising"

You may be required to label the advertising element with the words "Advertising" or "Sponsored." Unfortunately, that play into the hands of AdBlock.

It's easy to get around. Instead of text as such, you display SVG, which contains the text in question and insert it as a background image. The text in the SVG thus embedded is hidden for AdBlock. When you combine this approach with hashing out the URL of a given SVG, you have a solid defense.

<svg width="100" height="35" xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect fill="none" height="37" width="102" y="-1" x="-1"/>
  </g>
  <g>
    <text font-family="Helvetica, Arial, sans-serif" font-size="24" y="24.5" x="2.5" stroke-width="0" stroke="#000" fill="#444">
      Advertising
    </text>
  </g>
</svg>

To meet the previous Advertising point, you can create a second SVG that has no text and is zero in size. You insert such SVGs into all non-advertising elements so that, again, they are least different from advertising in terms of HTML structure.

Another approach is to parse texts into several HTML tags in different order. Facebook, for example, has implemented this approach.

Full article is accessible on my Gastby blog http://bit.ly/bypass-adblock