AMP

Important: this documentation is not applicable to your currently selected format stories!

amp-auto-ads

Description

Dynamically injects ads into an AMP page by using a remotely-served configuration file.

 

Required Scripts

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

Memasukkan iklan secara dinamis ke halaman AMP dengan menggunakan file konfigurasi yang ditayangkan secara jarak jauh.

Ketersediaan Eksperimental
Skrip yang Diperlukan <script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
Tata Letak yang Didukung T/A

Perilaku

Dengan jumlah penempatan valid yang memadai (yang disediakan dalam konfigurasi), amp-auto-ads mencoba memasukkan iklan tambahan dengan tetap mematuhi sejumlah batasan yang ditetapkan oleh jaringan iklan. Batasan tersebut akan membatasi:

  • Jumlah total iklan yang dapat dimasukkan
  • Jarak minimum yang harus ada di antara iklan yang berdekatan

Selain itu, iklan hanya boleh dimasukkan di lokasi pada halaman yang tidak menyebabkan alur ulang yang tidak dapat diterima (sebagaimana ditentukan oleh attemptChangeSize).

Tag <amp-auto-ads> harus ditempatkan sebagai turunan pertama dari <body>.

Jenis jaringan iklan dan informasi tambahan apa pun (yang diperlukan oleh jaringan iklan) harus ditentukan di tag.

<amp-auto-ads
    type="adsense"
    data-ad-client="ca-pub-5439573510495356">
  </amp-auto-ads>

Jaringan iklan yang didukung

Atribut

type (wajib) ID untuk jaringan iklan.
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 jaringan iklan tentang atribut mana saja yang dapat digunakan.
atribut umum Elemen ini mencakup atribut umum yang diperluas ke komponen AMP.

Spesifikasi Konfigurasi

Konfigurasi menentukan lokasi pada halaman tempat <amp-auto-ads> dapat menempatkan iklan. Konfigurasi ini diambil dari jaringan iklan pihak ketiga pada URL yang ditentukan di ad-network-config.js. Konfigurasi tersebut harus berupa objek JSON serial yang cocok dengan definisi ConfigObj yang dideskripsikan di bawah.

Konfigurasi Contoh

Contoh berikut menentukan bahwa iklan harus diposisikan tepat setelah semua elemen <P class='paragraph'> yang berada dalam <DIV id='domId'> ketiga di halaman itu. Iklan yang ditempatkan di salah satu posisi tersebut harus berjenis BANNER dan memiliki margin atas 4 piksel dan margin bawah 10 piksel.

{
  "placements": [
    {
      "anchor": {
        "selector": "DIV#domId",
        "index": 2,
        "sub": {
          "selector": "P.paragraph",
          "all": true,
        },
      },
      "pos": 4,
      "type": 1,
      "style": {
        "top_m": 5,
        "bot_m": 10,
      },
    },
  ]
}

Definisi Objek

ConfigObj

Kolom yang perlu ditentukan dalam objek konfigurasi:

Nama Kolom Jenis Deskripsi
placements Array<!PlacementObj> Kolom wajib yang menunjukkan tempat potensial di mana iklan dapat dimasukkan di halaman.
attributes Objek<string, string> Kolom opsional yang menentukan pemetaan dari nama atribut ke nilai atribut yang akan diterapkan ke semua elemen <amp-ad> yang dimasukkan menggunakan konfigurasi ini. Hanya nama atribut berikut yang diizinkan:
  • type
  • layout
  • data-* (artinya, sembarang atribut data)
adConstraints AdConstraintsObj Kolom opsional yang menentukan batasan yang harus digunakan saat menempatkan iklan di halaman. Jika tidak ditentukan, maka amp-auto-ads akan mencoba menggunakan batasan default yang ditentukan dalam [ad-network-config.js](0,1/ad-network-config.js).

PlacementObj

Kolom yang perlu ditentukan dalam objek konfigurasi placements:

Nama Kolom Jenis Deskripsi
anchor AnchorObj Kolom wajib yang menyediakan informasi yang digunakan untuk mencari elemen di halaman tempat posisi penempatan ditautkan.
pos RelativePositionEnum Kolom wajib yang menunjukkan posisi penempatan relatif terhadap elemen anchor-nya.
type PlacementTypeEnum Kolom wajib yang menunjukkan jenis penempatan.
style PlacementStyleObj Kolom opsional yang menunjukkan gaya yang harus diterapkan pada iklan yang dimasukkan dalam posisi penempatan ini.
attributes Objek<string, string> Kolom opsional yang menentukan pemetaan dari nama atribut ke nilai atribut yang akan diterapkan ke semua elemen <amp-ad> yang dimasukkan menggunakan penempatan ini. Atribut yang ditentukan di sini mengganti semua atribut dengan nama yang sama yang juga ditentukan pada ConfigObj induk. Hanya nama atribut berikut yang diizinkan:
  • jenis
  • tata letak
  • data-* (artinya, sembarang atribut data)

AnchorObj

Kolom yang perlu ditentukan dalam objek konfigurasi anchor:

Nama Kolom Jenis Deskripsi
selector string Kolom wajib yang menentukan pemilih CSS untuk memilih elemen pada level definisi anchor ini.
index angka Kolom opsional untuk menentukan indeks elemen yang dipilih oleh pemilih yang menjadi batas dari level definisi anchor ini. Secara default, nilainya ditetapkan ke 0 (jika kolom all ditetapkan ke false).
all boolean Diabaikan jika kolom index telah ditentukan. Jika ditetapkan ke true, semua elemen yang dipilih oleh pemilih harus disertakan; jika tidak tetapkan ke false.
min_c angka Kolom opsional yang menentukan panjang minimum properti textContent elemen agar dapat disertakan. Nilai defaultnya adalah 0.
sub AnchorObj Kolom opsional yang menentukan AnchorObj berulang yang akan memilih elemen dalam setiap elemen yang dipilih pada level definisi anchor ini.

