AdBlock adalah ekstensi browser yang berfungsi mencegah iklan untuk muncul. Tujuan pemasangan AdBlock biasanya agar pengunjung bisa membaca artikel dengan nyaman tanpa perlu melihat iklan yang berseliweran.
Bagi publisher AdSense dan pemilik blog, hal ini bisa menjadi masalah karena salah satu penghasilan utama sebagai bloger adalah dari iklan. Jika iklan tidak tampil, maka tidak ada penghasilan yang masuk. Karenanya perlu dilakukan satu cara untuk mencegar AdBlock menghalangi munculnya iklan.
Pada tutorial ini akan dijelaskan cara memasang script anti AdBlock di blog versi blog Igniel. Nantinya akan tampil notifikasi kepada pengunjung untuk mematikan ekstensi AdBlock atau memasukkan URL blog kamu ke dalam whitelist.
Cara Memasang Script Anti AdBlock di Blogger
Cari kode Javascript eksternal AdSense ini dan HAPUS. Biasanya posisinya ada SEBELUM </head>.
<script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxx" crossorigin="anonymous">xxxx adalah kode publisher AdSense yang angkanya berbeda-beda untuk setiap orang. Umumnya terdiri dari 16 angka.Jangan khawatir karena pemanggilan Javascript eksternal itu diganti dengan script berikut. Simpan SEBELUM </body> ya. Yang ditandai adalah nilai yang bisa diganti.
<script> //<![CDATA[
/* Anti AdBlock By igniel.com */
(function ignielAdBlock() {
let adPub = 'xxxx',
adTitle = 'Matikan AdBlock',
adText = 'Agar blog Igniel tetap berjalan, matikan AdBlock atau masukkan blog ini ke dalam whitelist. Terima kasih.',
ad = document.createElement('script');
ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-' + adPub;
ad.async = true;
ad.setAttribute('crossorigin', 'anonymous');
ad.onerror = function() {
let a = document.createElement('div');
a.className = 'ignielAdBlock';
a.innerHTML = '<div class=\"adblock-outer\"><div class=\"adblock-inner\"><div class=\"adblock-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M3 10.5V15.5C3 20.19 6.81 24 11.5 24S20 20.19 20 15.5V7C20 5.62 18.88 4.5 17.5 4.5C17.33 4.5 17.16 4.5 17 4.55V4C17 2.62 15.88 1.5 14.5 1.5C14.27 1.5 14.04 1.53 13.83 1.59C13.46 .66 12.56 0 11.5 0C10.27 0 9.25 .89 9.04 2.06C8.87 2 8.69 2 8.5 2C7.12 2 6 3.12 6 4.5V8.05C5.84 8 5.67 8 5.5 8C4.12 8 3 9.12 3 10.5M5 10.5C5 10.22 5.22 10 5.5 10S6 10.22 6 10.5V15C7.66 15 9 16.34 9 18H11C11 15.95 9.77 14.19 8 13.42V4.5C8 4.22 8.22 4 8.5 4S9 4.22 9 4.5V11H11V2.5C11 2.22 11.22 2 11.5 2S12 2.22 12 2.5V11H14V4C14 3.72 14.22 3.5 14.5 3.5S15 3.72 15 4V12H17V7C17 6.72 17.22 6.5 17.5 6.5S18 6.72 18 7V15.5C18 19.09 15.09 22 11.5 22S5 19.09 5 15.5V10.5Z\"></path></svg></div><div class=\"adblock-wrapper\"><div class=\"adblock-title\">' + adTitle + '</div><div class=\"adblock-text\">' + adText + '</div></div></div></div>';
document.body.append(a);
document.body.style.overflow = 'hidden';
};
document.head.appendChild(ad);
})();
//]]> </script>| Kode | Keterangan |
|---|---|
adPub |
Kode publisher AdSense. SANGAT WAJIB untuk diganti menjadi ID publisher kamu sendiri. |
adTitle |
Judul dari notifikasi anti AdBlock. |
adText |
Isi tulisan tambahan dari AdBlock. |
Selanjutnya percantik tampilan notifikasi anti AdBlocker ini dengan menambahkan CSS berikut. Simpan kodenya DI ATAS </style> atau atau ]]></b:skin>.
/* Anti AdBlock By igniel.com */
.ignielAdBlock {
background-color: rgba(0,0,0,.75);
position: fixed;
z-index: 999;
}
.ignielAdBlock svg {
height: 8rem;
width: 8rem;
}
.ignielAdBlock path {
fill: #b82929;
}
.adblock-outer {
margin: auto;
max-height: 90vh;
max-width: 640px;
padding: 2rem;
position: absolute;
}
.adblock-inner {
background-color: #f4f4f4;
border-radius: 15px;
overflow: auto;
padding: 2rem;
}
.ignielAdBlock, .adblock-outer {
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.adblock-outer, .adblock-inner {
align-items: center;
display: flex;
display: inline-flex;
}
.adblock-wrapper {
margin-left: 1rem;
}
.adblock-title {
font-size: 2rem;
font-weight: bolder;
line-height: 2.5rem;
}
.adblock-text {
margin-top: 1rem;
}
@media screen and (max-width: 640px) {
.adblock-outer {
max-width: 90vw;
}
.ignielAdBlock svg {
height: 5rem;
width: 5rem;
}
.adblock-title {
font-size: 1.75rem;
line-height: 2rem;
}
}
@media screen and (max-width: 480px) {
.adblock-inner {
flex-direction: column;
}
.adblock-wrapper {
margin-left: 0;
margin-top: 1rem;
text-align: center;
}
}Begini tampilan script notifikasi anti AdBlocker di blog jika sukses terpasang. Pesan ini hanya akan muncul jika pengunjung mengaktifkan AdBlock atau belum memasukkan blog kamu ke dalam whitelist.
Tampilannya sudah dinamis dan responsif untuk semua perangkat. Kamu bisa ubah sendiri kalau kurang suka.
Dan ada baiknya kamu cek dulu trik menulis script AdSense yang efisien agar struktur HTML tidak berantakan ketika memasang kode iklan. Pelajari juga kumpulan posisi iklan AdSense yang berpotensi untuk menaikkan jumlah CTR.
Script AdBlock Untuk Iklan Selain AdSense
Script anti AdBlock ini bisa bekerja untuk semua jenis iklan seperti Adsterra atau MGID alternatif AdSense. Hanya diperlukan sedikit perubahan kecil saja.
Perhatikan kode berikut:
ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-' + adPub;Ganti yang ditandai dengan lokasi script yang disediakan oleh penyedia iklan. Semua penyedia pasti memilikinya. Saya berikan contoh deh ya. Ini kode yang diberikan Adsterra:
<script type="text/javascript">
atOptions = {
'key' : '123456789',
'format' : 'iframe',
'height' : 60,
'width' : 468,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://petrolgraphcredibility.com/123456789/invoke.js"></scr' + 'ipt>');
</script>Nah, yang ditandai itu adalah lokasi script yang saya maksud. Di MGID dan penyedia lain pun sama. Pokoknya perhatikan saja akhiran URLnya, pasti berekstensi .js di ekornya. Namun untuk iklan selain AdSense, kedua script baik itu script yang saya tulis di atas dan script bawaannya tetap ditulis, bukan diganti. Jadi hasil akhirnya begini:
<script> //<![CDATA[
/* Anti AdBlock By igniel.com */
(function ignielAdBlock() {
....
....
....
ad.src = '//petrolgraphcredibility.com/123456789/invoke.js';
....
....
})();
//]]> </script>
<script type="text/javascript">
atOptions = {
'key' : '123456789',
'format' : 'iframe',
'height' : 60,
'width' : 468,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://petrolgraphcredibility.com/123456789/invoke.js"></scr' + 'ipt>');
</script>Sekian tutorial untuk memasang script anti AdBlock di Blogspot ala Igniel. Semoga bisa sedikit bermanfaat.
