WordPress AMP Yazı İçine Reklam Ekleme (ADSENSE)

Google mobil sayfaların daha hızlı sonuç vermesi adına AMP destekli sayfalara öncelik tanımaya başladı. Sistemi detaylı bir şekilde anlatmak isterdim fakat o derece bilgiye sahip değilim. Aslında mobil sayfaların daha hızlı sonuç vermesi ve Google’nin bunu desteklediğini bilmemiz yeterli.

Güncelleme: (31.07.2018) Artık bunca zahmete girmeye gerek yok. Google Adsense Otomatik Reklamlar seçeneği ile basitçe konu içi reklam gösterimi yapabilirsiniz. Üstelik yazınızın uzunluğuna göre gerekli miktarda en uygun yerlere en uygun boyutlarda reklam gösterimi yapıyor.

Ftp bağlantısı yaparak wp-content/plugins/amp/templates/html-start.php dosyanızı açın ve </head> etiketinin tam üstüne aşağıdaki köprüyü ekleyin.

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

Son olarak wp-content/plugins/amp/templates/single.php dosyanızı açın ve </header> etiketinin hemen altına aşağıdaki komutu kırmızı alana kendi adsense ID’nizi girerek kaydedin.

<amp-auto-ads type="adsense"
data-ad-client="ca-pub-123456">
</amp-auto-ads>

Artık amp sayfalarınızda konu içi Adsense reklamları görüntülenmeye başlayacaktır.

Yazının bundan sonraki kısmı eski bilgilerden oluşmaktadır fakat yinede tercih ederseniz uygulayabilirsiniz.

Uyarı: (04.05.2018) Arkadaşlar, WordPress AMP eklentisine son gelen güncelleme nedeniyle işlem biraz değişti. head etiketini bulup üstüne ekle dediğim bütün kodları single.php dosyasına değil, html-start dosyasına eklemeniz gerekiyor.

AMP sayfalarına ilişkin Google Arama yönergeleri sayfasını ziyaret etmenizde fayda var.

Kısaca “WordPress AMP Nedir” öğrenmiş olduk.

Bilmeyenler için kısaca kurulumu hakkında bilgi verelim. Gerçi istesekte bu konuyu uzatamayız. WordPress kullanıcıları için AMP kurulumu oldukça basittir. Bu kurulumu ücretli yapanlar olduğu için başlıkla alakası olmasada kuruluma yer vermek istedim. AMP kullanımı için birilerine ücret ödemek zorunda değilsiniz. Aynı şekilde yazı içerisine reklam eklemek içinde ücret karşılığı hizmet verenler var. Bu işlem için sitenize ayrı bir eklenti kurarak gereksiz yere kod kirliliği yaratıyorlar.

WordPress AMP Kurulumu

WordPress’in orijinal uygulaması olan WordPress AMP uygulamasını sitemize yüklüyoruz. Yükledikten sonra yapmamız gereken tek şey etkinleştirmektir. Bu kadar basit! Artık sitenizde AMP destekli mobil sayfalar bulunuyor. Ayrıca bilmenizi isterimki Google WordPress için bağlantıda verdiğim eklentiyi önermektedir.

Test etmek için sitenizde bulunan bir konu linkinin sonuna /amp eklemeniz yeterlidir.

keremsari.com/wordpress-amp-yazi-icine-reklam-ekleme-adsense/amp

Kurulum bitmiştir. Ek olarak hiç birşey yapmanıza gerek yok. Çoğu ücretli AMP kurulumu hizmeti veren kişiler ikinci bir eklenti kullanmadan çalışmayacağını ifade etmektedir. Aynı şekilde çoğu AMP kurulumu konusunda ikinci eklentinin kurulumuda yer alıyor. Hiç gerek yok.

WordPress AMP yazıya Adsense reklam ekleme

Asıl konumuz olan yazı içerisine yani ortasına Adsense veya farklı bir reklam eklemeye geçmeden önce yazının başına ve sonuna reklam ekleyeceğiz.

Bu işlemi tamamen Google yönergelerine uygun bir şekilde gerçekleştireceğiz. AMP reklam birimi oluşturma sayfasındaki yönergelereki kaynak olarak kullandım.

WordPress AMP eklentisini kurduktan sonra eklentiler sayfasından düzenle sayfasına giriyoruz.

Sağ tarafta bulunan amp/templates/single.php sayfasını açın.

Bul:

</head>

Hemen üstüne ekle:

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

Sayfanın en üstüne reklam eklemek

Aşağıdaki kodu bulun:

<div class="amp-wp-article-content">

Hemen altına ekleyin:

