Menambahkan kode untuk iklan native

Jika memilih opsi Editor HTML & CSS untuk iklan native, Anda menambahkan kode HTML dan CSS untuk menyesuaikan dan memberi gaya iklan native Anda. Artikel ini memberikan tips dan sampel untuk menambahkan kode.

Materi iklan native yang dihasilkan dapat ditayangkan sebagai iklan tradisional (Materi iklan yang dikelola penayang untuk Dijamin Terprogram adalah satu-satunya iklan terprogram yang didukung). Untuk menayangkan materi iklan native baik sebagai iklan tradisional maupun semua jenis iklan terprogram, pilih opsi"Mulai dengan template dan sesuaikan" di Editor desain yang dipandu.

Sampel gaya native

Berikut contoh HTML dan CSS dengan gaya native untuk penempatan dalam feed yang dapat disesuaikan. Gaya native ini didasarkan pada format iklan native "posting bersponsor" dengan variabel Judul, Gambar, dan Isi.

Jenis kode Kode contoh

HTML dengan variabel

Jenis kode	Kode contoh
HTML dengan variabel	`<div class="sponsored-post"> <div class="thumbnail"></div> <div class="content"> <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1> <p>[%Body%]</p> <div class="attribution">SPONSORED</div> </div> </div>`
CSS dengan variabel	.sponsored-post { background-color: #fffdeb; font-family: sans-serif; padding: 10px 20px 10px 20px; } .content { overflow: hidden; } .thumbnail { width: 120px; height: 100px; float: left; margin: 0 20px 10px 0; background-image: url([%Image%]); background-size: cover; } h1 { font-size: 18px; margin: 0; } a { color: #0086b3; text-decoration: none; } p { font-size: 16px; color: #444; margin: 10px 0 10px 0; } .attribution { color: #fff; font-size: 9px; font-weight: bold; display: inline-block; letter-spacing: 2px; background-color: #ffd724; border-radius: 2px; padding: 4px; }


<div class="sponsored-post">
    <div class="thumbnail"></div>
    <div class="content">
        <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1>
        <p>[%Body%]</p>
        <div class="attribution">SPONSORED</div>
    </div>
</div>

CSS dengan variabel


.sponsored-post {
    background-color: #fffdeb;
    font-family: sans-serif;
    padding: 10px 20px 10px 20px;
}

.content {
    overflow: hidden;
}

.thumbnail {
    width: 120px;
    height: 100px;
    float: left;
    margin: 0 20px 10px 0;
    background-image: url([%Image%]);
    background-size: cover;
}

h1 {
    font-size: 18px;
    margin: 0;
}

a {
    color: #0086b3;
    text-decoration: none;
}

p {
    font-size: 16px;
    color: #444;
    margin: 10px 0 10px 0;
}

.attribution {
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    display: inline-block;
    letter-spacing: 2px;
    background-color: #ffd724;
    border-radius: 2px;
    padding: 4px;
}

Gaya native ini akan mengonversi komponen materi iklan native seperti ini:

Komponen	Contoh
Judul	30 Langkah Tercepat Mengembangkan Bisnis
Gambar	jobs.jpg
Isi	Menurut Bureau of Labor Statistics AS, pekerjaan ini akan berkembang dengan pesat dalam kurun waktu 10 tahun ke depan. Daftar ini mungkin mengejutkan Anda.

Dalam iklan native yang akan terlihat seperti ini:

Contoh iklan native

HTML

Tambahkan cuplikan HTML yang menunjukkan cara menampilkan iklan native Anda.

Anda mungkin harus berkolaborasi dengan developer web atau aplikasi untuk membuat kode.
HTML dapat menyertakan JavaScript di tag <script>.
Harap hanya menyertakan cuplikan yang relevan dengan iklan, karena menyertakan dokumen HTML yang lengkap akan membuat iklan tidak dapat ditampilkan di sebagian browser, termasuk Internet Explorer. Misalnya, jangan menyertakan tag <doctype> atau <html> — lihat contoh di atas.
Iklan native tidak mewarisi gaya dari halaman induk, namun Anda dapat mengimpor stylesheet eksternal dan font web dengan tag <link> di HTML.

Setelan Jendela Target mengontrol apakah iklan native akan dibuka di tab yang sama atau di jendela baru setelah diklik.

Iklan tradisional mewarisi setelan tingkat unit iklan.
Iklan terprogram mewarisi setelan tingkat jaringan.

Menyisipkan makro

Anda dapat mengklik Sisipkan makro dan menggunakan tombol berikut untuk membantu membuat HTML:

CacheBuster: Memastikan bahwa panggilan baru saja dilakukan ke server iklan setiap kali kode dijalankan, sehingga Anda dapat menghitung tayangan secara akurat. Pelajari CacheBuster lebih lanjut.
Klik (direkomendasikan): Melacak klik jika cuplikan kode tidak berisi karakter khusus. Pelajari klik lebih lanjut.
URL klik-tayang: Menentukan halaman landing materi iklan yang seharusnya muncul jika seseorang mengklik iklan. Pelajari URL Klik-tayang lebih lanjut.
Klik dengan konversi karakter: Melacak klik jika cuplikan kode Anda berisi karakter khusus (misalnya '&', '?', '%') pada URL klik-tayangnya. Pelajari klik dengan konversi karakter lebih lanjut.
Wrapper video: Wrapper yang berisi pemutar video untuk iklan native. Pelajari cara mengonfigurasi gaya video native lebih lanjut.

CSS

Memberikan kode CSS yang menunjukkan cara iklan native akan ditampilkan. Lihat contoh di atas.

Jika Anda memproses iklan native dengan ukuran dapat menyesuaikan, sebaiknya Anda tidak menggunakan penempatan positioning CSS absolut.

Apakah ini membantu?

Bagaimana cara meningkatkannya?

Menambahkan kode untuk iklan native

HTML

Menyisipkan makro

CSS

Apakah ini membantu?

Perlu bantuan lain?

Coba langkah-langkah selanjutnya berikut: