AMP

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>
...

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></style> 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.