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:
|
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:
|
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:
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:
|
Validasi
Lihat aturan iklan otomatis AMP dalam spesifikasi validator AMP.
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