Spesifikasi AMP untuk Iklan

Jika Anda ingin mengusulkan perubahan pada standar, silakan tuliskan komentar di Rencana yang Ingin Diterapkan.

Iklan AMPHTML adalah sebuah mekanisme untuk merender iklan yang cepat dan efektif pada halaman AMP. Untuk memastikan bahwa dokumen iklan AMPHTML ("kreatif AMP") dapat dirender dengan cepat dan mulus di browser serta tidak menurunkan mutu pengalaman pengguna, kreatif AMP harus mematuhi seperangkat aturan validasi. Serupa dengan inti Aturan format AMP, iklan AMPHTML mempunyai akses ke seperangkat tag, kemampuan, dan ekstensi terbatas yang diizinkan.

Aturan format iklan AMPHTML

Kecuali ditentukan secara lain di bawah ini, kreatif harus mematuhi semua aturan yang diberikan oleh Aturan format AMP, disertakan di sini dengan referensi. Contohnya, Boilerplate (templat) iklan AMPHTML yang menyimpang dari boilerplate standar AMP.

Selain itu, kreatif harus mematuhi aturan-aturan berikut ini:

<meta name="amp4ads-id"
  content="vendor=adsense,type=creative-id,id=1283474">
<meta name="amp4ads-id"
  content="vendor=adsense,type=impression-id,id=xIsjdf921S">

<amp-analytics id="nestedAnalytics">
  <script type="application/json">
  {
    "requests": {
      "visibility": "https://example.com/nestedAmpAnalytics"
    },
    "triggers": {
      "visibilitySpec": {
      "selector": "amp-ad",
      "visiblePercentageMin": 50,
      "continuousTimeMin": 1000
      }
    }
  }
  </script>
</amp-analytics>

Boilerplate (templat)

Kreatif iklan AMPHTML membutuhkan baris gaya boilerplate yang jauh lebih sederhana dan berbeda dibanding yang dilakukan dokumen AMP umum:

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

Alasan: Gaya amp-boilerplate menyembunyikan konten isi hingga runtime AMP siap dan dapat menampilkannya. Jika Javascript dinonaktifkan atau runtime AMP gagal dimuat, boilerplate default memastikan bahwa konten pada akhirnya akan ditampilkan. Namun, dalam iklan AMPHTML, jika Javascript dinonaktifkan sepenuhnya, iklan AMPHTML tidak akan berjalan dan tidak ada iklan yang akan ditampilkan, jadi bagian <noscript> tidak diperlukan. Jika runtime AMP tidak ada, sebagian besar mesin yang diandalkan iklan AMPHTML (misalnya, analitik untuk pelacakan visibilitas atau amp-img untuk tampilan konten) tidak akan tersedia, jadi lebih baik tidak menampilkan iklan daripada menampilkan yang tidak berfungsi.

Terakhir, boilerplate iklan AMPHTML menggunakan amp-a4a-boilerplate, bukan amp-boilerplate, sehingga validator dapat dengan mudah mengidentifikasinya dan menghasilkan pesan kesalahan (eror) yang lebih akurat untuk membantu pengembang.

Perhatikan bahwa aturan yang sama tentang mutasi pada teks boilerplate berlaku seperti pada boilerplate AMP umum.

CSS

Transisi dan animasi CSS

Pemilih

Properti transition dan animation hanya diperbolehkan pada pemilih yang:

• Hanya berisi properti transition, animation, transform, visibility, atau opacity.

Alasan: : Ini memungkinkan runtime AMP untuk menghapus kelas ini dari konteks untuk menonaktifkan animasi, saat diperlukan untuk kinerja halaman.

Bagus

.box {
transform: rotate(180deg);
transition: transform 2s;
}

Buruk

Properti yang tidak diizinkan di kelas CSS.

.box {
color: red; // non-animation property not allowed in animation selector
transform: rotate(180deg);
transition: transform 2s;
}

Properti yang dapat ditransisikan dan dianimasikan

Satu-satunya properti yang dapat ditransisikan adalah keburaman (opasitas) dan transformasi. (Alasan)

Bagus

transition: transform 2s;

Buruk

transition: background-color 2s;

Bagus

@keyframes turn {
from {
transform: rotate(180deg);
}

to {
transform: rotate(90deg);
}
}

Buruk

@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}

to {
margin-left: 0%;
width: 100%;
}
}

Bawaan dan ekstensi AMP yang diizinkan

Yang berikut ini adalah tag bawaan AMP dan modul ekstensi AMP yang diizinkan di dalam sebuah kreatif iklan AMPHTML. Tag bawaan atau ekstensi yang tidak dicantumkan secara tegas berarti dilarang.

• amp-accordion
• amp-ad-exit
• amp-analytics
• amp-anim
• amp-animation
• amp-audio
• amp-bind
• amp-carousel
• amp-fit-text
• amp-font
• amp-form
• amp-img
• amp-layout
• amp-lightbox
• amp-mraid, berbasis eksperimental. Jika Anda mempertimbangkan untuk menggunakan ini, silakan buka masalah di wg-monetization.
• amp-mustache
• amp-pixel
• amp-position-observer
• amp-selector
• amp-social-share
• amp-video

Sebagian besar yang ditiadakan adalah demi kinerja atau untuk membuat iklan AMPHTML lebih sederhana untuk dianalisis.

Contoh: <amp-ad> ditiadakan dari daftar ini. Ini secara tegas tidak diizinkan karena mengizinkan sebuah <amp-ad> di dalam sebuah <amp-ad> dapat berpotensi menimbulkan aliran pemuatan iklan yang tidak dapat dikendalikan, dan ini tidak sesuai dengan tujuan kinerja iklan AMPHTML.

Contoh: <amp-iframe> ditiadakan dari daftar ini. Ini tidak diizinkan karena iklan dapat menggunakannya untuk mengeksekusi JavaScript sesuka hati dan memuat konten sesuka hati. Iklan yang ingin menggunakan kemampuan seperti ini harus menghasilkan false dari entri a4aRegistry-nya dan menggunakan mekanisme perenderan iklan '3p iframe' yang sudah ada.

Contoh: <amp-facebook>, <amp-instagram>, <amp-twitter>, dan <amp-youtube>, kesemuanya ditiadakan karena alasan yang sama dengan <amp-iframe>: Semua ini menciptakan iframe dan berpotensi menggunakan sumber daya yang tidak terbatas yang mereka miliki.

Contoh: <amp-ad-network-*-impl> ditiadakan dari daftar ini. Tag <amp-ad> menangani penugasan ke tag-tag penerapan ini; kreatif tidak boleh berupaya untuk menyertakan mereka secara langsung.

Contoh: <amp-lightbox> masih belum disertakan karena bahkan beberapa kreatif iklan AMPHTML dapat dirender di dalam sebuah iframe dan saat ini belum ada mekanisme bagi sebuah iklan untuk keluar melampaui iframe. Dukungan mungkin ditambahkan untuk hal ini di masa mendatang jika dirasa perlu.

Tag HTML

Yang berikut ini adalah tag-tag yang diizinkan di dalam kreatif iklan AMPHTML. Tag-tag yang tidak dicantumkan secara tegas berarti dilarang. Daftar ini adalah sebagian dari Daftar tambahan tag AMP yang diizinkan yang umum. Seperti daftar tersebut, ini diurutkan sesuai dengan spesifikasi HTML5 di dalam bagian 4: Elemen HTML.

Sebagian besar yang ditiadakan adalah demi kinerja atau karena tag-tag tersebut bukan standar HTML5. Contohnya, <noscript> ditiadakan karena iklan AMPHTML membutuhkan JavaScript, sehingga blok <noscript> tidak akan pernah mengeksekusi dan, oleh karena itu, hanya akan membengkakkan kreatif dan menguasai bandwidth serta mengakibatkan latensi. Demikian juga dengan <acronym>, <big>, dan yang semacamnya, mereka dilarang karena tidak kompatibel dengan HTML5.

4.1 Elemen root

4.1.1 <html>

• Harus menggunakan jenis <html ⚡4ads> atau <html amp4ads>

4.2 Metadata dokumen

4.2.1 <head>

4.2.2 <title>

4.2.4 <link>

• Tag-tag <link rel=...> tidak diizinkan, kecuali untuk <link rel=stylesheet>.

• Catatan: Tidak seperti di AMP umum, tag-tag <link rel="canonical"> dilarang.

4.2.5 <style> 4.2.6 <meta>

4.3 Bagian

4.3.1 <body> 4.3.2 <article> 4.3.3 <section> 4.3.4 <nav> 4.3.5 <aside> 4.3.6 <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6> 4.3.7 <header> 4.3.8 <footer> 4.3.9 <address>

4.4 Mengelompokkan Konten

4.4.1 <p> 4.4.2 <hr> 4.4.3 <pre> 4.4.4 <blockquote> 4.4.5 <ol> 4.4.6 <ul> 4.4.7 <li> 4.4.8 <dl> 4.4.9 <dt> 4.4.10 <dd> 4.4.11 <figure> 4.4.12 <figcaption> 4.4.13 <div> 4.4.14 <main>

4.5 Semantik tingkat teks

4.5.1 <a> 4.5.2 <em> 4.5.3 <strong> 4.5.4 <small> 4.5.5 <s> 4.5.6 <cite> 4.5.7 <q> 4.5.8 <dfn> 4.5.9 <abbr> 4.5.10 <data> 4.5.11 <time> 4.5.12 <code> 4.5.13 <var> 4.5.14 <samp> 4.5.15 <kbd > 4.5.16 <sub> and <sup> 4.5.17 <i> 4.5.18 <b> 4.5.19 <u> 4.5.20 <mark> 4.5.21 <ruby> 4.5.22 <rb> 4.5.23 <rt> 4.5.24 <rtc> 4.5.25 <rp> 4.5.26 <bdi> 4.5.27 <bdo> 4.5.28 <span> 4.5.29 <br> 4.5.30 <wbr>

4.6 Edit

4.6.1 <ins> 4.6.2 <del>

4.7 Konten yang Disematkan

• Konten yang disematkan hanya didukung melalui tag AMP, seperti <amp-img> atau <amp-video>.

4.7.4 <source>

4.7.18 SVG

Tag-tag SVG tidak ada di dalam namespace HTML5. Mereka dicantumkan di bawah tanpa ID bagian.

<svg>``<g>``<path>``<glyph>``<glyphref>``<marker>``<view>``<circle>``<line>``<polygon>``<polyline>``<rect>``<text>``<textpath>``<tref>``<tspan>``<clippath>``<filter>``<lineargradient>``<radialgradient>``<mask>``<pattern>``<vkern>``<hkern>``<defs>``<use>``<symbol>``<desc>``<title>

4.9 Data tabel

4.9.1 <table> 4.9.2 <caption> 4.9.3 <colgroup> 4.9.4 <col> 4.9.5 <tbody> 4.9.6 <thead> 4.9.7 <tfoot> 4.9.8 <tr> 4.9.9 <td> 4.9.10 <th>

4.10 Formulir

4.10.8 <button>

4.11 Pembuatan skrip

• Seperti dokumen AMP umum, tag <head> kreatif harus berisi tag <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>.
• Tidak seperti AMP umum, <noscript> dilarang.
• Alasan: Karena iklan AMPHTML memerlukan JavaScript agar dapat berfungsi, blok <noscript> tidak berguna di dalam iklan AMPHTML dan hanya menghabiskan bandwidth jaringan.
• Tidak seperti AMP umum, <script type="application/ld+json"> dilarang.
• Alasan: JSON LD digunakan untuk penandaan data berstruktur di halaman host, namun kreatif iklan bukan dokumen mandiri dan tidak berisi data berstruktur. Blok JSON LD pada kreatif iklan hanya akan menghabiskan bandwidth.
• Semua pengecualian dan aturan pembuatan skrip lainnya adalah bawaan dari AMP umum.