Reklam için kabuk oluşturma

AMPHTML reklamı için gereken HTML, AMP sayfası için gerekli AMPHTML'nin bir çeşididir. AMPHTML reklamımızın kabuğunu oluşturarak gerekli kodu öğrenelim.

Favori metin editörünüzü kullanarak my-amphtml-ad.html adında bir HTML dosyası oluşturun. Aşağıdaki HTML biçimlendirmesini bu dosyaya kopyalayın:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My amphtml ad</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body></body>
</html>

Bu işaretleme, geçerli, temel bir HTML dosyası içindir. Duyarlı bir görüntü alanımız olması için meta görüntü alanı etiketini eklediğimize dikkat edin.

Şimdi, HTML'yi AMPHTML reklamına dönüştürecek şekilde değiştirelim.

<html> etiketine, belgeyi bir AMPHTML reklamı olarak tanımlayan ⚡4ads özelliğini ekleyin. Alternatif olarak, yine geçerli olan amp4ads özelliğini de belirtebilirsiniz.

<!DOCTYPE html>
<html ⚡4ads>
  <head>
    ...
  </head>
</html>

NOT - AMP sayfalarının aksine, AMPHTML reklamları <link rel="canonical"> etiketi gerektirmez.

AMPHTML reklamları kendi AMP çalışma zamanı sürümünü gerektirir, bu nedenle aşağıdaki <script> etiketini belgenizin <head> bölümüne ekleyin:

<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>

AMPHTML reklam öğeleri, AMP sayfalarından farklı ve oldukça basit bir standart metin stil satırı gerektirir. Aşağıdaki kodu <head> bölümünüze ekleyin:

<style amp4ads-boilerplate>
  body {
    visibility: hidden;
  }
</style>

AMPHTML reklamınızı biçimlendirmek için CSS'nizin <head> bölümündeki <style amp-custom> etiketleri kullanılarak AMPHTML belgesine satır içi olarak yerleştirilmesi gerekir. Temel bir görüntü reklamı oluşturduğumuz için herhangi bir CSS'ye ihtiyacımız olmadığından bu etiketleri eklemeyeceğiz.

NOT - AMPHTML reklamları için satır içi stil sayfasının maksimum boyutu 20 kilobayttır. AMPHTML reklam teknik özelliklerinde CSS gereksinimleri hakkında daha fazla bilgi edinin.

HTML dosyanızın tam kodu aşağıdadır:

<!DOCTYPE html>
<html ⚡4ads>
  <head>
    <meta charset="utf-8" />
    <title>My amphtml ad</title>
    <meta name="viewport" content="width=device-width" />
    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
    <style amp4ads-boilerplate>
      body {
        visibility: hidden;
      }
    </style>
  </head>
  <body></body>
</html>

Boş da olsa artık geçerli bir AMPHTML reklamınız var. Görüntü reklamımızı oluşturalım.

Başlayın