PlacementStyleObj

Kolom yang perlu ditentukan dalam objek konfigurasi style:

Nama Kolom Jenis Deskripsi
top_m angka Kolom opsional yang menunjukkan margin atas dalam piksel yang harus dimiliki oleh iklan yang dimasukkan dalam posisi ini. Nilai defaultnya 0.
bot_m angka Kolom opsional yang menunjukkan margin bawah dalam piksel yang harus dimiliki oleh iklan yang dimasukkan dalam posisi ini. Nilai defaultnya 0.

RelativePositionEnum

Nilai ENUM untuk kolom pos dalam objek konfigurasi placements:

Nama Nilai Deskripsi
BEFORE 1 Iklan harus segera dimasukkan sebagai kerabat tepat sebelum anchor.
FIRST_CHILD 2 Iklan harus dimasukkan sebagai turunan pertama dari anchor.
LAST_CHILD 3 Iklan harus dimasukkan sebagai turunan terakhir dari anchor.
AFTER 4 Iklan harus dimasukkan sebagai kerabat tepat segera setelah anchor.

PlacementTypeEnum

Nilai ENUM untuk kolom type dalam objek konfigurasi placements:

Nama Nilai Deskripsi
BANNER 1 Penempatan mendeskripsikan posisi iklan banner.

AdConstraintsObj

Kolom yang perlu ditentukan dalam objek konfigurasi adConstraints:

Nama Kolom Jenis Deskripsi
initialMinSpacing string Kolom wajib yang menunjukkan jarak minimum iklan dari iklan lain yang sudah ada di halaman itu (baik yang ditempatkan secara manual atau ditempatkan sebelumnya oleh atribut amp-auto-ads) pada saat iklan dimasukkan. Nilai dinyatakan sebagai angka dengan prefiks satuan. Misalnya, "10px" berarti 10 piksel, atau "0.5vp" berarti setengah tinggi viewport. Nilai negatif tidak valid. Satuan yang didukung adalah:
  • px - piksel
  • vp - kelipatan dari tinggi viewport
Nilai ini hanya berlaku jika jumlah iklan yang sudah ada di halaman itu kurang dari adCount matcher yang ditentukan dalam kolom subsequentMinSpacing.
subsequentMinSpacing Array<!SubsequentMinSpacingObj> Kolom opsional yang menentukan jarak iklan yang harus diterapkan berdasarkan jumlah iklan yang sudah ada di halaman itu pada saat iklan dimasukkan.
maxAdCount angka Kolom wajib yang menentukan jumlah maksimum iklan yang dapat ditempatkan amp-auto-ads di halaman itu. Baik iklan yang ditempatkan secara manual maupun yang ditempatkan oleh atribut amp-auto-ads akan memengaruhi jumlah total ini. Misalnya, jika kolom ini ditetapkan ke 5 dan ada 3 iklan yang ditempatkan secara manual di halaman itu, maka amp-auto-ads bisa menempatkan maksimal 2 iklan tambahan.

SubsequentMinSpacingObj

Kolom yang perlu ditentukan dalam objek konfigurasi subsequentMinSpacing. Entri subsequentMinSpacing dapat digunakan untuk mengubah jarak yang diperlukan antara iklan tambahan berdasarkan jumlah iklan yang sudah ada di halaman itu. Sebagai contoh, perhatikan skenario berikut:

  • 2 iklan sudah ada di halaman
  • Kolom subsequentMinSpacing adalah: [ {adCount: 3, spacing: "500px"}, {adCount: 5, spacing: "1000px"}, ]

Pada awalnya, sudah ada 2 iklan di halaman itu, jadi tidak ada pemetaan yang cocok. Oleh karena itu, jarak minimum dalam objek AdConstraints didefaultkan ke initialMinSpacing. Atribut amp-auto-ads akan terus mencoba untuk menempatkan iklan hingga penempatan yang dapat digunakan habis tanpa melanggar adContraints. Setelah amp-auto-ads menempatkan iklan pertamanya, sekarang ada 3 iklan di halaman itu. Karena ada pemetaan untuk 3 (atau lebih) iklan dalam subsequentMinSpacing, jarak minimalnya sekarang menjadi 500 piksel. Hal ini akan berlaku hingga jumlah iklan di halaman itu mencapai 5 buah, karena adanya aturan 5 iklan. Memasukkan iklan ke-6 atau seterusnya akan mengharuskan dihapusnya iklan lain hingga setidaknya 1000 piksel.

Nama Kolom Jenis Deskripsi
adCount angka Kolom wajib. Jumlah minimum iklan yang sudah ada di halaman yang menyebabkan aturan ini berlaku (dengan asumsi tidak ada aturan lain yang lebih cocok). Lihat deskripsi di atas untuk penjelasan lebih lengkap.
spacing string Kolom wajib yang menentukan jarak minimum iklan yang berlaku ketika aturan ini terpenuhi berdasarkan adCount. Nilai dinyatakan sebagai angka dengan prefiks satuan. Misalnya, "10px" berarti 10 piksel, atau "0.5vp" berarti setengah tinggi viewport. Nilai negatif tidak valid. Satuan yang didukung adalah:
  • px - piksel
  • vp - kelipatan dari tinggi viewport

Validasi

Lihat aturan iklan otomatis AMP dalam spesifikasi validator AMP.

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