Simple detection of whether the user has turned on ad blocking

Most small websites cannot operate without advertising revenue. Although domain name, hosting and other costs are not high, few people are willing to make ends meet for a long time.

A sustainable and healthy ecosystem is one where service providers create content, serve users, and gain profits at the same time.

One day when I visited Ruan Yifeng’s website, it prompted:

You are using an ad blocker, which prevents the content of this site from being displayed.

Please add www.ruanyifeng.com to the whitelist, unblock ads, and refresh the page. Thanks.

The reason is that I turned on the AdBlocker Ultimate ad blocking plug-in. After adding it to the whitelist and refreshing it, the page displayed normally. Generally, I will choose to allow ads to be displayed on websites with more carefully written content. This persistence is not easy. For example, this site of mine takes almost 2 hours to write an article. It has been losing money for three consecutive years. It has not closed down because I still have a heart that is willing to share, and I can afford the loss now.

The era of building websites has passed. The default browsers of mobile phones such as Vivo and Huawei turn on ad blocking. If you don’t believe me, go to a mobile phone store to try it, because I have tried it 😅. From this perspective, WeChat official accounts still have advantages. WeChat controls the browser of the official account! It is full of all kinds of advertisements. Of course, too many advertisements will be counterproductive.

Without further ado, let’s implement a similar function by ourselves.

1. Core code

 1function detectAdblock() {
 2  try {
 3    fetch(
 4      new Request(
 5        "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
 6        {
 7          method: "HEAD",
 8          mode: "no-cors",
 9        }
10      )
11    ).catch((error) => {
12      showNotification();
13    });
14  } catch (e) {
15    // Request failed, likely due to ad blocker
16    showNotification();
17  }
18}
19
20function showNotification() {
21  var sponsor = document.querySelector("#my-content");
22  var prompt = document.createElement("div");
23  prompt.className = "content";
24  prompt.style =
25    "hborder: 1px solid #c6c6c6;border-radius: 4px;background-color: #f5f2f0;padding: 15px; font-size: 14px;";
26  prompt.innerHTML =
27    "<h1>You are using an ad blocker, which prevents the content of this site from being displayed</h1><p>Creation is not easy , the site relies on advertisements to maintain its operation. Please also add <font color='green'><strong>mephisto.cc</strong></font> to the whitelist, unblock the ads, and refresh the page. Thank you🙏</p >  <img src='/images/unblock-ads.webp'/> <img src='/images/whitelist.webp'/>";
28  sponsor.parentNode.replaceChild(prompt, sponsor);
29}
30
31setTimeout(detectAdblock, 1000);

The principle is to detect whether the access to the HEAD method of the ad link is normal. If it is not normal, the content with the id of my-content will be replaced with the specified prompt information to prompt the user to unblock the ad.

Some readers may ask, how to eliminate network abnormalities in this way? It can't be ruled out, he was killed by mistake, ruthlessly and violently...

This is simple, easy to use and acceptable to me, because readers cannot access the advertising links (advertisements may not be displayed if they can access them, which is decided by the advertising alliance), which means that the probability of making money is zero, and most users are You can access this link, but it is not blocked in China. Users who can't see it will visit other sites, and there's nothing wrong with it. Users can fix their own network problems and naturally have access. What if the link itself is down? The probability is slim. After all, they have a market value of one trillion US dollars and are super capable multinational companies, so there is no need to worry. It's all dead, so what does the loss have to do with it? If you think about it this way, you can feel at ease. To take a step back, this detection condition can be continuously changed and optimized to what you want.

In fact, the logic of each ad blocking plug-in is different. Even if it is added to the whitelist, it is still inaccessible. This situation has not been considered and needs feedback for optimization.

2. Optimization of prompt information

My first version of the prompt information only had Chinese text information, with an English translation added at the end. After all, each of my articles has an English version, so traditional Chinese users can only read information in simplified Chinese.

Text alone is not enough. Yesterday, a reader sent me a question mark❓. It is estimated that the whitelist will not be added (or the similar function of the blocking software is not easy to find and the effect is different). I am a little unhappy that I can’t see the content😭 !

I don’t blame the user, I only blame myself, so I added image operation guidelines.

How do other plug-ins operate? This is also a problem. Let’s talk about it after making 5 million 😊.

I even used obs to record the screen and plan to provide videos or gifs after receiving more feedback from users.