How to Detecting ADBlock Using JQuery in My Website/Blogger ?

Blogger tutorials : How to Detecting ADBlock Using JQuery / JavaScript in a website/blogger? you can Detecting Ads Blocker with jQuery to safe your google adsense from ADBLOCK

Part 5 How to Create Your Own Blogger Template - Sidebar Block

Part 4 How to Create Your Own Blogger Template - Header Block

Part 3 How to Create Your Own Blogger Template - Body and Outer Wrapper Block

Blogger Tutorial - Bagaimana cara mengatasi AD BLOCK agar iklan tetap muncul saat pengunjung browsing dengan mengaktifkan AD BLOCK? tentu saja sebagian publisher baik publisher adsense maupun publisher Ads lainnya merasa geram dengan adanya AD BLOCK. Adblock merupakan salah satu Ekstensi peramban yang bisa memblokir JavaScript dari sebuah website, termasuk Ads.

Jika seluruh pengunjung situs anda menggunakan Adblock ini, bisa dibayangkan bagaimana susahnya untuk seorang publisher yang hanya mengandalkan pemasukan dari Ads Adsense atau semacamnya. ada banyak cara untuk mengantisipasi masalah user yang mengaktifkan Ad block di browsernya ketika mengunjungi situs anda, salah sataunya dengan menampilkan pesan kepada pengunjung untuk mendisable dan menonaktifkan Adblock menggunakan JQuery.

Cara ini memang tidak 100% ampuh, namun apa salahnya jika kita memberi semacam peringatan dan memberikan pemberitahuan kepada pengunjung supaya mendisable adblock yang ia gunakan.

Cara Mendeteksi Pengunjung yang menggunakan AdBlock 

Bagaimana cara Detecting ADBlock dengan JQuery?

1. Kita akan menentukan sebuah tag HTML (yang digunakan untuk tag code ads) yang dijadikan acuan apakah source Ads kita di block atau tidak
2. Jika Tag yang dijadikan sebuah acuan tersebut diblock/dihidden oleh Ad block, maka munculkan pesan
3. Seluruh pengunjung/user yang menggunakan AD block ketika browsing di situs/blog anda akan melihat pesan tersebut

Source code Detecting ADBlock

Pertama, mari kita buat CSS untuk menyesuaikan kotak pesan yang akan ditampilkan ketika user menggunakan AdBlock

CSS File

#message {
width: 100%;
padding: 10px 20px;
background-color: #FFBABA;
color: #D8000C;
border-radius: 3px;
margin:auto;
text-align:center;
float:center;
overflow:hidden;
display:scroll;
position:fixed;
top:0;z-index:999;
-webkit-transform:translateZ(0);
}

Tambahkan CSS file di website anda, khusus pengguna Blogger, tambahkan CSS tersebut di atas ]]></b:skin>

Selanjutnya, Karena kita menggunakan JQuery, tambahkan resource JQuery ke situs/blog anda. Perlu diperhatikan, jika JQuery sudah ada pada template default anda, tahap ini boleh dilewatkan.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>

Tambahkan JQuery tersebut diatas </head>

Selanjutnya kita akan mencoba mendeteksi salah satu code iklan (Adsense) apakah di blokir/hidden oleh Ad Block, Sebagai contoh, saya mengaktifkan Ad Block saat mengunjungi situs ini, dan alhasil seluruh Ads di hidden, dan bisa dilihat Tag - Tag HTML yang mana yang telah diblock oleh AD Block, perhatikan gambar berikut :

Code Ads pada Class 'widget-content' dihidden oleh Adblock, sehingga Ads kebetulan yang ada di widget Header blog ini tidak tampil, kita bisa menggunakan Class tersebut sebagai acuan Script JQuery yang akan kita buat.

Bagaimana Bisa?

ya bisa, Logikanya adalah ketikan 'Class widget-content' dihidden oleh Adblock, saat itu kita akan memberitahu kepada JQuery bahwa Ads tersebut telah di block, dan saat itu si JQuery akan memunculkan sebuah pesan. Mari kita lakukan.

Source Code Detecting ADBlock Using JQuery

$(document).ready(function() {
  function appendMessage(argument) {
    var div = $('<div/>').attr('id', 'message').text('Ad block is installed and active, Some Scripts will not working. Please support us by disabling it!');
    var add = $('body').append(div);
  }
  setTimeout(function(){
    if($(".widget-content").css('display') == "none") {
      appendMessage();
    }
  }, 500);
});

Yang saya jadikan sebagai acuan diblockirnya sebuah ads adalah class 'widget-content', kamu bisa menyesuaikan class atau id yang ingin kamu jadikan sebagai acuan di JQuery.

Berikut tampilan pesan yang ditampilkan saat user mengakses situs/blog dengan menggunakan AdBlock

Penting :

Jika kamu menggunakan tag <div id="widget-content"/> maka untuk function JQuerynya ganti menjadi ("#widget-content"), sendangkan untuk yang menggunakan <div class="widget-content"> function JQuerynya menjadi (".widget-content").

Sampai jumpa di tutorial blogger selanjutnya.