<amp-ad 
height=100
type="adsense"
data-ad-client="ca-pub-1234567890"
data-ad-slot="1234567890">
</amp-ad>

Sayfanın en altına reklam eklemek için

Aşağıdaki kodu bulun:

<?php echo $this->get( 'post_amp_content' ); // amphtml content; no kses ?>

Hemen altına ekleyin:

<amp-ad 
height=250
width=300
type="adsense"
data-ad-client="ca-pub-1234567890"
data-ad-slot="1234567890">
</amp-ad>

Şimdi Adsense Esnek (duyarlı) reklam kodunuzudaki kırmızı alanları güncelleyin. Bu işlemi yapmadan sonuç alamazsınız.

Sayfanın altına ve üstüne reklam eklemiş olduk. Reklamların AMP sayfalara yansıması zaman alabilir. Olmadığını düşünmeyin, biraz bekleyin ve sayfayı yenileyin.

İki reklam koduda farklı özellikler taşımaktadır. Google yönergelerine uygun olması için aynı şekilde uygulayın lütfen. Ayrıca özelleştirme yapmak isterseniz AMP Reklam Kodları sayfasından yararlanabilirsiniz.

WordPress AMP Yazı İçine Ortasına Reklam Ekleme

Asıl konumuza geldik. Bildiğiniz gibi bir sayfada üç Adsense reklam yayını yapabiliyoruz. Sayfanın başına ve sonuna ekledik. Şimdi en çok verim alınan yazı içerisine Adsense reklamımızı yerleştireceğiz. Bu işlem için İsabel teşekkür ediyorum. Bağlantıdan detaylara ulaşabilirsiniz.

Temanızın function.php sayfasını açın. Uygun yere İsabel’in yazdığı aşağıdaki kodu ekleyin.

add_action( 'pre_amp_render_post', 'isa_amp_add_content_filter_within' );

function isa_amp_add_content_filter_within() {
add_filter( 'the_content', 'isa_amp_adsense_within_content' );}

function isa_amp_adsense_within_content( $content ) {
$publisher_id = 'ca-pub-1234567890';
$ad_slot = '1234567890';

// Below the fold ad code. This is responsive as per Google guidelines for Adsense for AMP.
$btf_ad_code = '<amp-ad layout="fixed-height" height="250" type="adsense" data-ad-client="' . $publisher_id . '" data-ad-slot="' . $ad_slot . '"></amp-ad>';

// Insert Adsense ad between the content, after paragraph 2
$new_content = isa_insert_after_paragraph( $btf_ad_code, 6, $content );
return $new_content;}

function isa_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
$closing_p = '</p>';
$paragraphs = explode( $closing_p, $content );

foreach ($paragraphs as $index => $paragraph) {
if ( trim( $paragraph ) ) {
$paragraphs[$index] .= $closing_p;}

if ( $paragraph_id == $index + 1 ) {
$paragraphs[$index] .= $insertion;}}
return implode( '', $paragraphs );}

Yine aynı şekilde kırmızı alanları Adsense Esnek reklam kodunuzdaki verilerle güncelleyin. Yine kırmızı olan altı rakamıyla reklamın kaçıncı paragrafta olacağını belirleyebilirsiniz. Ben bu kodda reklam yüksekliğini sabit 250 yaptım. Yazı ortasındaki reklam biraz daha büyük olsun istedim. Siz istediğiniz gibi düzenleyebilirsiniz.

AMP sayfalarınızın sağlıklı olup olmadığını sorgulayın: AMP sayfalarınızı test edin 

Benim AMP kullanımım bu şekilde. Logo, menü, ana sayfada AMP kullanımı gibi konulara hiç takılmadım.

Google Webmasters Tools panelinde Arama Görünümü > Hızlandırılmış Mobil Sayfalar ekranında AMP sayfalarımız için uyarıları veya yönlendirmelerini takip edebiliriz.

Son olarak AMP sayfaları Google’a bildiren bir komut ekleyeceğiz. AMP olmayan sayfalarınızın head tagları içerisine aşağıdaki kodu ekleyin.

<link rel="amphtml" href="<?php the_permalink(); ?>/amp" />

Aynı şekilde AMP olan sayfanıza (eklentiler, AMP eklentiyi düzenle, Single.php) aşağıdaki kodu ekleyin.

<link rel="canonical" href="<?php the_permalink(); ?>" />

Bu şekilde AMP olmayan standart sayfanızda Google’a bu sayfanın AMP sürümü var, git bak demiş oluyorsunuz. Aynısı AMP sayfaları için de geçerli.

Sabit AMP Reklamları

