AdBlock Detectors dan Notifikasi

Salah satu musuh Publisher adalah aplikasi yang dapat menonaktifkan konten maupun pemblokiran Iklan, seperti misalnya Adblock. AdBlock maupun AdBlock Plus adalah salah satu Add-ons yang memungkinkan pengguna dapat mencegah munculnya elemen atau konten tertentu pada sebuah browser seperti Iklan. Dengan fungsionalnya, AdBlock ini akan sangat merugikan bagi mereka para Publisher yang mengandalkan dan menjadikan Iklan sebagai sesuatu yang dapat menjadi sebuah penghasilan dan tentu saja akan sangat berdampak negatif pada pendapatan yang akan mereka peroleh.



Untuk mengupayakan agar konten dapat ditampilkan utuh, termasuk penayangan Iklan, antisipasinya adalah dengan memasang AdBlock Detectors.

AdBlock Detectors atau AdBlock Cecker dapat berupa Script pendek yang dapat digunakan untuk memodifikasi tampilan halaman peramban pengguna, jika browser terdeteksi menggunakan Adblock, maka secara otomatis akan menampilkan Pesan atau Pemberitahuan yang tidak dapat dihilangkan dan akan hilang jika pengguna menonaktifkan Adblock.

Berikut ini Source Code lengkap yang di sadur dari halaman sumber: Adblock Checker and Notifier.

CSS

<style>

/* Style for sample Disable Adblock Notify Message. Remove if not using */

div#blockedmessage{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
  -webkit-transform: scale(0.9);  /* initially scale down nav size */
  transform: scale(0.9);
  background: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
 z-index: 100000;
  opacity: 0;
 overflow: auto;
  -moz-transition: visibility 0s 0.5s, opacity 0.5s, -moz-transform 0.5s; /* transition settings */
  -webkit-transition: visibility 0s 0.5s, opacity 0.5s, -webkit-transform 0.5s;
  transition: visibility 0s 0.5s, opacity 0.5s, transform 0.5s;
}

div#blockedmessage > div{
  width: 80%;
  line-height: 1.5;
  font-size: 1.2em;
}

div#blockedmessage > div h2{
  position: relative;
  margin-bottom: 10px;
}

div#blockedmessage > div h2:after{
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  width: 35%;
  height: 7px;
  background: red;
  
}

div#blockedmessage > div b#dismissmsg{
  margin: 20px auto;
 cursor: pointer;
 text-transform: uppercase;
 color: #E20000;
 background: #eee;
  display: block;
  margin: 20px auto;
  text-align: center;
 border-radius: 8px;
 padding: 3px 5px;
  font-size: 18px;
 box-shadow: 0 0 3px gray;
}

div#blockedmessage.showmsg{
 visibility: visible;
 -webkit-transform: scale(1);
 transform: scale(1);
 opacity: 1;
  -ms-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  -transition-delay: 0s;
}

/* style or show/hide arbitrary content on your page by doing something like the below: */

html.adblocked #targetelement{
 // style for #targetelement when ad blocker enabled
}

</style>

Javascript

<script>

;(function(){

 // Dynamic Drive Adblock Checker and Notifier Script v 1.0: http://www.dynamicdrive.com/

 var debug = true // set debug to true to always invoke adblockaction() and add class of adblocked to root element regardless of whether Adblock is enabled, for ease of styling and debugging. Set to false on production page

 // Main Adblock Detect function
 // When Ad Blocker detected
 // Adds "adblocked" CSS class to HTML root element 
 // Calls function adblockaction()

 var targetclass = 'adsbox' // CSS class that should trigger most ad blockers when found

 document.addEventListener('DOMContentLoaded', function(){
  var testunit = document.createElement('div');
  testunit.innerHTML = '&nbsp;';
  testunit.className = targetclass;
  document.body.appendChild(testunit);
  setTimeout(function() {
    if (testunit.offsetHeight === 0 || debug) {
    if (typeof adblockaction == 'function'){
     adblockaction()
    }
      document.documentElement.classList.add('adblocked');
    }
    testunit.remove();
  }, 400);
 })

 // adblockaction function that gets called when Adblock is enabled:

 function adblockaction(){
  var msg = document.getElementById('blockedmessage');
  var dismiss = document.getElementById('dismissmsg');
  msg.classList.add('showmsg');
  dismiss.addEventListener('click', function(){
   msg.classList.remove('showmsg');
   document.documentElement.classList.remove('adblocked');
  })
 }

})();

</script>

HTML

<!-- Add the below outside any tag other than the BODY -->


<div id="blockedmessage">

 <div>
  <h2>Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )</ h2>
  Mohon maaf untuk sementara anda tidak dapat melihat Halaman ini, silahkan kembali lagi setelah anda menonaktifkan filter yang anda gunakan. Terimakasih...


 <b id="dismissmsg">Dismiss</b>
 </div>

</div>

Source Code diatas dapat menampilkan seperti contoh berikut ini: Lihat Demo.

Saat pengguna membuka sebuah halaman, notifikasi akan ditampilkan jika peramban yang mereka gunakan mengaktifkan AdBlocker dan mereka masih bisa mengabaikan peringatan tersebut dengan menekan tombol Dismiss untuk membypass pemberitahuan.

Agar pengguna tidak dapat mengabaikan pemberitahuan, hapus syntax seperti berikut ini, tepatnya dalam tag HTML di atas.

<b id="dismissmsg">Dismiss</b>

Dengan AdBlock Detectors dan Notifikasi ini diharapkan Publisher akan lebih mengoptimalkan pendapatannya.