İçindekiler

Genişletilmiş AMP bileşenleri ekleme

AMP bileşen sistemi, makalelerinize en az çaba ile hızlı bir şekilde verimli ve duyarlı özellikler oluşturmanıza olanak tanır. AMP HTML kütüphanesi, AMP bileşenleri için üç sınıflandırmaya sahiptir:

kurulu: Bunlar, amp-img ve amp-pixel gibi temel AMP JavaScript kitaplığında (<head> etiketinde belirtilen) bulunan bileşenlerdir. Bu bileşenler bir AMP belgesinde hemen kullanılabilir.
genişletilmiş: Bunlar, belgeye özel öğeler olarak açıkça dahil edilmesi gereken temel kitaplığın eklentileridir. Özel öğeler, <head> bölümüne eklenen özel komut dosyaları gerektirir (örneğin, <script async custom-element="amp-video ...).
deneysel: Bunlar, serbest bırakılan ancak henüz geniş kullanıma hazır olmayan bileşenlerdir. Geliştiriciler, tamamen piyasaya sürülmeden önce bu özellikleri kullanmayı seçebilirler. Deneysel özellikler hakkında daha fazla bilgi edinin.

Örneğimiz zaten yerleşik bir bileşen olan amp-img'yi kullanıyor ve bu bileşenin "HTML'nizi AMP'ye dönüştürün" öğreticisinde AMP yerleşim sistemi ile nasıl ilişkili olduğunu keşfettik. Şimdi, haber makalemize yaygın olarak kullanılan bazı genişletilmiş AMP bileşenlerini ekleyelim.

Reklamlarla para kazanma

AMP'deki reklamlar amp-ad bileşeni kullanılarak oluşturulur. amp-ad bileşeni, reklamları genişlik, yükseklik ve yerleşim modu gibi çeşitli şekillerde yapılandırmanıza olanak tanır. Bununla birlikte, birçok reklam platformu, reklam ağının hesap kimliği, hangi reklamın sunulması gerektiği veya reklamı hedefleme seçenekleri gibi ek yapılandırma gerektirir. Bu seçenekler, amp-ad bileşeninde HTML öznitelikleri kullanılarak kolayca belirtilir.

DoubleClick reklamının bu örneğine bir göz atın:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/image/static"
>
</amp-ad>

Gördüğünüz gibi, bu çok basit bir yapılandırma. Kullanmak istediğimiz reklam platformunun amp-ad bileşenini bilgilendiren type özniteliğine dikkat edin. Bu durumda, DoubleClick platformunu kullanmak istiyoruz, bu yüzden doubleclick'i değer olarak belirttik.

data-slot özniteliği daha benzersizdir. amp-ad'de, data- ile başlayan tüm öznitelikler sağlayıcıya özgü özniteliklerdir. Bu, tüm sağlayıcıların mutlaka bu özel özniteliğe ihtiyaç duymayacağı ve sağlanırsa mutlaka tepki vermeyeceği anlamına gelir. Örneğin, yukarıdaki DoubleClick örneğini A9 platformundaki aşağıdaki test reklamıyla karşılaştırın:

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302"
>
</amp-ad>

Yukarıdaki örneklerin her ikisini de <header> etiketinden hemen sonra makalenize eklemeyi deneyin.

Tüm bileşenlerin çekirdek AMP kitaplığı JavaScript dosyasına dahil edilmediğini unutmayın. Reklam bileşeni için ek bir JavaScript isteği eklememiz gerekiyor.

Aşağıdaki komut dosyasını <head> etiketine ekleyin:

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

Sayfayı yenileyin ve iki test reklamı görmelisiniz:

Test ads

ÖNEMLİ – Geliştirici konsolunuzda Mixed Content veya XMLHttpRequest cannot load gibi olabilir. İlk hata muhtemelen A9 reklamıyla ilgilidir, çünkü yüklediği tüm içerik güvenli değildir. Bu, AMP'de sunulan tüm reklamlar için dikkate değer bir gerekliliktir.

Aşağıdaki iki amp-ads, amp-ad'ın reklam platformu özelliklerini desteklemek için sağladığı esnekliğin bir örneğini sağlar. Bu durumda, iki DoubleClick test reklamını yalnızca belirli ülkelerde gösterilecek şekilde (DoubleClick'in kontrol panelini kullanarak) yapılandırdık. İlki yalnızca Birleşik Krallık'ta ve ikincisi yalnızca ABD'de gösterilecek. Bu iki coğrafi hedefleme reklam yapılandırmasını AMP belgesine, daha önce eklediğiniz reklamların altına eklemeyi deneyin:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/uk"
>
  <div fallback>No ad appeared because you're not browsing from the UK!</div>
