Ad Blocking Detection

Ad blocking or ad filtering is a type of software, that can remove or alter advertising content from a website - banners, text ads, pop-ups, tracking code, malware, etc. Ad blockers are available for a range of computer platforms, including desktop and laptop computers, tablet computers and smartphones. A variety of methods have been used for blocking advertisements. The benefits of ad blocking software as seen from the visitor's perspective are mainly reduced page loading time and ad-free web pages. Some use ad blockers also to prevent tracking scripts to collect data.

The use of ad blocking software is increasing. However, many media owners (publishers) rely on advertising to fund the free content that they provide to users. Some have already taken counter-measures against users who block ads on the sites they visit. More and more websites are asking (or sometimes requiring) visitors to turn off ad blockers before allowing them to view the site's contents.

In most cases it is possible to detect if the visitor is using ad blocking software. However, it is not possible to force to show the ads that were blocked. But if you know that the user is using ad blocking you can do few things: you can ask him to turn it off, you can redirect the user to some page explaining the problem, you can protect the content if ads are not shown and you can replace normal ads that were blocked with some replacement ads that will not be blocked. Ad Inserter Pro supports all of this.

Ad Blocking detected – possible actions with Ad Inserter:

  1. Show popup message – user can close the message and continue reading
  2. Show popup message – user can't close the message – navigation not possible
  3. Redirect to some page
  4. Replace ads with some other content or different ads (Pro only)
  5. Protect (hide or modify) the content (Pro only)

Ad Blocking Detection Settings

The settings for ad blocking detection are divided into 3 parts:

  1. ad blocking detection
  2. general actions when ad blocking is detected
  3. actions for individual code blocks and content (Pro only)

Ad blocking detection is a code that is inserted when ad blocking detection is enabled. It checks various scripts and insertion of dummy ads and determines if ad blocking is present or not. Of course, this detection is not 100% reliable but it is very robust and hard to trick. There will always be some way for users to trick websites they are not using ad blockers – this is an endless game. However, in most cases it will be possible to detect if ads were blocked or not.

Ad blocking detection needs to be enabled for any ad blocking action to work. Ad blocking detection settings are available on the tab * / tab Ad Blocking.

To enable Ad blocking detection click on the right button to turn it green.

PLEASE NOTE: Ad blocking detection needs to be enabled even if you will not use general actions available here (popup message or page redirection) but you will only replace ads or protect content.

ad inserter ad blocking detection

Ad blocking detection has some additional parameters that you may need. Action here is a general action that is fired immediately when ad blocking is detected. Possible actions are None, Popup message and Page redirection.

When the user using ad blocker comes to your website you can delay action until few pages are visited. Delay action is the number of pages that the visitor must visit before the action triggers. Leave empty for immediate action.

When the action is triggered and the visitor for example closes the popup message the action will not trigger again during the No Action Period. This is a period in days (saved in cookie) when the user can browse the website without any warning or redirection. Leave empty to always trigger action every time the page is visited.

PLEASE NOTE: Delay action and No Action Period affect only actions set here. Ad replacement and content protection are not affected by these settings.

In order to improve or customize ad blocking detection Ad Inserter supports custom CSS selectors that are checked in order to detect ad blocking. This is an advanced feature and must be used with care – you need to know some HTML and CSS basics in order to use it.

CSS selector can be any class name or id that can identify your ad that may be blocked. Blocking is detected by checking ad height. If it is 0 it means that ad blocking prevented the ad from showing. For example, you have the following ad:

<div id="header-ad">
<a href="http://example.com/"><img src="http://example.com/assets/banner_300x250.jpg" /></a>
</div>

To use this banner for ad blocking detection use #header-ad for custom CSS selector.

Popup Message

Popup message is a typical action when you want to inform visitor that ad blocking was detected and he needs to do something. Message is normally displayed over semi-transparent overlay which covers the page. You can configure the message text (including HTML), message CSS and overlay CSS.

 ad inserter ad blocking message

Check Undismissible message to prevent the visitor from closing the popup window.

WARNING: This is very annoying and should be used with care! You are preventing the user from visiting your website!

To test the message click on the Preview button. A preview window will open. Here you can change text and CSS and watch live preview of the message.

ad inserter ad blocking message preview

To undo changes click on the Reset button to revert back to the saved code. To get default settings for message click on the Default button. Use +- buttons to increase or decrease the number of dummy paragraphs under message.

Once you are happy with the message click on Use to copy the settings to the Ad Inserter page. Click on Save settings to save them.

Redirection

When ad blocking is detected you can redirect visitor to any existing static page or custom url. Custom url can be absolute or relative.

ad inserter ad blocking redirection

Ad Replacement (Pro Only)

In addition to popup messages and page redirection you can replace ads that were blocked with some that may not be blocked. You can also hide or show some ads (or whatever is in the code block) when ad blocking is detected. Each code block has a setting for this – button Misc / tab Ad Blocking.

PLEASE NOTE: Ad Blocking detection needs to be enabled for ad replacement to work (tab * / tab Ad Blocking). You also can't use No Wrapping style as wrapping div has to be used in order to mark code blocks which need to be replaced/shown/hidden.

Do nothing

ad inserter ad blocking block do nothing

This is the default setting for code block. When ad blocking is detected it does nothing.

Replace

ad inserter ad blocking block replace

When ad blocking is detected the code block will be replaced with replacement code block (ad). Replacing means that the replacement block is normally inserted but hidden (using CSS). When ad blocking is detected the original ad is hidden (regardless whether it was blocked or not) and the replacement ad is shown.

Choose replacement ads wisely. Do not name images with standard names (ad, ads, banner) or with ad dimensions (300x250). Use some neutral name that will not alert ad blockers.

Show

The block is normally inserted but hidden (using CSS). When ad blocking is detected the ad (or any code) is shown.

Hide

The block is normally inserted and visible. When ad blocking is detected the ad (or any code) is hidden.

Content protection (Pro only)

Ad Inserter Pro supports also few methods to protect content when ad blocking is detected. This way you can hide, delete or change (via Javascript and CSS) some parts of the content that you don't want to show to visitors using ad blocking. Content protection works by inserting special shortcodes to mark content block that needs to be protected.

Normally you would need two code blocks: one to mark begining and one to mark end of protected content. For example, if you would like to protect text in posts except the first and last paragraph you would insert shortcode to mark the beginning after the first paragraph and shortcode to mark the end before the last paragraph.

Use code block insertion options as for inserting any other code. The only difference is that you should use No Wrapping style so the codes are inserted without any wrapping code. You can also use only shortcode to mark the beginning of protected block as protection will work until the end of the parent container - inside posts this usually means until the end of the post. Of course, you don't need to use automatic insertion. Once the code block is configured you can also manually insert shortcodes where needed.

Protection works by Javascript code which once ad blocking is detected looks for HTML “markers” (generated by shortcodes) and then applying requested protection until the end marker is found or there are no more elements inside container (usually a div). This may sound complicated but it is easy to use and very powerful tool to protect content.

Hide Content

Hiding works by applying CSS display: none;. The content is still present on the page but it is not visible. Any advanced user could open web inspector in browser and change visibility back. However, for most visitors this will look like the content is missing or protected. Shortcodes:

[ADINSERTER adb='hide']

[ADINSERTER adb='hide-end']

Delete Content

To the visitor this looks the same as hiding. The difference is that here is the content actually deleted from the page DOM. Therefore, it is not possible to open web inspector in browser and get the content back. Shortcodes:

[ADINSERTER adb='delete']

[ADINSERTER adb='delete-end']

Change Style

You can also change the style of the protected contend. The content is still present on the page but it is modified to decrease readability or to show it is protected. Shortcodes:

[ADINSERTER adb='css' css='ANY CSS CODE']

[ADINSERTER adb='css-end']

For example, to change the color of the protected text to some light gray you would use

[ADINSERTER adb='css' css='color: #ddd;']

Replace Text

You can also change text of the protected contend. The page still looks similarly as with the original text, however, when the visitor comes to the protected part he sees that there is something wrong. Ad Inserter will try to replace the original content with new text taking into account the length of the paragraph so the content layout will look like with the original text. Shortcodes:

[ADINSERTER adb='replace' text='ANY TEXT']

[ADINSERTER adb='replace-end']

Of course, you can use text replacement and style change. For example:

[ADINSERTER adb='css' css='color: #ddd;']

[ADINSERTER adb='replace' text='You are using ad blocker. ']

Content Selectors

To have more control over what is protected, Ad Inserter Pro supports to define comma separated list of CSS selectors in shortcodes. When no selector is specified a default selector p is used as most posts use p paragraphs. This is usefull when your content that needs to be protected uses different elements (p, div, ul, ol, li, blockquote, figure, etc.). With selectors you can have a detailed control over what will be protected and how. For example, if posts have also <li> elements in lists <ul> you would use shortcode

[ADINSERTER adb='css' css='color: #ddd;' selectors='p, li']

Troubleshooting Content Protection

ad inserter ad blocking enabled

  1. Make sure ad blocking is enabled,
  2. Make sure code blocks to mark protected block (where shortcodes are placed) have No Wrapping style.
  3. Use debugging functions to simulate and test ad blocking.

Debugging Ad Blocking Detection

In order to test ad blocking functions without actually using ad blocking software Ad Inserter Pro supports two debugging functions available form the Ad Inserter toolbar on the top of the pages – available when you are logged in, Toolbar is enabled for the user and Ad Blocking Detection is enabled (tab * / tab Ad Blocking).

ad inserter ad blocking debugging

Ad Blocking Status

When this function is enabled you will see a bar below the toolbar showing the status of ad blocking detection: whether ad blocking is detected, whether action cookie is present and how many page views were already counted (if used).

ad inserter ad blocking debugging status

Simulate Ad Blocking

With this function you can simulate and test ad blocking detection without actual ad blocking software. Ad Inserter will behave as there is ad blocking present. Of course, no ads will be blocked, only plugin ad blocking functions will be triggered when the page is loaded.

Practical example of content protection

Here we have a post with few paragraphs. When ad blocking is used we would like to protect all the paragraphs except the first three. For protection we will use shortcode to delete content. This is the original post:

 ad inserter ad blocking example 0

Ad Inserter Pro settings for content protection code block:

  • Automatic insertion: Before paragraph
  • Paragraph number: 4
  • Alignment and Style: No Wrapping
  • Code: [ADINSERTER adb='delete']

ad inserter ad blocking example 1

We will not use shortcode to end protection as we are protecting until the end of the post. Now either activate ad blocking or use Simulate Ad Blocking debugging function and reload post. You should see only the first three paragraphs.

ad inserter ad blocking example 2

Example with changed font size and color

  • Automatic insertion: Before paragraph
  • Paragraph number: 4
  • Alignment and Style: No Wrapping
  • Code: [ADINSERTER adb='css' css='font-size: 11px; color: #ddd;']

The post when adblocking is active:

 ad inserter ad blocking example 3

 

Example with replaced text

  • Automatic insertion: Before paragraph
  • Paragraph number: 4
  • Alignment and Style: No Wrapping
  • Code: [ADINSERTER adb='replace' text='You are using Ad Blocker. ']

The post when adblocking is active:

 ad inserter ad blocking example 4

Example with ad blocking information and deleted text

This is probably the best approach for content protection as you are protecting the content and you are also informing the visitor why the content is missing.

One code block for the message:

  • Automatic insertion: After paragraph
  • Paragraph number: 3
  • When ad blocking is detected: Show
  • Code:
<hr />
<p><strong>Blocked because of Ad Blocker</strong></p>
<p>It seems that you are using some ad blocking software which is preventing the page from fully loading. Please whitelist this website or disable ad blocking software.</p>

One code block for content protection:

  • Automatic insertion: Before paragraph
  • Paragraph number: 4
  • Alignment and Style: No Wrapping
  • Code: [ADINSERTER adb='delete']

We can't use one code block for the message and shortcode since the message needs wrapping div to show it only when ad blocking is detected. 

The post when adblocking is active:

 ad inserter ad blocking example 5