AMP

amp-ad

Description

A container to display an ad.

 

Required Scripts

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

Container untuk menampilkan iklan. amp-embed adalah alias untuk tag amp-ad, yang memperoleh semua fungsionalitasnya dengan nama tag berbeda. Gunakan amp-embed jika secara semantis lebih akurat. Dokumen AMP hanya mendukung iklan/sematan yang ditayangkan melalui HTTPS.

amp-ad / amp-embed

Spesifikasi amp-ad/amp-embed besar kemungkinan akan terus berubah secara signifikan seiring waktu. Pendekatan saat ini dirancang untuk mem-bootstrap format agar dapat menampilkan iklan.

Deskripsi Container untuk menampilkan iklan. amp-embed adalah alias untuk tag amp-ad, yang memperoleh semua fungsionalitasnya dengan nama tag berbeda. Gunakan amp-embed jika secara semantis lebih akurat. Dokumen AMP hanya mendukung iklan/sematan yang ditayangkan melalui HTTPS.
Skrip yang Diperlukan <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
Catatan: amp-ad tetap dapat berfungsi tanpa skrip ini, namun kami sangat merekomendasikannya demi kompatibilitas dengan versi mendatang
Tata Letak yang Didukung fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive
Contoh Lihat contoh amp-ad di AMP By Example.

Perilaku

Iklan dimuat seperti semua resource lainnya dalam dokumen AMP, dengan elemen kustom khusus yang disebut <amp-ad>. Tidak ada JavaScript yang disediakan jaringan iklan yang diizinkan untuk dijalankan di dalam dokumen AMP. Sebagai gantinya, AMP runtime memuat iframe dari asal yang berbeda (melalui sandbox iframe) sebagai dokumen AMP dan menjalankan JavaScript jaringan iklan di dalam sandbox iframe tersebut.

<amp-ad> membutuhkan nilai lebar dan tinggi yang akan ditentukan sesuai aturan jenis tata letaknya. Argumen type diperlukan untuk memilih jenis jaringan iklan yang akan ditampilkan. Semua atribut data-* pada tag ini otomatis diteruskan sebagai argumen ke kode yang nantinya merender iklan. Atribut data- apa saja yang diperlukan untuk jenis jaringan tertentu bergantung pada, dan harus didokumentasikan bersama, jaringan iklannya.

Contoh: Menampilkan beberapa iklan

<amp-ad type="a9"
  data-amzn_assoc_ad_mode="auto"
  data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
  data-recomtype="async"
  data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"
    width="300"
    height="250"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
  </amp-ad>
  <amp-ad width="300"
    height="250"
    type="industrybrains"
    data-width="300"
    data-height="250"
    data-cid="19626-3798936394">
  </amp-ad>
  <amp-embed type="taboola"
    width="400"
    height="300"
    layout="responsive"
    data-publisher="amp-demo"
    data-mode="thumbnails-a"
    data-placement="Ads Example"
    data-article="auto">
  </amp-embed>
Buka cuplikan ini di playground

Atribut

type (wajib) Menentukan ID untuk jaringan iklan. Atribut type memilih template yang akan digunakan untuk tag iklan.
src (opsional) Gunakan atribut ini untuk memuat tag skrip untuk jaringan iklan yang ditentukan. Atribut ini dapat digunakan untuk jaringan iklan yang memerlukan persis satu tag skrip untuk disisipkan di halaman. Nilai src harus memiliki awalan yang diizinkan untuk jaringan iklan yang ditentukan, dan nilai ini harus menggunakan protokol https.
data-foo-bar Sebagian besar jaringan iklan memerlukan konfigurasi lebih lanjut, yang dapat diteruskan ke jaringan menggunakan atribut data- HTML. Nama parameter tunduk pada tanda pisah atribut data standar untuk konversi camel case. Misalnya, "data-foo-bar" akan dikirim ke iklan untuk dikonfigurasi sebagai "fooBar". Lihat dokumentasi untuk jaringan iklan tempat atribut dapat digunakan.
data-vars-foo-bar Atribut yang dimulai dengan data-vars- dicadangkan untuk var amp-analytics.
json (opsional) Gunakan atribut ini untuk meneruskan konfigurasi ke iklan sebagai objek JSON kompleks arbitrer. Objek diteruskan ke iklan apa adanya tanpa penyesuaian pada namanya.
data-consent-notification-id (opsional) Jika disediakan, amp-user-notification harus dikonfirmasi dengan ID-HTML yang diberikan hingga "ID klien AMP" untuk pengguna tersebut (mirip dengan cookie) diteruskan ke iklan. Ini berarti rendering iklan ditunda sampai pengguna mengonfirmasi notifikasi.
data-loading-strategy (ostional) Menginstruksikan iklan untuk mulai memuat ketika iklan berada dalam sejumlah viewport yang ditentukan, dari viewport saat ini. Tanpa atribut data-loading-strategy, jumlahnya adalah 3 secara default. Anda dapat menentukan nilai mengambang dalam rentang [0, 3](Jika tidak ditentukan, nilai akan ditetapkan ke 1.25). Gunakan nilai yang lebih kecil untuk mendapatkan tingkat visibilitas yang lebih tinggi (iklan lebih berpeluang terlihat, setelah dimuat), tetapi dengan risiko menghasilkan jumlah tayangan yang lebih sedikit (artinya, lebih sedikit iklan yang dimuat). Jika atribut ini ditentukan tetapi nilainya dibiarkan kosong, sistem akan menetapkan nilai mengambang, yang mengoptimalkan visibilitas tanpa memengaruhi jumlah tayangan secara drastis. Perhatikan, menentukan prefer-viewability-over-views sebagai nilai juga otomatis mengoptimalkan visibilitas.
data-ad-container-id (opsional) Memberitahukan ID komponen container kepada iklan saat terjadi percobaan untuk menciutkan komponen. Komponen container harus berupa komponen <amp-layout> yang merupakan induk dari iklan. Jika data-ad-container-id ditetapkan, dan komponen container <amp-layout> ditemukan, AMP runtime akan mencoba menciutkan komponen container, bukan komponen iklan, saat tidak ada isian. Fitur ini berguna saat indikator iklan ada.
atribut umum Elemen ini mencakup atribut umum yang diperluas ke komponen AMP.

Placeholder

Secara opsional, amp-ad mendukung elemen turunan dengan atribut placeholder. Jika didukung oleh jaringan iklan, elemen ini diperlihatkan hingga iklan tersedia untuk ditampilkan. Pelajari lebih lanjut di Placeholder & Fallback.

<amp-ad width=300 height=250
    type="foo"&gt;
    <div placeholder>Loading ...</div>
</amp-ad>

Tidak ada iklan yang tersedia

Jika tidak ada iklan yang tersedia untuk slot, AMP akan mencoba menciutkan elemen amp-ad (artinya, menetapkan elemen ke display: none). AMP menentukan bahwa operasi ini dapat dijalankan tanpa memengaruhi posisi scroll pengguna. Jika sedang berada di viewport aktif, iklan tidak akan diciutkan karena hal tersebut dapat memengaruhi posisi scroll pengguna; namun, jika berada di luar viewport aktif, iklan akan diciutkan.

Dalam kasus upaya menciutkan gagal. Komponen amp-ad mendukung elemen turunan dengan atribut fallback. Jika elemen fallback tersedia, elemen fallback yang disesuaikan akan ditampilkan. Jika tidak, AMP akan menerapkan fallback default.

Contoh dengan fallback:

<amp-ad width=300 height=250 type="foo">
  <div fallback>No ad for you</div>
</amp-ad>

Menayangkan iklan video

Ada 3 cara untuk memonetisasi video di AMP dengan iklan video:

  1. AMP secara native mendukung sejumlah pemutar video seperti BrightCove, DailyMotion, dll. yang dapat memonetisasi iklan. Untuk daftar lengkapnya, lihat komponen media.

  2. Gunakan komponen amp-ima-video yang dilengkapi dengan IMA SDK dan pemutar video HTML5 built-in

  3. Jika Anda menggunakan pemutar video yang tidak didukung di AMP, Anda dapat menayangkan pemutar kustom menggunakan amp-iframe. Saat menggunakan pendekatan amp-iframe:

    • Pastikan ada poster jika memuat pemutar di viewport pertama. Detail.
    • Video dan poster harus ditayangkan melalui HTTPS.

