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