Accelerated Mobile Pages İleri Düzey Kavramları

1. Genel Bakış

Bu codelab, Accelerated Mobile Pages Foundations'da tanıtılan kavramların devamıdır. Bu laboratuvara başlamadan önce önceki Code Lab'i tamamlamış olmanız veya en azından AMP'nin temel kavramları hakkında temel bir anlayışa sahip olmanız gerekir.

Bu codelab'de AMP'nin reklamcılık, analizler, video yerleştirme, sosyal medya entegrasyonu, resim bantları ve daha fazlasını nasıl işlediğini öğreneceksiniz. Bunu yapmak için, çeşitli AMP bileşenleri aracılığıyla bu özellikleri ekleyerek Foundations codelab'indeki örneği temel alacaksınız.

Neler öğreneceksiniz?

• amp-ad ile görüntülü reklamlar.
• YouTube videoları, Twitter kartları ve duyarlı metin öğeleri yerleştirin.
• amp-carousel kullanarak resimler ve içerik kombinasyonları içeren rulolar oluşturun.
• amp-analytics ile basit izleme kalıpları.
• Sayfanıza site gezinme özelliği ekleme yöntemleri.
• Yazı tiplerinin AMP ile işleyiş şekli.

İhtiyacınız olanlar

• Örnek kod
• Chrome (veya JavaScript konsolunu inceleyebilen eşdeğer bir tarayıcı)
• Python (tercihen 2.7) veya Chrome 200 OK Web Server uzantısı
• Kod düzenleyici (ör. Atom, Sublime, Notepad++)

2. Örnek kodu alın

Tüm örnek kodu bilgisayarınıza indirebilirsiniz:

Zip dosyasını indir

...veya GitHub deposunu komut satırından kopyalayın:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-advanced.git

Birkaç örnek kaynak dosyası ve başlangıç article.html sayfasını içeren bir ZIP dosyası indirirsiniz.

Klasörün sıkıştırmasını açın ve bilgisayarınızdaki komut satırını kullanarak dizine gidin.

3. Örnek sayfayı çalıştırma

Örnek sayfamızı test etmek için dosyaları bir web sunucusundan erişmemiz gerekir. Test amacıyla geçici bir yerel web sunucusu oluşturmanın çeşitli yolları vardır. Bu kod laboratuvarında, mevcut 3 seçenekle ilgili talimatlar verilecektir:

• "Web Server for Chrome" adlı Google Chrome uygulaması: En basit ve platformlar arası çözüm olduğu için bu yaklaşım önerilir. Not: Bu yaklaşım için Google Chrome'un yüklü olması gerekir.
• Firebase Hosting: Yeni statik öğe barındırma platformumuz "Firebase Hosting"i keşfetmek istiyorsanız alternatif bir seçenektir. Varsayılan olarak SSL etkindir.
• Yerel HTTP Python sunucusu: Komut satırına erişim gerektirir.

Not: Üretim ortamlarında HTTPS kullanılması önemle tavsiye edilir. HTTPS, SEO dahil olmak üzere güvenlik dışında çeşitli avantajlar sunar. Bu konu hakkında daha fazla bilgiyi burada bulabilirsiniz.

1. seçenek: Web Server for Chrome

"Web Server for Chrome" uygulamasını Chrome Web Mağazası'nda bu bağlantıdan bulabilirsiniz.

Chrome uygulamasını yükledikten sonra "Klasör Seç" düğmesini kullanarak uygulamayı belirli bir klasöre yönlendirmeniz gerekir. Bu kod laboratuvarı için, kod laboratuvarı örnek dosyalarını çıkardığınız klasörü seçmeniz gerekir.

Ayrıca, "index.html dosyasını otomatik olarak göster" seçeneğini işaretlemeniz ve bağlantı noktasını "8000" olarak ayarlamanız gerekir. Bu değişikliklerin geçerli olması için web sunucusunu yeniden başlatmanız gerekir.

Bu URL'ye şu yollarla erişebilirsiniz:

http://localhost:8000/article.amp.html

Yukarıdaki URL başarıyla yüklenirse bir sonraki bölüme geçebilirsiniz.

2. seçenek: Firebase Hosting

Yeni Firebase statik web barındırma hizmetimizi keşfetmek istiyorsanız AMP sitenizi Firebase barındırma URL'sine dağıtmak için buradaki talimatları uygulayabilirsiniz.

Firebase Hosting, statik web sitelerini ve öğelerini (HTML, CSS ve JavaScript dosyaları dahil) hızlı bir şekilde dağıtıp barındırmak için kullanabileceğiniz bir statik barındırma sağlayıcısıdır. Statik içerik, dünyanın dört bir yanında varlık noktaları (PoP'ler) bulunan bir içerik yayınlama ağında (CDN) önbelleğe alındığı için kullanıcılar daha az gecikmeden yararlanır.

Son olarak, Firebase Hosting her zaman SSL üzerinden sunulduğu için AMP ve genel olarak web için mükemmeldir. Yalnızca AMP'ye odaklanmak istiyorsanız bu seçeneği yok sayabilirsiniz.

3. seçenek: HTTP Python sunucusu

Chrome kullanmıyorsanız veya Chrome uzantısını yüklemekte zorlanıyorsanız yerel bir web sunucusu başlatmak için komut satırından Python'u da kullanabilirsiniz.

Python'ın yerleşik HTTP sunucusunu komut satırından çalıştırmak için aşağıdaki komutu yürütün:

python -m SimpleHTTPServer

Ayrıca bu URL'ye erişin:

http://localhost:8000/article.amp.html

4. Temel AMP bileşenlerini öğrenme

AMP'nin bileşen sistemi, makalelerimize en az çabayla hızlı bir şekilde verimli ve duyarlı özellikler eklememizi sağlıyor. <head> etiketindeki temel AMP JavaScript kitaplığı birkaç temel bileşen içerir:

• amp-ad: Bir reklamın görüntüleneceği kapsayıcı.
• amp-img: HTML img etiketinin yerine kullanılır.
• amp-pixel: Sayfa görüntülemelerini saymak için izleme pikseli olarak kullanılır.
• amp-video: HTML5 video etiketinin yerine kullanılır.

Yukarıdaki temel bileşenlerin tümü bir AMP dokümanında hemen kullanılabilir. Örnek kodumuzda sayfamızda zaten amp-img kullanılıyor ve AMP'nin temelleri codelab'inde bunun AMP düzen sistemiyle nasıl ilişkili olduğunu inceledik. Bu nedenle, bir sonraki bölümde amp-ad'i inceleyelim.

Not: HTML5 videoları yerleştirme ve izleme pikselleri, web geliştirme alanında önemli özelliklerdir. Bu bileşenleri yerleştirmek istiyorsanız ilgili referans sayfalarını buradan ve buradan inceleyebilirsiniz.

5. Reklam ekleme

Örnek article.amp.html sayfanız aşağıdaki gibi olmalıdır:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script type="application/ld+json">
    {
     "@context": "http://schema.org",
     "@type": "NewsArticle",
     "mainEntityOfPage":{
       "@type":"WebPage",
       "@id":"https://example.com/my-article.html"
     },
     "headline": "My First AMP Article",
     "image": {
       "@type": "ImageObject",
       "url": "https://example.com/article_thumbnail1.jpg",
       "height": 800,
       "width": 800
     },
     "datePublished": "2015-02-05T08:00:00+08:00",
     "dateModified": "2015-02-05T09:20:00+08:00",
     "author": {
       "@type": "Person",
       "name": "John Doe"
     },
     "publisher": {
       "@type": "Organization",
       "name": "⚡ AMP Times",
       "logo": {
         "@type": "ImageObject",
         "url": "https://example.com/amptimes_logo.jpg",
         "width": 600,
         "height": 60
       }
     },
     "description": "My first experience in an AMPlified world"
    }
    </script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

Yukarıdaki basit bir sayfadır. Bu sayfayla ilgili en ilginç nokta, hem AMP doğrulamasından hem de Schema.org arama motoru meta verileri doğrulamasından geçmesidir. Bu sayfa bir haber web sitesinde yayınlansaydı AMP içeriğine ayrılmış yeni Google arama bandına dahil edilmeye uygun olurdu. Bu nedenle, çalışmamız için harika bir başlangıç noktasıdır.

Sayfayı değiştirmeden önce Chrome Geliştirici Araçları'nı açalım. Bir web sitesi (özellikle mobil odaklı bir web sitesi) üzerinde çalışırken tarayıcıda test yaparken mobil deneyimi simüle etmek genellikle iyi bir fikirdir. Chrome'da Menu > More Tools > Developer Tools simgesini kullanarak Geliştirici Konsolu'nu açarak başlayın:

Şimdi geliştirici konsolunda JavaScript çıkışını inceleyin. Konsol sekmesinin seçili olduğundan emin olun:

Şimdi geliştirici konsolunda cihaz simülasyonu düğmesini tıklayın. Bu özellik, yan yana duran bir telefon ve tabletle gösterilir:

Açılan menüde cihazı "Nexus 5X" olarak ayarlayın:

Artık sayfanın kendisi üzerinde çalışmaya başlayabiliriz. AMP makalemize reklam eklemeyi deneyelim.

AMP'deki tüm reklamlar amp-ad bileşeni kullanılarak oluşturulur. Bu bileşeni kullanarak reklamlarımızı genişlik, yükseklik ve düzen modu gibi çeşitli şekillerde yapılandırabiliriz. Ancak birçok reklam platformu, reklam ağının hesap kimliği, hangi reklamın yayınlanması gerektiği veya reklamcılığı hedefleme seçenekleri gibi ek yapılandırma gerektirir. amp-ad için gereken çeşitli seçenekleri HTML özellikleri olarak doldururuz.

Çift tıklama reklamı örneğine 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ırmadır. type özelliğini not edin. Bu özellik, amp-ad bileşenini hangi reklam platformunu kullanmak istediğiniz konusunda bilgilendirir. Bu durumda Double Click platformunu istediğimiz için tür değeri doubleclick oldu.

data-slot özelliği daha benzersizdir. amp-ad'de data- ile başlayan tüm özellikler, tedarikçiye özgü özelliklerdir. Bu nedenle, tüm tedarikçilerin bu özelliğe ihtiyacı olmayabilir veya bu özellik sağlandığında tepki vermeyebilirler. Örneğin, yukarıdaki Double Click örneğini A9 platformundaki bir 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 iki örneği de <header> etiketinden hemen sonra makalenize eklemeyi deneyin. Sayfayı yenilediğinizde iki test reklamının göründüğünü görürsünüz:

Önemli: Geliştirici konsolunuzda "Karışık İçerik" veya "XMLHttpRequest yüklenemiyor" gibi bazı hatalar olabilir. İlki, yüklediği içeriğin tamamı güvenli olmadığından A9 reklamıyla ilgili olabilir. Bu, AMP'de yayınlanan tüm reklamlar için önemli bir koşuldur.

Double Click ile kullanabileceğiniz diğer seçenekleri inceleyelim. Sayfanıza şu iki coğrafi hedefleme reklam yapılandırmasını 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>

Maalesef coğrafi hedefleme, sayfanın kodundan kontrol edilemez. Ancak bu test reklamları, DoubleClick kontrol panelinde yalnızca belirli ülkelerde (özellikle Birleşik Krallık ve Amerika Birleşik Devletleri) gösterilecek şekilde yapılandırılmıştır.

Sayfayı yenileyin ve inceleyin. Aşağıdaki ekran görüntüsü Avustralya'da çekildiği için reklamların hiçbiri yüklenmiyor:

Yukarıdaki coğrafi hedefleme örneği, amp-ad'in her türlü reklam platformu özelliği için yeterince esnek olduğunu gösterir.

Not: Bu amp-ad etiketlerinin içinde, üzerinde fallback adlı bir özellik bulunan ek div etiketleri olduğunu fark edebilirsiniz. Yedek özelliğin neyi ifade ettiğini tahmin edebilir misiniz? Bu özellik, üst öğe başarıyla yüklenemediğinde AMP'nin yükleme sistemine yalnızca söz konusu öğenin içeriğini göstermesini bildirir. Yani üst öğe, alt öğeyi yedek olarak kullanır. Bu nedenle "yedek" terimi kullanılır.

Şu anda desteklenen reklam ağları şunlardır:

• A9
• Adblade
• Adform
• AdReactor
• AdSense
• AdTech
• Criteo
• Dot and Media
• Doubleclick
• Flite
• Industrybrains
• OpenX
• plista
• Smart AdServer
• Yieldmo
• Revcontent
• TripleLift
• Teads
• I-Mobile
• Webediads

Desteklenen en son reklam platformları hakkında bilgi edinmek için AMP reklam bileşeni ile ilgili dokümanlar sayfasını inceleyin.

Bir sonraki bölümde, daha gelişmiş AMP bileşenlerini ve bunları AMP belgelerimize nasıl ekleyeceğimizi inceleyeceğiz.

Not: Reklam ağları tarafından sağlanan JavaScript'in AMP dokümanı içinde çalıştırılmasına izin verilmez. Bunun yerine, AMP çalışma zamanı AMP dokümanından farklı bir kaynaktan (iframe korumalı alanı aracılığıyla) bir iframe yükler ve reklam ağının JS'sini o iframe korumalı alanı içinde yürütür.

Önemli: amp-ad spesifikasyonu zaman içinde önemli ölçüde gelişebilir. Geçerli yaklaşım, reklamları gösterebilmek için biçimin önyükleneceği şekilde tasarlanmıştır.

6. Genişletilmiş bileşenlerle içeriği genişletme

Artık sayfaya yerleştirilmiş metin, resim ve hatta reklam içeren temel bir AMP belgeniz var. Bunların hepsi, hikaye anlatmak ve içeriğinizden para kazanmak için gereken temel unsurlardır. Ancak modern web siteleri genellikle yalnızca resim ve metinlerden daha fazla işlev içerir.

Şimdi AMP belgemizi bir sonraki seviyeye taşıyalım ve daha önce bahsedilen temel bileşenlerin dışında hangi bileşenlerin kullanılabildiğini inceleyelim.

Bu bölümde, haber makalelerinde yaygın olarak bulunan daha gelişmiş web işlevleri eklemeye çalışacağız:

• YouTube videoları
• Tweet'ler
• Makale alıntıları

YouTube videosu yerleştirme

Dokümana YouTube videosu yerleştirmeyi deneyelim. Aşağıdaki kod, bir videoyu yerleştirip sayfanıza ekler:

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

Sayfayı yenileyin ve sayfaya bakın. Video yerine şu metni görürsünüz: "Video yüklenemedi."

Tarayıcınız YouTube videolarını sorunsuz bir şekilde gösterebilse bile bu hatayı almaya devam edersiniz. Neden? Video yüklenememiş değildir, bileşenin kendisi yüklenememiştir.

Tüm bileşenlerin temel AMP kitaplığı JavaScript dosyasına dahil edilmediğini unutmayın. Özellikle YouTube bileşeni için ek bir JavaScript isteği eklememiz gerekiyor. Temel bir küme dışındaki tüm bileşenler için bu ek JavaScript referansları gerekir.

<head> etiketine aşağıdaki isteği ekleyin:

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

Sayfayı yenilediğinizde YouTube videosunu görürsünüz:

En boy oranının AMP düzen sistemi tarafından hesaplanması için videonun genişliğini ve yüksekliğini tekrar belirttik. Ayrıca, düzen türü duyarlı olarak ayarlandığından bu video, üst öğesinin genişliğini doldurur.

YouTube bileşeni hakkında daha fazla bilgi edinin.

Not: AMP, YouTube bileşenine ek olarak amp-video adlı genel bir HTML5 video bileşeni ve amp-brightcove adlı Brightcove Video Cloud veya Perform oynatıcısına özel bir AMP bileşeni içerir. Facebook, Instagram, Vine, Twitter ve Dailymotion videoları da dahil olmak üzere daha fazla video oynatma örneği için "AMP By Example"a göz atın.

Not: Yedek özellik, bir bileşenin yüklenememesi durumunda bilgi sağlamak için kullanışlıdır. Kullanıcının tarayıcısı belirli bir AMP bileşenini desteklemiyorsa ne olur? Kullanıcıya işlevlerin neden eksik olabileceği hakkında bilgi vermek daha iyi bir kullanıcı deneyimi sağlar.

Tweet görüntüleme

Twitter'dan önceden biçimlendirilmiş tweet'leri yerleştirmek, haber makalelerinde yaygın olarak kullanılan bir özelliktir. AMP Twitter bileşeni bu işlevi kolayca sağlayabilir.

Başlamak için aşağıdaki JavaScript isteğini belgenizin <head> etiketine ekleyin:

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

Şimdi de makalenize bu kodu ekleyerek tweet'i yerleştirin:

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

data-tweetid özelliği, belirli bir platform tedarikçisi tarafından zorunlu kılınan özel bir özelliğe başka bir örnektir. Bu durumda Twitter, data-tweetid özelliğini sayfaya yerleştirilecek belirli bir tweet'e karşılık gelen özellik olarak tanır.

Tarayıcınızı yenileyin ve sayfaya göz atın. Tweet'in göründüğünü görmeniz gerekir:

Twitter bileşeni hakkında daha fazla bilgi edinin.

Not: AMP, sosyal ağlardan içerik yerleştirmek için daha da fazla bileşen içerir. Instagram bileşeni ve Vine bileşenine göz atın.

Makale alıntısını vurgulama

Haber makalelerinde, makalenin özellikle ilgi çekici metin snippet'lerini vurgulamak yaygın bir uygulamadır. Örneğin, belirli bir kaynaktan alınan alıntı veya önemli bir bilgi, okuyucunun dikkatini çekmek için daha büyük bir yazı tipiyle tekrarlanabilir.

Ancak tüm alıntılar veya metin parçaları aynı uzunlukta karakter dizisi olmayabileceğinden daha büyük yazı tipi boyutunu, ilgili metnin sayfada kaplayacağı alanla dengelemek zor olabilir.

AMP'de bu tür durumlar için özel olarak tasarlanmış amp-fit-text adlı başka bir bileşen bulunur. Sabit genişlik ve sabit yükseklik öğesi ile maksimum yazı tipi boyutu tanımlamanıza olanak tanır. Bileşen, yazı tipi boyutunu, teklifin metnini mevcut genişlik ve yüksekliğe sığacak şekilde akıllıca ölçeklendirir.

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 deneme yapın. Alıntı çok kısaysa ne olur?

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

Daha uzun bir alıntı da olabilir.

<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 son bir deneme olarak, çok daha büyük bir yüksekliğe sahip kısa bir metin (ör. 400 değeri) oluşturmayı ve max-font-size özellik değerini 42 olarak korumayı deneyin. Elde edilen sayfa nasıl görünür? Metin dikey olarak ortalanıyor mu yoksa amp-fit-text etiketinin yüksekliği, maksimum yazı tipi boyutuna uyacak şekilde küçülüyor mu? AMP'nin düzen sistemi hakkında bildiklerinizi kullanarak belgeyi düzenlemeden önce soruyu yanıtlamaya çalışın.

7. Karmaşık bantlar

Web geliştirmede sık kullanılan bir diğer özellik de banttır. AMP, bu ihtiyacı karşılamak için tasarlanmış genel bir bileşen içerir. Resimlerden oluşan bir carousel gibi basit bir örnekle başlayalım.

Aşağıdaki JavaScript isteğini belgenizin <head> etiketine ekleyerek bant bileşeni kitaplığını dahil etmeyi unutmayın:

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

Ardından, duyarlı düzene ve önceden tanımlanmış genişlik ve yüksekliğe sahip basit bir resim bandı yerleştireceğiz. Sayfanıza aşağıdakileri ekleyin:

<amp-carousel layout="fixed-height" height="168" type="carousel" >
  <amp-img src="mountains-1.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168"></amp-img>
</amp-carousel>

Sayfanızı yenilediğinizde sayfanızda bir bant görürsünüz:

Döner galeri bileşeni çeşitli şekillerde yapılandırılabilir. Türü slides olarak değiştirmeyi deneyin ve sonuca bakın. amp-carousel öğesinin ve içindeki resimlerin layout özelliğini de responsive olarak değiştirdiğinizden emin olun.

Artık öğelerin kaydırılan bir listesi yerine her seferinde bir öğe görürsünüz. Öğeler arasında gezinmek için ekranı yatay olarak kaydırmayı deneyin. Üçüncü öğeye kaydırdığınızda daha fazla kaydıramazsınız.

Ardından, loop özelliğini ekleyin. Sayfayı yenileyin ve hemen sola kaydırmayı deneyin. Bant sonsuz döngüye girer.

Son olarak, bu döngünün 2 saniyede bir otomatik olarak oynatılmasını sağlayalım. Sayfaya autoplay özelliğini ve 2000 değerine sahip gecikme özelliğini ekleyin: delay="2000".

Nihai sonucunuz aşağıdaki gibi görünmelidir:

<amp-carousel layout="responsive" width="300" height="168" 
         type="slides" autoplay delay="2000" loop>
  <amp-img src="mountains-1.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168" layout="responsive"></amp-img>
</amp-carousel>

Sayfayı yenileyin ve deneyin.

Not: Ruloda fixed-height düzen türünü kullandığımızı fark etmiş olabilirsiniz. Bu, carousel türünün bir gerekliliğidir. slides türü ise responsive düzen türünü gerektiriyordu. Sabit yükseklikli öğeler, kendilerine ayrılan alanı kullanır ancak yüksekliği değişmez. fixed-height öğesinin çalışması için yükseklik özelliği tanımlanmalı, genişlik özelliği ise mevcut olmamalı veya otomatik olarak ayarlanmalıdır.

Resim bantları harika olsa da bantımızda daha karmaşık içeriklerin görünmesini istersek ne yapmalıyız? Bir reklamı, metni ve resmi tek bir dönen reklamda bir araya getirerek biraz değişiklik yapmayı deneyelim. amp-carousel, bu tür bir karışımı gerçekten aynı anda işleyebilir mi? Elbette.

Öncelikle, amp-fit-text ve amp-carousel bileşenlerinin birlikte güvenli bir şekilde çalışmasını sağlamak için bu stili sayfaya ekleyelim:

amp-fit-text {
    white-space: normal;
}

Şimdi aşağıdaki döner reklam kodunu sayfanıza yerleştirmeyi deneyin:

<amp-carousel layout="fixed-height" height="250" type="carousel" >
    <amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img>

    <amp-ad width="300" height="250"
      type="doubleclick"
      data-slot="/35096353/amptesting/image/static">
        <div placeholder>This advert is still loading.</div>
    </amp-ad>

    <amp-fit-text width="300" height="250" layout="fixed">
        Big, bold article quote goes here.
    </amp-fit-text>
</amp-carousel>

Sayfayı yenilediğinizde aşağıdakine benzer bir ekranla karşılaşırsınız:

Bant bileşeni hakkında daha fazla bilgi edinin.

Not: Son örneğimizde, amp-ad bileşeninin placeholder özelliğine sahip bir alt div öğesi içerdiğini fark etmiş olabilirsiniz. Daha önce codelab'de fallback sistemiyle benzer bir senaryoyla karşılaştığımızı hatırlarsınız. Yer tutucu ile yedek arasındaki fark nedir? Fallback öğeleri, üst öğe yüklenemediğinde (ör. reklam yoksa) görünür. placeholder öğeleri ise yüklenirken üst öğenin yerine görünür. Bir anlamda, her özellik üst öğenin yükleme sürecini tamamlar.

Önemli: Maalesef amp-ad bileşeni, arka planda bir iFrame kullanır. Bu durum, carousel'in kaydırma hareketlerini engelleyebilir. Bu bilinen bir sorundur ve nedeni araştırılmaktadır.

8. amp-analytics ile izleme

Analytics platformları genellikle satır içi JavaScript snippet'leri ve etkinlikleri tetikleyip analiz sistemine geri gönderen işlev çağrıları aracılığıyla web sitelerine entegre edilir. AMP, bu süreci çeşitli analiz iş ortakları için tekrarlamak üzere esnek bir JSON yapılandırma söz dizimi sağlar.

Aşağıda, amp-analytics'in JSON biçiminde yeniden yazacağımız geleneksel JavaScript destekli Google Analytics izlemeye örnek verilmiştir. İlk olarak geleneksel JavaScript yaklaşımı:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

Yukarıdaki kod oldukça basittir ve izlenecek sayfa görüntüleme etkinliği için bir bildirim gönderir.

Yukarıdakilerin tümünü amp-analytics bileşeninde kopyalamak için önce bileşen kitaplığını dokümanımızın <head> bölümüne ekliyoruz:

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

Ardından, bileşeni aşağıdaki şekilde ekleriz:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
</script>
</amp-analytics>

Daha karmaşık gibi görünse de aslında farklı etkinlik türlerini tanımlamak için çok esnek bir biçimdir. Ayrıca, JSON biçimi, geleneksel örnekteki JavaScript kodu blob'unu içermez. Bu da yanlışlıkla değiştirilmesi durumunda hatalara yol açabilir.

JSON biçiminde tetikleyiciler anahtarı, izleyeceğimiz tüm etkinlik tetikleyicilerini temsil eden bir dizi anahtar içerir. Bu tetikleyicilerin anahtarları, etkinliğin açıklamalarıdır. Örneğin, yukarıdaki örnekte "varsayılan sayfa görüntüleme" bir etkinlik açıklamasıdır. Başlık anahtarı değeri, görüntülenen sayfanın adıyla ilgilidir.

Yukarıdaki örneği genişleterek "#header tetikleyicisi tıklama" adlı başka bir tetikleyici ekleyebiliriz:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    },
    "click on #header trigger": {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

Bu tetikleyici, adından da anlaşılacağı gibi çalışır. DOM seçici "#header" kullanılarak "header" kimliğine sahip bir etiket sorgulanabilir ve bu etikete cihazda "tıklandığında" veya dokunulduğunda "clicked-header" etkinlik işlemi, "examples" kategori etiketiyle birlikte analiz platformuna gönderilir.

Entegre etmek istediğiniz özel bir izleme platformunuz varsa yine de amp-analytics'i kullanabilir ve izleme bilgileri için kendi kişiselleştirilmiş URL uç noktalarınızı tanımlayabilirsiniz. amp-analytics bileşeni hakkında daha fazla bilgiyi burada bulabilirsiniz.

Not: Bu analiz örneklerinin tümünde "UA-YYYY-Y" yerine kendi web sitenizin Google Analytics izleme kodu kullanılmalıdır.

Not: Daha basit izleme sistemleriyle ilgileniyorsanız amp-pixel'e göz atabilirsiniz. Yalnızca sayfa görüntülemelerini izlemeniz gerekiyorsa geleneksel piksel izlemenin gereksinimlerini karşılamayı amaçladığı için amp-analytics'e kıyasla daha hafif bir çözümdür. Daha fazla bilgiyi buradan edinebilirsiniz.

Önemli: Analiz bileşeni henüz geliştirme aşamasındadır. amp-analytics bileşeni geliştirildikçe daha fazla analiz platformu ve izlenecek daha fazla etkinlik türü eklenecektir. En güncel bilgiler için referans dokümanını okuyun.

9. Sitenizde gezinme

Mobil web sitelerinin ortak bir gereksinimi, site gezinme menüsünün eklenmesidir. Bu menüler birçok farklı biçimde olabilir. AMP dokümanında gezinmenin nasıl sunulabileceğine dair birkaç örneği aşağıda bulabilirsiniz:

1. Ana sayfanıza geri bağlantı oluşturun. Bu, en basit seçenektir.
2. Bant bileşeni aracılığıyla alt başlık menüsü.

Ana sayfa bağlantısı

Kullanıcılarınızı web sitenizin normal gezinme seçeneklerine yönlendirmenin en basit yolu, onları normal web sitesi arayüzünüze geri yönlendirmektir.

Bu HTML bağlantısını <header> etiketine eklemeyi deneyin:

<header>
  <a href="homepage.html">
    <amp-img class="home-button" src="icons/home.png" width="36" height="36"></amp-img>
  </a>

  News Site
</header>

Ayrıca bu kuralı satır içi CSS'nize ekleyin:

.home-button {
  float: left;
}

Şimdi sayfayı yenileyin. Sayfanın sol üst köşesinde homepage.html işaretine yönlendiren bir bağlantı görürsünüz. Bu bağlantıyı tıkladığınızda hiçbir yere yönlendirilmediğini fark edersiniz.

Bu bağlantı, kullanıcılarınızın normal web sitenizin gezinme bölümünü kullanarak sitenizin diğer bölümlerine gitmesini sağlamak için web sitenizin ana sayfasının URL'siyle değiştirilebilir.

Belirtildiği gibi, bu, mevcut web sitenizin gezinme özelliğinden yararlanarak kullanabileceğiniz en basit yaklaşımdır. Ardından iki alternatifi inceleyeceğiz.

Alt Başlık Menüsü

Bu soruna yönelik bir diğer yaklaşım da sitenizin gezinme menüsünü AMP dokümanında sunmaktır. Sayfanızın küçük bir bölümünde kalması için, sitenin üstbilgisinin altında kaydırılabilir bir menü sunmak üzere bir bant kullanabiliriz.

Bant bileşenine ihtiyacımız olduğundan, bileşenin JavaScript'ini sayfanızın <head> etiketine eklediğinizden emin olun:

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

Bu HTML snippet'ini <header> etiketinizin hemen altına eklemeyi deneyin:

...
</header>
<div class="sub-menu">
  <amp-carousel layout="fixed-height" height="38" type="carousel">
    <a href="#example1">Example 1</a>
    <a href="#example2">Example 2</a>
    <a href="#example3">Longer Named Example 3</a>
    <a href="#example4">Example 4</a>
    <a href="#example5">Example 5</a>
    <a href="#example6">Example 6</a>
  </amp-carousel>
</div>
<article>
...

Ayrıca, bu kuralları satır içi CSS'nize ekleyin:

.sub-menu {
  background: black;
}

.sub-menu a {
  display: block;
  background: tomato;
  margin: 5px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

Şimdi sayfayı yenileyin. Makale başlığınızın altında bir bağlantı menüsü görünür. Bu menü, birçok gezinme bağlantısını depolamak için yatay olarak kaydırılabilir.

Bu alt menü gezinme özelliği, sayfanızda çok fazla yer kaplamadan birçok bağlantıyı saklamanın harika bir yoludur.

10. Yazı tipi ekleme

Daha önce de belirtildiği gibi, AMP dokümanlarında harici stil sayfası isteklerine izin verilmez. Ancak bu kuralın bir istisnası vardır: yazı tipleri.

Yazı tipleri, web kullanıcıları için makale okuma deneyiminin önemli bir parçasıdır. Web tarayıcıları, yazı tipi dosyalarını harici stil sayfası istekleri aracılığıyla getirdiğinden AMP'de bu hariç tutma işlemi gereklidir.

Dokümana Raleway yazı tipine referans eklemeyi deneyelim:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">

Şimdi CSS'nizi Raleway'e referans içerecek şekilde güncelleyin:

body {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

Sayfanızı yenileyin ve yeni görünümüne göz atın. Ayrıca doğrulayıcının çıktısını incelediğinizde bu harici istekle ilgili herhangi bir şikayet olmadığını göreceksiniz.

Not: Belgenize yazı tipi eklemek için başka bileşenler gerekmez. Bununla birlikte, amp-font adlı bir bileşen de vardır. Bu işlev, web yazı tiplerini yüklemek için kullanılmaz. Bunun yerine, bir web yazı tipinin başarıyla yüklenip yüklenmediğini algılamak ve gerekirse uygun şekilde yanıt vermek için kullanabilirsiniz.

Bu özelliği, yazı tipiniz tamamen yüklenene kadar metninizi gizlemek için kullanabilirsiniz. Böylece kullanıcı, metnin geçici yazı tipinden gerçek yazı tipine geçişini görmez. Yazı tipi başarısız olursa bunun yerine geçici yazı tipini gösterebilirsiniz. En kötü senaryo, kullanıcının hiçbir metni okuyamamasıdır. amp-font hakkında daha fazla bilgiyi burada bulabilirsiniz.

11. Tebrikler!

İleri Düzey AMP kod laboratuvarını tamamladınız ve AMP'nin birçok temel bileşenini başarıyla keşfettiniz.

Umarız AMP-reklam ve AMP-analizlerinin, her türlü farklı reklam platformunu ve analiz sağlayıcıyı desteklemek için nasıl kullanılabileceği konusunda net bir fikriniz vardır. Kullanılabilen AMP bileşenlerinin tam listesini inceleyin.

Aşağıda, becerilerinizi daha da geliştirmek için inceleyebileceğiniz bazı ek konular ve bağlantılar yer almaktadır.

• Örneklerle AMP: AMP bileşenleri ve bileşen kalıplarıyla ilgili kapsamlı bir örnek kataloğu.
• Double Click Reklam Örnekleri: AMP reklam örneklerinin yer aldığı kapsamlı bir katalog.
• Sayfa Bulma hakkında her şey
• İzin verilmeyen HTML etiketleri
• Kısıtlanmış CSS Kuralları ve Animasyonlar
• iFrame'ler hakkında daha fazla bilgi
• AMP CDN'si
• Kullanılabilir AMP bileşenlerinin listesi