Menjalankan iklan dari domain kustom

AMP mendukung pemuatan iframe bootstrap yang digunakan untuk memuat iklan dari domain kustom seperti domain Anda sendiri.

Untuk mengaktifkan ini, salin file remote.html ke server web Anda. Selanjutnya, tambahkan tag meta berikut ke file AMP Anda:

<meta name="amp-3p-iframe-src" content="https://assets.your-domain.com/path/to/remote.html">

Atribut content tag meta adalah URL mutlak bagi salinan file remote.html di server web Anda. URL ini harus menggunakan skema "https". URL ini tidak boleh berada pada asal yang sama dengan file AMP Anda. Misalnya, jika Anda menghosting file AMP di www.example.com, URL ini tidak boleh ada di www.example.com, tetapi boleh di something-else.example.com. Lihat “Kebijakan asal iframe” untuk penjelasan selengkapnya tentang asal iframe yang diizinkan.

Keamanan

Validasi data yang masuk sebelum meneruskannya ke fungsi draw3p, untuk memastikan bahwa iframe hanya menjalankan fungsi yang diharapkan. Hal ini penting khususnya pada jaringan iklan yang mengizinkan injeksi JavaScript kustom.

iframe juga harus menegaskan bahwa mereka hanya di-iframe-kan ke asal tempat mereka diharapkan untuk di-iframe-kan. Asal tersebut adalah:

  • asal Anda sendiri
  • https://cdn.ampproject.org untuk cache AMP

Dalam kasus cache AMP, Anda juga harus memeriksa apakah "asal sumber" (asal dokumen yang ditayangkan oleh cdn.ampproject.org) merupakan salah satu asal Anda.

Penerapan asal dapat dilakukan dengan argumen ke-3 pada draw3p dan harus dilakukan menggunakan perintah allow-from untuk dukungan browser lengkap.

Memperkaya konfigurasi iklan masuk

Konfigurasi ini sepenuhnya opsional: Terkadang, permintaan iklan perlu diperkaya sebelum permintaan iklan dibuat ke server iklan.

Jika jaringan iklan Anda mendukung fast fetch, gunakan Real Time Config (RTC). (Sebagai contoh, integrasi DoubleClick dan AdSense keduanya mendukung fast fetch dan RTC)

Jika jaringan iklan Anda menggunakan delayed fetch, Anda dapat meneruskan callback ke panggilan fungsi draw3p dalam file remote.html. Callback ini akan menerima konfigurasi yang masuk sebagai argumen pertama, kemudian menerima callback lain sebagai argumen kedua (Disebut done pada contoh di bawah). Callback ini harus dipanggil dengan konfigurasi yang telah diperbarui agar rendering iklan dapat dilanjutkan.

Contoh:

draw3p(function(config, done) {
  config.targeting = Math.random() > 0.5 ? 'sport' : 'fashion';
  // Don't actually call setTimeout here. This should only serve as an
  // example that is OK to call the done callback asynchronously.
  setTimeout(function() {
    done(config);
  }, 100)
}, ['allowed-ad-type'], ['your-domain.com']);

Penataan gaya

Elemen <amp-ad> tidak dengan sendirinya memiliki atau ditempatkan dalam container dengan CSS yang ditetapkan ke position: fixed (kecuali amp-lightbox). Hal ini karena implikasi UX dari iklan overlay sehalaman penuh. Anda dapat mempertimbangkan untuk mengizinkan format iklan serupa di masa mendatang dalam container yang dikontrol AMP yang mempertahankan invarian UX tertentu.

Validasi

Lihat aturan amp-ad dalam spesifikasi validator AMP.

Jaringan iklan yang didukung

Jenis sematan yang didukung

Perlu bantuan lainnya?

Anda telah membaca dokumen ini belasan kali, tetapi belum semua pertanyaan Anda terjawab? Mungkin orang lain merasakan hal yang sama. Berinteraksilah dengan mereka di Stack Overflow.

Kunjungi Stack Overflow
Menemukan bug atau ada fitur yang kurang?

Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.

Kunjungi GitHub