Script Anti AdBlock Dan Cara Kerjanya

Script Anti AdBlock adalah sebuah kode javascript yang berfungsi untuk mendeteksi apakah pengunjung website menggunakan extension Adblock (di chrome) atau pengaya Adblock (di Firefox) di sebuah browser. Jika ternyata di browser pengunjung terdeteksi memakai extension/pengaya Adblock, maka Script Anti AdBlock akan menjalankan perintah untuk mematikan atau menon-aktifkan extension/pengaya Adblock tersebut. Perintah yang di tulis dalam kode Script Anti AdBlock biasanya merupakan sebuah fungsi untuk menampilkan sebuah pop up berisikan DOM HTML tertentu.

Extension atau Pengaya Adblock merupakan sebuah addon yang terdapat pada sebuah browser untuk memblokir iklan yang tampil pada sebuah halaman website. Jika pengunjung memakai extension/pengaya Adblock, maka penghasilan sebuah website akan menurun karena tidak tampilnya iklan pada halaman website tersebut. Hal ini tentu saja membuat kita sebagai pembuat konten akan merasa dirugikan. Oleh karena itu, disini saya akan menjelaskan cara kerja atau konsep dasar cara kerja script Anti AdBlock. Sebelum memahami cara kerja Script Anti AdBlock, sebaiknya kita memahami terlebih dahulu bagaimana cara kerja Extension atau Pengaya Adblock itu sendiri.

Cara Kerja Extension AdBlock atau Pengaya Adblock

Extension atau Pengaya Adblock bekerja dengan mendeteksi sekumpulan kode iklan yang terdapat pada DOM HTML. Sekumpulan kode yang di deteksi oleh Extension atau Pengaya Adblock ini bisa berupa kode script iklan, Tag id iklan, dan kode kode lain yang sudah di set di Extension atau Pengaya Adblock tersebut.

Salah satu kode DOM HTML yang di deteksi sebagai kode iklan adalah sebuah ELEMENT TAG ID bernama "wrapfabtest".

Jika element tag id "wrapfabtest" ini terdapat pada sebuah halaman website, maka pengunjung yang memakai Extension atau Pengaya Adblock di browsernya akan memblokir element tag id ini. Sehinga element tag id "wrapfabtest" ini tidak akan terload di DOM HTML.

Oleh karena itu kita akan membuat sebuah fungsi javascript menggunakan framework javascript yaitu JQUERY untuk mendeteksi apakah element teag id "wrapfabtest" ini tertulis di html atau tidak. Jika ternyata tidak terdeteksi, maka kita akan membuat sebuah fungsi untuk menampilkan pop up yang berisi sebuah perintah agar menyuruh pengunjung untuk menon-aktifkan Extension atau Pengaya Adblock tersebut.

Kode Dasar Script Anti AdBlock

Script dasar Anti AdBlock yang sudah saya buat adalah sebagai berikut :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" onerror="adBlockFunction();"></script>
<script>
$('<style>').text(`
.adBanner {
    background-color: transparent;
    height: 1px;
    width: 1px;}
`).appendTo(document.head);

var nametagadblock =  document.createElement('div');
nametagadblock.innerHTML = `
<div id="wrapfabtest">
    <div class="adBanner">
    </div>
</div>
`;
document.body.appendChild(nametagadblock);

//script deteksi adblock
$(document).ready(function(){
    if($("#wrapfabtest").height() > 0) {
//fungsi jika adblock tidak terdeteksi  
    } else {
adBlockFunction();  
    }});
function adBlockFunction() {
//fungsi jika adblock terdeteksi
  alert('AdBlock Detected ');   
}

</script>


Terlihat bawah kode script yang saya beri tanda bold dan yang saya beri blok warna merah adalah fungsi yang akan dijalankan ketika Extension AdBlock atau Pengaya Adblock terdeteksi di browser. Silahkan aktifkan Extension AdBlock atau Pengaya Adblock kamu untuk mencoba script di atas.

Untuk penjelasan lebih lanjut mengenai cara kerja script di atas, kamu bisa membacanya pada penjelasan berikut.

Cara Kerja Script Anti AdBlock

Mula mula, script di atas akan memanggil framework javascript yaitu JQUERY dan code script milik google adsen melalui code berikut :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" onerror="adBlockFunction();"></script>

Selanjutnya, code script akan memuat sebuah tag CSS element "style" melalui kode berikut :

$('<style>').text(`
.adBanner {
    background-color: transparent;
    height: 1px;
    width: 1px;}
`).appendTo(document.head);

Selain itu, code script akan membuat sebuah DOM HTML melalui code script berikut :

var nametagadblock =  document.createElement('div');
nametagadblock.innerHTML = `
<div id="wrapfabtest">
    <div class="adBanner">
    </div>
</div>
`;
document.body.appendChild(nametagadblock);

Penulisan kode CSS dan DOM HTML di tulis dalam bentuk code javascript, dimana penjelasan tata cara penulisanya sudah saya jelaskan di artikel sebelumnya. Silahkan Baca DISINI.

 Selanjutnya saya membuat sebuah fungsi javascript yang akan mendeteksi element tag id "wrapfabtest" dengan code script berikut :

//script deteksi adblock
$(document).ready(function(){
    if($("#wrapfabtest").height() > 0) {
//fungsi jika adblock tidak terdeteksi  
    } else {
adBlockFunction();  
    }});
function adBlockFunction() {
//fungsi jika adblock terdeteksi
        alert('AdBlock Detected ');    
}

Code yang saya bold adalah perintah untuk mendeteksi apakah element tag id "wrapfabtest" ada atau tidak. Jika element tag id "wrapfabtest" terdeteksi maka kode script tidak akan menjalankan perintah apapun karena kita tidak membuat perintah di dalam script tersebut. Hal ini menunjukkan bahwa pengunjung website tidak menggunakan Extension atau Pengaya Adblock pada browsernya.

Jika pengunjung ternyata menggunakan Extension atau Pengaya Adblock di browsernya, maka Extension atau Pengaya Adblock akan menon-aktifkan element tag id "wrapfabtest" sehingga element tag id "wrapfabtest" tidak akan ditulis di html atau di hapus oleh Extension atau Pengaya Adblock di browser pengunjung. Hal ini akan membuat code script di atas akan mengeksekusi code alert('AdBlock Detected '); yang akan menampilkan pesan bahwa AdBlock Terdeteksi.

Kita juga dapat menambahkan fungsi penulisan DOM HTML sebagai pengganti code alert('AdBlock Detected ');. Kamu bisa berkreasi sendiri menggunakan aturan penulisan DOM HTML menggunakan Javascript. Mungkin kedepannya akan saya buatkan kumpulan implementasi penggunaan code Script Anti AdBlock di atas yang bisa kamu gunakan di website atau blog kamu.

Untuk saat ini saya harap kamu mengerti konsep dasar atau cara keja Script Anti AdBlock di atas. Walaupun Script Anti AdBlock di atas sangat sederhana, Script ini sangat manjur untuk mendeteksi apakan pengunjung menggunakan Extension atau Pengaya Adblock atau tidak di browsernya.

Mungkin ini saja yang bisa saya share untuk kamu semua. Jika ada kendala dalam penggunaan code Script Anti AdBlock di atas atau ada yang ingin ditanyakan, kamu bisa berkomentar di bawah.

Terimakasih sudah berkunjung.