Cara Membuat Unit Iklan DFP yang Responsif

Diterbitkan: 2016-01-22
iklan responsif google dfp - contoh tag doubleclick

Posting ini terakhir diperbarui pada 31 Agustus 2021

Jadi Anda memiliki tema responsif dan sekarang Anda ingin pindah ke Google Ad Manager (GAM) dari AdSense. Hal pertama yang Anda lihat adalah tidak ada unit iklan yang lebih responsif seperti yang biasanya Anda temukan di AdSense.

Petunjuk dukungan Google mungkin sedikit rumit atau rumit. Jadi hari ini saya akan menunjukkan kepada Anda bagaimana Anda dapat membuat kode GAM responsif dalam beberapa langkah sederhana.

Menyesuaikan kode DFP untuk membuat iklan responsif Google Ad Manager bukanlah tugas yang mudah.Jika Anda tidak memiliki pengalaman pengkodean, akan lebih bijaksana jika para ahli melakukannya untuk Anda dengan benar pertama kali.Anda tidak ingin mengambil risiko kehilangan pendapatan iklan Anda!

Jika Anda memerlukan bantuan , hubungi kami di sini.

Sebelum kita mulai, pastikan untuk melakukan hal berikut:

  1. Siapkan inventaris Anda. Konfigurasikan semua ukuran yang relevan per unit iklan. Baca: Praktik Terbaik Integrasi Adsense dan GAM
  2. Lihat tutorial kami tentang cara membuat beberapa tag Pengelola Iklan di sini: https://youtu.be/s74dMDzczyc
  3. Sekarang buat dua file teks dan simpan. Gunakan editor teks yang bagus (saya lebih suka menggunakan Notepad++ karena gratis dan mudah digunakan).
  4. Buat satu untuk kepala dan satu lagi untuk tag tubuh.
  5. Simpan tag tubuh.
  6. Buka file head.txt yang telah Anda buat.

Membuat tag kepala responsif

Langkah 1: Buka head.txt di Notepad ++.Pertama, mari kita lakukan langkah demi langkah. Kode tajuk Anda akan terlihat seperti ini:

<!– Mulai Tag GPT –>

<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>

<skrip>

jendela.googletag = jendela.googletag || {cmd: []};

googletag.cmd.push(fungsi() {

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336.280],[300.250],[320.100],[320,50]], 'div-gpt-ad-9386839-3')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300.250],[320,50],[320.100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</skrip>

<!– Akhiri Tag GPT –>

Langkah 2: Saya telah menyorot sepotong kode di sana:

googletag.cmd.push(fungsi() {

Anda harus menambahkan sedikit kode setelah garis yang disorot. Di bawah ini adalah kode yang diberikan yang harus Anda tambahkan. Rekatkan sebanyak mungkin contoh (salinan) yang sesuai dengan rute mana pun yang Anda pilih dari berikut ini:

  • Jumlah peta ukuran. Anda dapat menggunakan kembali peta ukuran yang sama di beberapa unit iklan jika berlaku
  • Jumlah unit iklan yang Anda miliki
  • Jumlah unit iklan yang ingin dibuat responsif
var mappingadunitname = googletag.sizeMapping().

tambahUkuran([992, 0], [[970, 90], [728, 90], [300, 250], [1, 1]]). //Desktop

tambahUkuran([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablet

tambahUkuran([320, 0], [[320, 50], [320, 100], [300, 250], [1, 1]]). // seluler

tambahUkuran([0, 0], [[320, 50], [1, 1]]). //lainnya

membangun();

Langkah 3: Saya telah menyorot sedikit kode lainnya.Ini adalah nama pemetaan yang akan kami sampaikan di unit iklan sebentar lagi. Saya lebih suka membuatnya seperti ini,mappingadunitname jadi untuk contoh kita di atas, saya memilih untuk membuat 1 peta ukuran per unit, yang berarti kita membutuhkan 4 instance dan meletakkannya setelah:

googletag.cmd.push(fungsi() {

Langkah 4: Setelah menambahkan pemetaan, kode tajuk Anda akan terlihat seperti ini:

<!– Mulai Tag GPT –>

<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>

<skrip>

jendela.googletag = jendela.googletag || {cmd: []};

googletag.cmd.push(fungsi() {

var mappingheaderad1 = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //Desktop

tambahUkuran([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablet

tambahUkuran([0, 0], [1, 1]). //lainnya

membangun();

var mappingcontentad1 = googletag.sizeMapping().

tambahUkuran([992, 0], [[728, 280], [728, 90], [1, 1]]). //Desktop

tambahUkuran([768, 0], [[728, 280], [728, 90], [1, 1]]). //tablet

tambahUkuran([320, 0], [[320, 50], [320, 100], [1, 1]]). // seluler

tambahUkuran([0, 0], [[320, 50], [1, 1]]). //lainnya

membangun();

var mappingcontentad2 = googletag.sizeMapping().

tambahUkuran([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //Desktop

tambahUkuran([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tablet

tambahUkuran([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). // seluler

tambahUkuran([0, 0], [[300, 250], [1, 1]]). //lainnya

membangun();

var mappingrightrail1 = googletag.sizeMapping().

tambahUkuran([992, 0], [[300, 250], [1, 1]]). //Desktop

tambahUkuran([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //tablet

tambahUkuran([0, 0], [1, 1]). //lainnya

membangun();

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336.280],[300.250],[320.100],[320,50]], 'div-gpt-ad-9386839-3')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300.250],[320,50],[320.100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</skrip>

<!– Akhiri Tag GPT –>

Langkah 5: Sekarang satu langkah terakhir: Anda perlu menentukan atau menetapkan pemetaan ukuran untuk setiap unit iklan.Ayo ambil satu di sini dan kemudian saya akan menunjukkan kepada Anda apa yang harus ditambahkan dan di mana.

googletag.defineSlot('/1234567/RightRail_Ad1', [[300.250],[320,50],[320.100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

Langkah 6: Sekarang Anda perlu menambahkan potongan kode ini .defineSizeMapping(mappingadunitname)antara bagian biru dan merah dari kode di atas. yaitu sebelum titik

Yang penting di sini adalah kata-kata dalam tanda kurung harus sesuai dengan peta ukuran yang ingin Anda tambahkan di dalam unit iklan. Sebagai contoh kita di sini, RightRail_Ad1 seharusnya memiliki tampilan seperti ini:

googletag.defineSlot('/1234567/RightRail_Ad1', [[300.250],[320,50],[320.100]], 'div-gpt-ad-9386839-4')

.defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

Langkah 7: Menambahkan pemetaan serupa untuk semua unit iklan lainnya akan memberi Anda kode akhir.

<!– Mulai Tag GPT –>

<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>

<skrip>

jendela.googletag = jendela.googletag || {cmd: []};

googletag.cmd.push(fungsi() {

var mappingheaderad1 = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //Desktop

tambahUkuran([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablet

tambahUkuran([0, 0], [1, 1]). //lainnya

membangun();

var mappingcontentad1 = googletag.sizeMapping().

tambahUkuran([992, 0], [[728, 280], [728, 90], [1, 1]]). //Desktop

tambahUkuran([768, 0], [[728, 280], [728, 90], [1, 1]]). //tablet

tambahUkuran([320, 0], [[320, 50], [320, 100], [1, 1]]). // seluler

tambahUkuran([0, 0], [[320, 50], [1, 1]]). //lainnya

membangun();

var mappingcontentad2 = googletag.sizeMapping().

tambahUkuran([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //Desktop

tambahUkuran([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tablet

tambahUkuran([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). // seluler

tambahUkuran([0, 0], [[300, 250], [1, 1]]). //lainnya

membangun();

var mappingrightrail1 = googletag.sizeMapping().

tambahUkuran([992, 0], [[300, 250], [1, 1]]). //Desktop

tambahUkuran([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //tablet

tambahUkuran([0, 0], [1, 1]). //lainnya

membangun();

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.defineSizeMapping(mappingheaderad1).addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.defineSizeMapping(mappingcontentad1).addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336.280],[300.250],[320.100],[320,50]], 'div-gpt-ad-9386839-3')

.defineSizeMapping(mappingcontentad2).addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300.250],[320,50],[320.100]], 'div-gpt-ad-9386839-4')

.defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</skrip>

<!– Akhiri Tag GPT –>

Catatan: Bagian dari kode disorot untuk menekankan Peta Ukuran apa yang digunakan untuk unit iklan mana.

Langkah 8: Sekarang mari kita lihat Pemetaan Ukuran:

var mappingcontentad2 = googletag.sizeMapping().

tambahUkuran([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //Desktop

tambahUkuran([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tablet

tambahUkuran([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). // seluler

tambahUkuran([0, 0], [[300, 250], [1, 1]]). //lainnya

membangun();

Kode berwarna merah menentukan lebar dan tinggi browser. Biasanya tinggi tidak penting karena hanya dipertimbangkan ketika kita memiliki lebar yang sama untuk 2 baris pada kode di atas.

Langkah 9: Sekarang kami mengatakan ini di baris pertama:

  • Jika lebar browser sama atau lebih dari 992px, harap tampilkan ukuran iklan 728×280 atau 728×90 atau 336×280 atau 300×250 atau 1×1

Dan pada baris terakhir kami mengatakan:

  • Jika lebar browser sama atau lebih dari 320px, harap tampilkan ukuran iklan 320×50 atau 320×100 atau 320×200 atau 300×250 atau 1×1

No.s, 992px, 768px, dan 320px akan berfungsi untuk sebagian besar situs web karena mengikuti ukuran konvensional browser desktop, tablet, dan seluler.

Namun, jika Anda memiliki situs web dengan tema tablet dan seluler, Anda dapat bertanya kepada pengembang Anda berapa ukuran browser yang memicu transisi tema dan kemudian Anda dapat menambahkan ukuran tersebut sebagai pengganti masing-masing 768px dan 320px.

Apa strategi pendapatan terprogram Anda untuk tahun 2019?

Di MonetizeMore, kami membantu penayang mendapatkan lebih banyak pendapatan dari inventaris iklan mereka yang ada.Kami adalah Mitra Google Publishing terkemuka dan memiliki rangkaian solusi monetisasi penayang yang membantu klien kami mencapai target pendapatan dan menyelesaikan masalah operasi iklan mereka.

Meskipun sangat mungkin untuk menyiapkan sendiri unit iklan responsif DFP, penting untuk mempertimbangkan biaya peluang Anda.Apakah layak menghabiskan waktu yang Anda habiskan untuk mengembangkan bisnis Anda dan berisiko kehilangan pendapatan dari penyiapan yang salah?

Jika Anda tertarik mendapatkan bantuan untuk menyiapkan unit iklan responsif DFP.Daftar akun Premium di MonetizeMore hari ini!

uangkan lebih banyak pengoptimalan pendapatan terprogram

Bacaan Terkait:

  • AdSense Menawarkan Unit Iklan Responsif
  • Jenis Iklan Seluler Teratas untuk 2016
  • Manfaat Laman Seluler yang Dipercepat Doubleclick untuk Penayang
  • Cara membuat Penayang Siap saat Pengeluaran Iklan Seluler Melampaui Desktop
  • Doubleclick Now Menawarkan Pelacakan Lintas Perangkat & Periklanan Asli untuk Pengiklan & Penerbit Seluler