AMP HTML Blog Kullancıları İçin AdBlock Eklentisi

Bu yazımızda AMP AdBlock uygulaması kapatma bildirimi eklentisini paylaşağım. AMP HTML kullanıcıları için daha önce birkaç AMP blog teması ve eklentisi paylaşmıştık. AMP AdBlock eklentisini paylaşmadan önce AdBlock uygulaması ile ilgili biraz bilgi ve görüş paylaşmak istiyorum.

AdBlock Plus uygulaması blog ve web sitesi yöneticilerinin başına bela, ziyaretçiler için web seyahatinde yoldaş oldu. Masaüstü uyulamasından sonra Android ve Apple gibi akıllı telefon uygulamalarında da yer alıyor. Yani, blogculara bir darbe de akıllı telefon uygulamalarından geldi.

Blog ziyaretçilerinin de AdBlock uygulaması kullanmasının bir nedeni mutlaka var. Bazı blog ve web sitelerine giriş yaptığınızda ana sayfayı daha görmeden birçok reklam engelini reklam kapatma savaşı yaparak geçmek zorunda kalabiliyorsunuz.

AdBlock uygulamasına karşı blog ve web yöneticileri de AdBlock kapatma bildirimi eklentisini kullanmaya başladı. Ne kadar başarılı olur bilmiyorum ama bazı kuralların dışına çıkmamak için fazla abartıya girmeye gerek yok.

Özellikle Adsense kullanıcıları için biraz faydalı olduğu düşünülen AdBlock kapatma bildirimi eklentisini dikkatli kullanmakta fayda var. Nedeni ise her an Google tarafından cezalandırılabilirsiniz. Aslında Google'ın Adsense reklamları için AdBlock uygulamasını devre dışı bırakmasını her zaman düşündüm. Milyon dolarlar kazanan Google Adsense'nin bu sorunu çözüme kavuşturmaması da düşündürücü. Güvenilir ve HTTPS uyumlu blog ve web siteleri için AdBlock uygulamasının Adsense reklamları engelleyici özelliğini devre dışı bırakabilir.

AMP HTML kullanıcıları için bu ve buna benzer konularda fazla seçenek bulunmuyor. Şimdi, AdBlock uygulaması kapatma bildirimi eklentisini AMP HTML blog ve web sitelerinde kullanabilmek için aşağıdaki adımları takip edin.

AMP AdBlock Uygumalası Kapatma Bildirimi Eklentisi Nasıl Kurulur?

Aşağıdaki AMP javaScript kodlarını blogunuzun kodunun bir satır üzerine ekleyin. Eğer, blogunuzun AMP javaScript kütüphanesinde aşağıdaki kodlar yer alıyorsa tekrar eklemeye gerek yok.

<script async="" custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async="" custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>

Aşağıdaki CSS kodlarını blogunuzun stil dosyasını oluşturan amp-custom='amp-custom' dosyasının içerisine ekleyin.

*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.notifbox{display:block}
.notif_box{position:relative;background:rgba(213, 0, 0, 0.75);color:#fff;font-family:Roboto,sans-serif;padding:0;transition:all .3s ease-in-out;width:100%;margin:0 auto;border-radius:0;overflow:hidden}
.notif_box p.note{text-align:center;margin:0;padding:15px 40px;font-size:12px;font-weight:400;line-height:1.5}
.notif_box p a {color:#f0c36d;text-decoration:underline}
.notif_box p a:hover{color:#f9edbe}
.notifbox .close_notifbox{background:0 0;border-radius:0.3rem;border:1px solid;padding:0.3em 0.6em 0.2em 0.6em;color:#fff;font-size:1em;position:absolute;top:10px;right:10px;cursor:pointer;line-height:15px;text-align:center;z-index:2}
.notifbox .close_notifbox:focus,.notifbox .done_notifbox:focus{outline:0}
.notifbox .close_notifbox:hover{color:#f9edbe}

Aşağıdaki HTML kodu </body> kodunun bir satır üzerine ekleyin.

<amp-user-notification id="block-notification" layout="nodisplay">
<div class="notifbox" id="notifbox">
<div class="notif_box">
<button class='close_notifbox' on='tap:notifbox.hide' role='button' tabindex='0' title='Kapat'>&amp;times;</button>
<p class="note">Lütfen, daha iyi hizmet verebilmemiz ve sitemize destek olmanız için, AdBlock veya reklamları engelleyebilecek benzer uygulamaları devre dışı bırakın. Reklamları engelleyen uygulamaları devre dışı bırakmadığınız sürece sürekli bu uyarı ile karşılaşabilirsiniz.<br/>Daha fazla bilgi için <a href="https://bloggereklentileri.blogspot.com/p/blogger-eklentileri-gizlilik-politikas.html" target="_blank">buraya</a> tıklayın. Uyarıyı tekrar görmemek için <a href="#" on='tap:block-notification.dismiss' role='button' tabindex='0' title='Kapat'>buraya</a> tıklayın.</p>
</div>
</div>
</amp-user-notification>

Yukarıdaki HTML kod içerisinde bulunan bağlantı yerine kendi blogunuzun bağlantısını ekleyin.

Eğer bloğunuzda amp-analytics (Google Analytics) kodu bulunmuyorsa, aşağıdaki AMP HTML amp-analytics kodunu </body> kodunun bir satır üzerine ekleyin.

<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
"vars": {
"account": "UA-xxxxxxxxxx"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}}}
</script>
</amp-analytics>

Kod içerisinde belirtilen UA-xxxxxxxxxx yerine Google Analytics hesap kodunuzu ekleyin. Yukarıdaki adımları blogunuzda doğru bir şekilde uyguladıysanız şablonu kaydedin.

Ön İzleme

NOT: AMP AdBlock eklentisi kapatılması durumunda tekrar görüntülenmemesi için tarayıcı çerezleri kullanır. Blog ziyaretçileriniz tarayıcılarını temaizlemesi/silmesi durumunda AMP AdBlock eklentisi tekrar görüntülenecektir.

Bknz: AMP HTML Pop-up Bildirim Kutusu

AMP AdBlock eklentisi ile ilgili görüş, öneri ve sorularınız için yorum formunu kullanabilirsiniz.