amp-ad

<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

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>

Atribut

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

• A8
• A9
• AccessTrade
• Adblade
• AdButler
• Adform
• Adfox
• Ad Generation
• Adhese
• Adincube
• ADITION
• Adman
• AdmanMedia
• Admixer
• AdOcean
• AdPicker
• AdPlugg
• Adpon
• AdReactor
• AdSense
• AdSensor
• AdsNative
• AdSpeed
• AdSpirit
• AdStir
• AdTech
• AdThrive
• AdUnity
• Ad Up Technology
• Adventive
• Adverline
• Adverticum
• AdvertServe
• Adyoulike
• Affiliate-B
• AJA
• AMoAd
• AppNexus
• AppVador
• Atomx
• Baidu
• BeOpinion
• Bidtellect
• brainy
• Broadstreet Ads
• CA A.J.A. Infeed
• CA-ProFit-X
• Cedato
• Chargeads
• Colombia
• Connatix
• Content.ad
• Criteo
• CSA
• CxenseDisplay
• Dianomi
• Directadvert
• DistroScale
• Dot and Media
• Doubleclick
• eADV
• Epeex
• E-Planning
• Ezoic
• Felmat
• FlexOneELEPHANT
• FlexOneHARRIER
• Flite
• fluct
• FreeWheel
• Fusion
• GenieeSSP
• Giraff
• GMOSSP
• GumGum
• Holder
• I-Mobile
• Imonomy
• iBillboard
• Imedia
• Improve Digital
• Index Exchange
• Industrybrains
• InMobi
• Innity
• Kargo
• Kiosked
• Kixer
• Kuadio
• Ligatus
• LockerDome
• LOKA
• MADS
• MANTIS
• Media.net
• MediaImpact
• Mediavine
• Medyanet
• Meg
• MicroAd
• MixiMedia
• Mixpo
• Monetizer101
• mox
• myTarget
• myWidget
• Nativo
• Navegg
• Nend
• NETLETIX
• Noddus
• Nokta
• OneAD
• OnNetwork
• Open AdStream (OAS)
• OpenX
• Pixels
• plista
• polymorphicAds
• popin
• Pressboard
• PromoteIQ
• PubGuru
• PubMatic
• Pubmine
• PulsePoint
• Purch
• Rambler&Co
• RbInfoxSg
• Realclick
• recomAD
• Red for Publishers
• Relap
• Revcontent
• RevJet
• Rubicon Project
• RUNative
• SAS CI 360 Match
• Sekindo
• Sharethrough
• Sklik
• SlimCut Media
• Smart AdServer
• smartclip
• sogou Ad
• Sortable
• SOVRN
• Speakol
• SpotX
• SunMedia
• Swoop
• TcsEmotion
• Teads
• torimochi
• TripleLift
• Trugaze
• UZOU
• ValueCommerce
• video intelligence
• Videonow
• Viralize
• UAS
• ucfunnel
• Unruly
• VMFive
• Webediads
• Weborama
• Widespace
• Wisteria
• WPMedia
• Xlift
• Yahoo
• YahooJP
• Yandex
• Yengo
• Yieldbot
• Yieldmo
• Yieldone
• Yieldpro
• Zedo
• Zucks

Jenis sematan yang didukung

• 24smi
• Bringhub
• Dable
• Engageya
• Epeex
• Insticator
• Jubna
• Outbrain
• Postquare
• PubExchange
• Smi2
• Taboola
• Zen
• ZergNet