Salah satu musuh Publisher yaitu aplikasi yang sanggup menonaktifkan konten maupun pemblokiran Iklan, menyerupai contohnya Adblock. AdBlock maupun AdBlock Plus yaitu salah satu Add-ons yang memungkinkan pengguna sanggup 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 menyebabkan Iklan sebagai sesuatu yang sanggup menjadi sebuah penghasilan dan tentu saja akan sangat berdampak negatif pada pendapatan yang akan mereka peroleh.
Untuk mengupayakan semoga konten sanggup ditampilkan utuh, termasuk penayangan Iklan, antisipasinya yaitu dengan memasang AdBlock Detectors.
AdBlock Detectors atau AdBlock Cecker sanggup berupa Script pendek yang sanggup dipakai untuk memodifikasi tampilan halaman peramban pengguna, bila browser terdeteksi memakai Adblock, maka secara otomatis akan menampilkan Pesan atau Pemberitahuan yang tidak sanggup dihilangkan dan akan hilang bila 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 = ' '; 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 sanggup melihat Halaman ini, silahkan kembali lagi sehabis anda menonaktifkan filter yang anda gunakan. Terimakasih... <b id="dismissmsg">Dismiss</b> </div> </div> Source Code diatas sanggup menampilkan menyerupai referensi berikut ini: Lihat Demo.
Saat pengguna membuka sebuah halaman, notifikasi akan ditampilkan bila peramban yang mereka gunakan mengaktifkan AdBlocker dan mereka masih sanggup mengabaikan peringatan tersebut dengan menekan tombol Dismiss untuk membypass pemberitahuan.
Agar pengguna tidak sanggup mengabaikan pemberitahuan, hapus syntax menyerupai berikut ini, tepatnya dalam tag HTML di atas.
<b id="dismissmsg">Dismiss</b> Dengan AdBlock Detectors dan Notifikasi ini diperlukan Publisher akan lebih mengoptimalkan pendapatannya.
Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )
Mohon maaf untuk sementara anda tidak sanggup melihat Halaman ini, silahkan kembali lagi sehabis anda menonaktifkan filter yang anda gunakan. Terimakasih...Dismiss