Install fuckadblock or just-detect-adblock, adblock blockers in Angular.
In this example we will install in Angular a blocker for AdBlockers. I leave you the following repository https://github.com/al118345/ProyectoTestBlockAdblock with an example implementation and the following video https://www.youtube.com/watch?v=lnTpHgYtLRs :
Introduction
Surely, if you have found this website, you will be the owner of a website and you expected advertising to pay your hosting bills. And, if you are successful, you could even be able to pay a supplement to your salary as compensation for the hard work.
On the other side are the users of your website. Your dear visitors are tired of being bombarded with intrusive advertising, flashy banners and advertisements that ruin the browsing experience. They do not have to be congratulated for being the millionth visitor to your website, they do not want to enter the draw for five iPhones, the only thing they want is to access your content.
As it is much easier for users to remove advertisements than to develop advertising ethics across all the Internet, a solution quickly emerged: AdBlockers
AdBlockers are browser extensions that block or remove the advertising from a website. These extensions remove everything except the main content of the page, so, as the owner of a website it is a very serious problem.
At the beginning it was not a big problem since few people used them and knew of their existence. But that has changed, if you take a quick look through the main browser extension repositories you will see that AdBlockers are the most popular category. Of course, small sites are at greater risk, since they cannot attract the same interest of advertisers and cannot experiment with different formats.
Luckily, the most popular AdBlocker, AdBlock Plus, allows acceptable advertising by default. Judging by the uproar caused by this decision, many people further restricted the Adblock Plus parameters, while others changed extension. This means that we, as authors, have to manage this problem. A simple solution is to detect the presence of an ad blocker, and this is the purpose of this article.
Solution for Adblock Plus.
Install the library just-detect-adblock in your project. For that follow the following steps:
- Install the library just-detect-adblock
It is also necessary to add the JavaScript library to the project by modifying the angular.json file in the following way: - Update the index.html file. The behavior of this modification is, in case adblock is active, to show an alert to the user and redirect him or her to an explanatory page.
Important, the location. The .js in the head and the function in the body. - The redirection is based on the following rules:
- The idea is that, when the user has disabled the adblocker, the user clicks on our page explanatory and is redirected to the website that he or she originally wanted to access. To do this we first introduce the following code in a component created for this purpose:
The url is obtained in the following way:
Solution for Brave in Angular Universal.
Install the library fuckadblock in your project. For that follow the following steps
- Install the library fuckadblock
- Update the index.html file. The behavior of this modification is, in case adblock is active, to show an alert to the user and redirect him or her to an explanatory page.
- The redirection is based on the following rules:
- The idea is that, when the user has disabled the adblocker, the user clicks on our page explanatory and is redirected to the website that he or she originally wanted to access. To do this we first introduce the following code in a component created for this purpose:
The url is obtained in the following way: