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

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.

Detecting ADBlock Using JQuery in My Website/Blogger ?

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 :

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

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

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

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.

COMMENTS

Next Recomended


Feel free to code it up and send us a pull request.

Hi everyone, let's me know how much this lesson can help your work. Please Subscribe and Follow Our Social Media 'kodeajaib[dot]com' to get Latest tutorials and will be send to your email everyday for free!, Just hit a comment if you have confused. Nice to meet you and Happy coding :) all ^^



Follow by E-Mail


Name

ADO.NET,3,Ajax,6,Android,9,AngularJS,4,ASP.NET,4,Blogger Tutorials,7,Bootstrap,7,C++,1,Codeigniter,2,Cplusplus,6,Crystal Report,6,CSharp,25,Ebook Java,2,FlyExam,1,FSharp,3,Game Development,2,Java,35,JDBC,2,Laravel,84,Lumen,2,MariaDB,2,Ms Access,3,MySQL,31,ODBC,6,OleDB,1,PHP,14,PHP Framework,5,PHP MYSQLI,9,PHP OOP,5,Python,8,Python 3,4,SQL Server,4,SQLite,4,Uncategorized,5,Vb 6,2,Vb.Net,89,Video,48,Vue Js,4,WPF,2,Yii,3,
ltr
item
KODE AJAIB: How to Detecting ADBlock Using JQuery in My Website/Blogger ?
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
https://1.bp.blogspot.com/-jtF19IM_9PM/V5jgJJuKclI/AAAAAAAACKE/ZN3b4TqEXBgnsBTEIgs2finLy2dEW-B1QCLcB/s320/detecting-ad-block-on-my-website.jpg
https://1.bp.blogspot.com/-jtF19IM_9PM/V5jgJJuKclI/AAAAAAAACKE/ZN3b4TqEXBgnsBTEIgs2finLy2dEW-B1QCLcB/s72-c/detecting-ad-block-on-my-website.jpg
KODE AJAIB
https://www.kodeajaib.com/2016/07/how-to-detecting-adblock-using-jquery.html
https://www.kodeajaib.com/
https://www.kodeajaib.com/
https://www.kodeajaib.com/2016/07/how-to-detecting-adblock-using-jquery.html
true
3214704946184383982
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy