AMP

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:

Aturan Alasan
Harus menggunakan atau sebagai tag yang membalutnya. Mengizinkan validator untuk mengidentifikasi sebuah dokumen kreatif sebagai dokumen AMP umum atau dokumen iklan AMPHTML terbatas dan untuk mengirimkannya dengan tepat.
Harus menyertakan sebagai skrip runtime, bukan https://cdn.ampproject.org/v0.js. Mengizinkan perilaku runtime yang disesuaikan untuk iklan AMPHTML disajikan di iframe lintas asal (cross-origin).
Tidak boleh menyertakan . Kreatif iklan tidak mempunyai "versi kanon non-AMP" dan tidak akan diindeks sesuai pencarian secara independen, sehingga referensi sendiri tidak akan ada gunanya.
Dapat menyertakan tag-tag meta opsional di tajuk HTML sebagai pengenal, dalam format . Tag-tag meta tersebut harus ditempatkan sebelum skrip amp4ads-v0.js. Nilai vendor dan id adalah untai yang hanya berisi [0-9a-zA-Z_-]. Nilai type adalah creative-id atau impression-id. Pengenal kustom tersebut dapat digunakan untuk mengidentifikasi kesan (impresi) atau produk kreatif. Ini dapat berguna untuk pelaporan dan debugging.

Contoh:


Pelacakan keterlihatan hanya boleh menyasar pemilih iklan penuh, melalui "visibilitySpec": { "selector": "amp-ad" } sebagaimana ditentukan di dalam Masalah #4018 dan PR #4368. Secara khusus, ini mungkin tidak akan menyasar pemilih mana pun untuk elemen di dalam produk kreatif iklan. Dalam beberapa kasus, iklan AMPHTML mungkin memilih untuk merender produk kreatif iklan di dalam sebuah iframe. Dalam hal ini, analitik halaman pengelola (host) memang hanya dapat menyasar seluruh iframe, dan tidak akan mempunyai akses ke pemilih yang sangat mendetail.

Contoh:


  

Konfigurasi ini mengirimkan permintaan ke URL https://example.com/nestedAmpAnalytics saat 50% dari iklan penutup telah tampil terus-menerus pada layar selama 1 detik.

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

Aturan Alasan
position:fixed dan position:sticky dilarang di dalam CSS kreatif. position:fixed keluar dari DOM bayangan, yang diandalkan oleh iklan AMPHTML. Jadi, iklan dalam AMP sudah tidak diizinkan untuk menggunakan posisi tetap.
touch-action dilarang. Iklan yang dapat memanipulasi touch-action dapat mengganggu kemampuan pengguna untuk menggulir di dokumen host.
Kreatif CSS dibatas hingga 20.000 byte. Blok CSS yang besar membuat kreatif membengkak, meningkatkan latensi jaringan, dan menurunkan kinerja halaman.
Transisi dan animasi akan dikenakan pembatasan tambahan. AMP harus dapat mengontrol semua animasi pada sebuah iklan sehingga dapat menghentikan mereka saat iklan tidak ada di layar atau saat sumber daya sistem sangat rendah.
Prefiks yang khusus untuk vendor tertentu dianggap sebagai alias untuk simbol yang sama tanpa prefiks untuk keperluan validasi. Ini berarti bahwa jika sebuah foo simbol dilarang oleh aturan validasi CSS, maka simbol -vendor-foo juga akan dilarang. Beberapa properti yang telah diberikan prefiks sebelumnya oleh vendor memberikan fungsionalitas yang setara dengan properti yang dilarang atau dibatasi sesuai dengan aturan-aturan ini.

Contoh: -webkit-transition dan -moz-transition dianggap sebagai alias untuk transition. Mereka hanya akan diizinkan di dalam konteks di mana transition dasar akan diizinkan (lihat bagian Pemilih di bawah ini).

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.

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.