AMP
TR
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский 中文 Polski Tiếng việt

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