</amp-ad>

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/us"
>
  <div fallback>No ad appeared because you're not browsing from the US!</div>
</amp-ad>

Sayfayı yenileyin ve bir göz atın. Aşağıdaki ekran görüntüsü Kanada'dan alındı, bu yüzden hiçbir reklam yüklenmedi:

Test ads

NOT – Bu amp-ad etiketlerinin içinde, fallback adlı bir özniteliğe sahip ek div etiketleri olduğunu fark edebilirsiniz. fallback özniteliğinin neyi ifade ettiğini tahmin edebilir misiniz? AMP yükleme sistemini, yalnızca ana öğe başarıyla yüklenemediğinde bu öğenin içeriğini göstermesi için bilgilendirir. Yer tutucular ve geri dönüşler hakkında daha fazla bilgi edinin.

OKUYUN – Desteklenen en son reklam ağlarını görmek için amp-ad bileşeninin referans belgelerini okuyun.

NOT – AMP belgesinin içinde reklam ağı tarafından sağlanan JavaScript'in çalışmasına izin verilmez. Bunun yerine, AMP çalışma zamanı, AMP belgesi olarak farklı bir kaynaktan (bir iframe sanal alanı aracılığıyla) bir iframe yükler ve reklam ağının JS'sini bu iframe sanal alanının içinde yürütür.

AMP belgemiz artık bir hikaye anlatmak ve içeriğinizden para kazanmak için önemli bileşenler olan sayfaya gömülü metin, resim ve reklam içeriyor. Bununla birlikte, modern web siteleri genellikle sadece resim ve metinden daha fazla işlevsellik içerir.

AMP belgemizi bir sonraki seviyeye taşıyalım ve haber makalelerinde yaygın olarak bulunan daha gelişmiş web işlevselliği ekleyelim:

YouTube videoları
Tweetler
Makale alıntıları

Bir YouTube videosu yerleştirin

Belgeye bir YouTube videosu yerleştirmeyi deneyelim. AMP belgenizdeki <header> öğesinden hemen sonra aşağıdaki kodu ekleyin (yeni eklediğiniz amp-ads üstünde):

<amp-youtube
  data-videoid="npum8JsITQE"
  layout="responsive"
  width="480"
  height="270"
>
  <div fallback>
    <p>The video could not be loaded.</p>
  </div>
</amp-youtube>

Sayfayı yenileyin. Videonun yerine şu metni göreceksiniz: "Video yüklenemedi."

Tarayıcınız YouTube videolarını sorunsuz bir şekilde gösterebilse bile, yine de bu hatayı alırsınız. Neden? Video aslında yüklenemedi, daha ziyade bileşenin kendisi başarısız oldu.

Tüm bileşenlerin çekirdek AMP kitaplığı JavaScript dosyasına dahil edilmediğini unutmayın. YouTube bileşeni için ek bir JavaScript isteği eklememiz gerekiyor.

NOT – Geliştirici konsolunuz hala açıksa ve URL'nizde #development=1 varsa, bu noktada amp-youtube JavaScript'ini eklemenizi hatırlatan bir AMP validator hatası ve eklenecek script etiketini size bildiren belgelere bir bağlantı görürsünüz.

Aşağıdaki komut dosyasını <head> etiketine ekleyin:

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

Sayfayı yenileyin ve YouTube videosunu görmelisiniz:

Embedded Youtube video

Sayfadaki diğer öğelerde olduğu gibi, AMP yerleşim sisteminin en boy oranını hesaplayabilmesi için videonun width ve height özniteliklerini belirttik. Ayrıca, layout responsive olarak ayarlıyoruz, böylece video ana öğesinin genişliğini dolduruyor.

YouTube videolarını yerleştirme hakkında daha fazla bilgi edinmek için amp-youtube bileşen belgelerini okuyun. Daha fazla video ve medya bileşeni için medya AMP bileşenlerinin listesine göz atın.

İPUCU – Bir bileşen yüklenemiyorsa veya bileşen tarayıcılarında desteklenmiyorsa kullanıcıları bilgilendirmek için fallback özniteliğini kullanın.

Bir Tweet görüntüleme

Twitter'dan önceden biçimlendirilmiş tweet'leri yerleştirmek, haber makalelerindeki yaygın bir özelliktir. amp-twitter bileşeni bu işlevselliği kolaylıkla sağlayabilir.

Belgenizin <head> etiketine aşağıdaki JavaScript isteğini ekleyerek başlayın:

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

Şimdi, makalenize Tweet yerleştirmek için bu kodu ekleyin:

<amp-twitter
  width="486"
  height="657"
  layout="responsive"
  data-tweetid="638793490521001985"
>
</amp-twitter>

data-tweetid özniteliği, belirli bir platformun gerektirdiği özel bir özniteliğin başka bir örneğidir. Bu durumda Twitter, data-tweetid özniteliğinin değerini belirli bir Tweet ile ilişkilendirir.

Tarayıcınızı yenileyin ve sayfaya bir göz atın. Tweetin göründüğünü görmelisiniz:

Embedded Tweet

Twitter tweet'lerini yerleştirme hakkında daha fazla bilgi edinmek için amp-twitter bileşen belgelerini okuyun.

İPUCU – AMP, sosyal ağlardan içerik yerleştirmek için daha fazla bileşen sağlar. En son sosyal AMP bileşenlerine bakın.

Bir makale alıntısını vurgulayın

Haber makalelerinde ortak bir özellik, makaleden özellikle ilgi çekici metin parçacıklarını vurgulamaktır. Örneğin, belirli bir kaynaktan bir alıntı veya önemli bir gerçek, okuyucunun dikkatini çekmek için daha büyük bir yazı tipinde tekrarlanabilir.

Bununla birlikte, tüm metin parçacıkları mutlaka aynı karakter uzunluğuna sahip değildir, bu da metnin sayfada tükettiği alan miktarıyla daha büyük bir yazı tipi boyutunu dengelemeyi zorlaştırabilir.

AMP, bu tür bir durum için özel olarak tasarlanmış başka bir bileşen sağlar, buna amp-fit-text bileşeni denir. amp-fit-text bileşeni, sabit bir genişlik ve yükseklik öğesinin yanı sıra maksimum yazı tipi boyutunu tanımlamanıza olanak tanır. Bileşen, metni kullanılabilir genişlik ve yüksekliğe sığdırmak için yazı tipi boyutunu akıllıca ölçeklendirir.

Bunu bir deneyelim. İlk olarak, bileşenin kitaplığını <head> etiketine ekleyin:

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

Sayfanıza aşağıdakileri ekleyin:

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Big, bold article quote goes here.
</amp-fit-text>

Sayfayı yenileyin ve sonuca bakın!

Şimdi, daha fazla deney yapın. Alıntı çok daha kısaysa ne olur?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Hello!
</amp-fit-text>

Ya da alıntı daha uzunsa ne olur?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  And the Raven, never flitting, still is sitting, still is sitting. On the
  pallid bust of Pallas just above my chamber door; And his eyes have all the
  seeming of a demon’s that is dreaming, And the lamp-light o’er him streaming
  throws his shadow on the floor; And my soul from out that shadow that lies
  floating on the floor. Shall be lifted—nevermore!
</amp-fit-text>

amp-fit-text ile yapılan son bir deney olarak, çok daha büyük bir yüksekliğe (örneğin, 400 değeri) sahip "Merhaba" gibi kısa bir metin parçası oluşturmayı ve maksimum yazı tipi boyutu öznitelik değerini 42 olarak korumayı deneyin. Ortaya çıkan sayfa nasıl görünecektir? Metin dikey olarak ortalanmış mı? Veya amp-fit-text etiketinin yüksekliği maksimum yazı tipi boyutuna uyacak şekilde küçülüyor mu? AMP'nin yerleşim sistemi hakkında zaten bildiklerinizi kullanarak, kodla oynamadan önce soruyu yanıtlamaya çalışın!

amp-fit-text hakkında daha fazla bilgiyi AMP by Example'ın canlı demosundan öğrenebilirsiniz.

Önceki bölüm Sonraki bölüm