How To Detect Adblock In Angular

Hello friends, In this article, we learn about Adblock with an example.

What is Adblock?

• Adblocker doesn’t block ads – they block internet requests that transfer content into the browser.
• Ad blockers use filtering rules to dam or hide contents on an online page.
• While a webpage is loading, the ad blocker appears at the site’s scripts and compares them with a listing of websites and scripts it absolutely was designed to the dam. If it find any it blocks them.

How to add an Adblock extension?

Step: 1

You have to open your google chrome web store.

Step: 2

After that, you have to search Adblock in the search box and click on Adblock.

Step: 3

Next, you have to click the Add to Chrome button.

Now we are creating a simple demo for detecting Adblock on a page in Angular.

Step: 1

Create a project using this command.

ng new ng-adblock-detect

Step 2: Install Dependencies

npm install ng-adblock-detect

Now open the app.module.ts and add this code.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgAdblockDetectModule } from 'ng-adblock-detect';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule, NgAdblockDetectModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step: 4

Next, you have to add this code to app.component.ts.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  detected(isDetected: boolean) {
    if (isDetected) { 
      alert("AdBlock is enabled on this page!");
    }
    else{
      alert("No AdBlock is used on this page!");      
    }
  }
}

Step: 5

Next, you have to open the app.component.html and add this HTML code.

<ng-adblock-detect (adblockDetected)="detected($event)"></ng-adblock-detect>

Step: 6

Now run the project using this command.

ng serve

Output:

On this page, I have used AdBlock.

On this page, I have not used AdBlock.

Conclusion

In this article, we have learned about what is Adblock, how to add Adblock in our chrome, and how to detect Adblock in Angular.

Also, check How To Detect Adblock Using jQuery