Reklamları sayfa altına sabitlemek için amp-sticky-ad özelliğini kullanabiliriz. Mobil gösterimlerde oldukça etkili bir tercihtir. Sabitleme işlemi oldukça basit bir işlem. Daha önce AMP sayfamıza eklediğimiz reklamlardan birini sayfaya sabitlemek için aşağıdaki adımları uygulayınız.

Bu:

</head>

Üstüne ekle:

<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>

Bul: (alt reklam eklediğimiz için, istediğiniz yere ekleyebilirsiniz.)

<amp-ad height=100
type="adsense"
data-ad-client="ca-pub-123456789"
data-ad-slot="123456789">
</amp-ad>

Değiştir:

<amp-sticky-ad layout="nodisplay">
<amp-ad width="320"
height="100"
type="adsense"
data-ad-client="ca-pub-0540780362853405"
data-ad-slot="4500779460">
</amp-ad>
</amp-sticky-ad>

Bu şekilde mobil sayfalarımızda AMP sabit reklam yayını yapmış olduk. İşlemi uyguladıktan sonra hemen test edemeyebilirsiniz. Değişikliğin yansımazı biraz zaman alabilir.

WordPress AMP Google Analytics Ekleme

html-start dosyasına aşağıdaki kodu ekleyin.

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

Son olarak aşağıdaki kodu temanızın fonction sayfasının uygun bir yerine yapıştırıp UA-xxxx alanını revize etmeniz yeterlidir.

/*Add amp-analytics to the amp post template footer*/
function isa_amp_analytics( $amp_template ) {
    ?><amp-analytics type="googleanalytics">
    <script type="application/json">
    {
      "vars": {
        "account": "UA-xxxxx-x"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
    </script>
    </amp-analytics><?php
}
add_action( 'amp_post_template_footer', 'isa_amp_analytics' );

Bol kazançlar.

“WordPress AMP Yazı İçine Reklam Ekleme (ADSENSE)” üzerine 147 yorum

  1. Merhaba
    amp sayfalarına adsense dışında sabit reklam nasıl koyabiliriz.Biz adsense kullanmıyoruz.Sabit reklam alıyoruz sadece ama bu reklamlar amp sayfasında çıkmıyor.

    Cevapla
    • Kerem Bey, …/wp-content/plugins/amp/templates/ içerisinde. Bazen ana dizinde olan dosyaları saatlerce aradığım oluyor. Bunlar normal şeyler.

      Cevapla
    • Selam, Sayfa düzeyi reklamlardan QuickStart reklamlarını aktif edip kodu yerleştirmeniz yeterli. Hemen devreye girmeyebilir, 15-20 dk beklemeniz gerekiyor.

      Cevapla
  2. merhaba yardımcı olabilir misiniz? ben yapmaya çalıştım fakat bir türlü olmuyor. ben nerede hata yaptığımı da anlamadım. dediğiniz herşeyi yaptım kodları değiştim falan fakat olmadı? bana ulaşabilir misiniz.

    Cevapla
  3. Kerem bey ampdeki sabit reklamı kullanmak istiyorum herşeyi hâl ettim ama siz amdeki sabit reklamda ne kadar kazaniyorsunuz kaç kişi tıklıyor tıklanma olasılıklarını benimle paylaşırmısınız çok rica ediyorum. Lütfen

    Cevapla
    • Hakan Bey, araştırmam lazım fakat bu sıralar biraz yoğunum. İlk fırsatta bir şekilde çözüp bilgi vereceğim.

      Cevapla
    • Ahmet Bey, Google’ın desteklediği AMP uygulamasının sunduğu bir özellik. Ayrıca Adsense panelinden mobil için AMP olmayan sayfalara sabit reklam ekleme özelliği de bulunuyor. Yani eğer yasak diyorsa neden böyle bir uygulamaya izin veriyor sorusunu sormak gerek. Adsense politikalarında yasak olduğuna dair bir yazı varsa paylaşmanızı rica ediyorum.

      Cevapla
      • Kerem bey geri dönüşünüz için çok teşekkür ediyorum. Amacım benim sitemde var bende ampnin ucretlisini aldim ama sabit kullanacam banlanirim diye korkuyorum adsense forumundan sordugumda bana geken cevap böyle.

        Merhaba Ahmet,

        AdSense program politikaları, AMP reklam birimleri içeren sayfalar için geçerli olmaya devam eder.

        Adsense program politikalarında işaret edildiği üzere sticky yani yapışkan reklam birimleri kullanmak ihlale girmektedir. Bu yapışkan reklam birimleri yalnızca izinli olarak kullanılabiliyor. Yine de AMP sayfalarda ki bu sticky reklamlar için harici bir durum var mı, bunu doğrulatıp sizi bilgilendirmeye çalışacağım.

        Gibi yazi yazildi bana

        Cevapla
        • Harici bir durum olup olmadığı hakkında cevap geldiğinde bizi de bilgilendirmenizi rica ediyorum. Çok teşekkür ederim.

          Cevapla
          • Kerem hocam sabit reklam ampde yasak değilmiş. Birde ben ekledim kimse tıklamıyor sizde tıklıyorlar mı

          • Bilgi için teşekkürler Hocam. Tabii ki, AMP sayfalardan gelen tıklama oranının ortalama %40’ını kapsıyor.

          • Ampdeki sabit reklam mı? Tıklamanın %40 kapsıyor yani siz verim aldınız mı o sabit reklamdan benimki 320 x 50 küçük ondan mı tıklanmıyor acaba hocam. Teşekkürler

          • Hiç tıklanmıyor küçük olduğundan sanırım 5 gün oldu ekliyeli günlük organik hitim 50 birde böyle bir sorum var diyelim tıklamalar başladı her giren tıklamadan çıkmıyor google banlar mı çok tıklanıyor diye

          • Analiz yapabileceğin bir ziyaretçi trafiğin yok şuan. Sabit reklamın kalsın bence. Her giren tıklarsa tabii ki anormal bir durum olur ve incelemeye alınırsın.

          • Çok sağolun cevaplarınızdan dolayı hocam bu son sorum her giren tıklarsa dediğimden yani oraya bugün bağlantı reklamı ekliyecem küçük sabit onlar çok tıklanıyor eğer incelemeye aldıklarında gerćektende ziyaretci tikloyrsa banlamazlar değil mi hocam birde sabit reklama baģlanti eklersem yeri midir? Sizede yoruyorum ama teşekkür ediyorum

          • Hocam, eğer Adsense reklam politikalarına uygunsa ve organik tıklamalar oluyorsa hiçbir sorun yaşamazsın. Yormuyorsunuz, yoruma açık bir konu, her zaman elimden geldiği kadar yardımcı olmak isterim. Bol kazançlar.

  4. Hocam ben bu yazı içine reklamda hata alıyorum.Header vee footer gayet güzel bir şekilde koydum ama yazı içine reklamda Amp sayfası kapanıyor.Ve şunu merak ediyorum paragraf veya içeriğe göre yerleşen reklam kodları yapamaz mısınız? Örneğin 8 adet içerik var (Resim + Paragraf) toplamı.4. içerikten sonra reklam koydun diğerinde kendi ayarladığı yere.Çünkü bazı makalelerimiz uzun bazıları da çok kısa buna bir çözüm yolu var mıdır?

    Cevapla
    • Mesut Bey bu mümkün. AMP olmayan sayfalarımda benzer bir kodlama kullanıyorum. Mesela yazı 500 kelimeyse 250. kelimeden sonraki ilk paragrafta reklam görüntüle, eğer 1000 kelime ise 500. kelimeden sonraki ilk makalede reklam görüntüle gibi. Bunu 5000 kelimelik konulara kadar yaydım. Aynı şekilde AMP sayfalarda da bu yapılabilir. Bu sıralar pek müsait olamıyorum, ilk fırsatta uygulayıp paylaşacağım.

      Cevapla
  5. Yapısal veri test aracında image hatası alıyorum Kerem. Senin siteni kontrol ettim hata yok. Yardımcı olur musun?

    Cevapla
    • Aşağıdaki kodu temanın function.php sayfasına eklersen düzelecektir. Resim yolunu değiştirmeyi unutma.

      Kod:

      add_action( 'amp_post_template_css', 'xyz_amp_additional_css_styles' );
      function xyz_amp_additional_css_styles( $amp_template )
      { ?>
      nav.amp-wp-title-bar { padding: 12px 0; background: #000; }
      nav.amp-wp-title-bar a {
      background-image: url( 'Resim Yolu' );
      background-repeat: no-repeat;
      background-size: contain;
      display: block;
      height: 28px;
      width: 94px;
      margin: 0 auto;
      text-indent: -9999px; }

      Cevapla
  6. Merhaba

    Haber içeriğine reklam ekleme kodu hakkında bir sorum olacaktı. Bu kodu, amp ve normal site şeklinde seçenekli halde kullanma şansımız var mı?

    AMP de istediğimiz reklamı, diğer sürümde istediğimiz reklam kodunu gösterecek bir araç..

    Cevapla
    • AMP sayfalar için sadece duyarlı reklam kullanabilirsiniz. AMP ve normal sayfalar için zaten farklı reklam kodları eklemeniz gerekiyor. Sanırım soruyu anlamadım.

      Cevapla

Yorum yapın