Berikut adalah contoh kode lengkap untuk membuat Tag Google Publisher (GPT) untuk penerapan desktop dan seluler. Gunakan Pembuat Tag Google untuk membuat tag secara otomatis.
Developer dan yang memerlukan penerapan GPT lanjutan, lihat referensi API dan contoh penerapan (seperti pemuatan lambat).
Kode contoh Tag Google Publisher
Ada dua bagian kode yang diterapkan untuk GPT:
- Konfigurasi GPT ada di
<head>halaman web. - Panggilan untuk setiap slot iklan tertentu masuk pada bagian
<body>yang relevan.
Contoh ini untuk tujuan informasi, dan sebaiknya Anda meminta developer untuk menerapkan kode di situs Anda.
Konfigurasi GPT
Contoh kode berikut, termasuk memanggil library JavaScript GPT, menentukan slot iklan, penargetan nilai kunci, dan lainnya.
1 |
<html> |
2 |
<head> |
3 |
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> |
4 |
<script> |
5 |
window.googletag = window.googletag || {cmd: []}; |
6 |
</script> |
|
Baris 3-6: memuat library GPT yang digunakan oleh Ad Manager secara asinkron, menggunakan SSL/HTTPS. Inilah tempat perancangan antrean perintah yang menangani berbagai fungsi (umumnya, panggilan iklan), agar ditangani secara asinkron. Anda tidak perlu mengedit bagian kode ini. |
|
| 7 | <script> |
| 8 | googletag.cmd.push(function() { |
| 9 | googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0") |
|
Baris 9:
|
|
10 |
.addService(googletag.pubads()) |
11 |
.setTargeting("interests", ["sports", "music", "movies"]); |
12 |
googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1") |
13 |
.addService(googletag.pubads()) |
14 |
.setTargeting("gender", "male") |
| 15 | .setTargeting("age", "20-30"); |
|
Baris 11, 14, dan 15: menetapkan penargetan nilai kunci tingkat slot dengan Pelajari lebih lanjut cara menetapkan penargetan dan ukuran dengan GPT. |
|
| 16 | googletag.pubads().setTargeting("topic","basketball"); |
|
Baris 16: Saat mengonfigurasi penargetan dengan nilai kunci tingkat halaman, semua slot iklan mewarisi penargetan ini. Layaknya nilai kunci tingkat slot, Anda dapat mengaitkan beberapa nilai dengan 1 kunci: ( |
|
| 17 | googletag.pubads().enableSingleRequest(); |
|
Baris 17: |
|
| 18 | googletag.enableServices(); |
| 19 | }); |
20 |
</script> |
21 |
</head> |
22 |
<body> |
23 |
<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px"> |
|
Baris 23 (opsional): Jika menggunakan tag berbagai ukuran, sebaiknya hapus baris ini (jika ukuran elemen menggunakan ukuran materi iklan yang dipilih saat dirender) atau buat kedua dimensi agar cukup besar untuk menampung materi iklan valid yang paling besar. Untuk tag iklan berukuran tunggal, gunakan parameter ini untuk memperluas elemen penampung hingga materi iklan dimuat, sehingga elemen halaman lainnya tidak berubah saat materi iklan dirender. |
|
| 24 | <script> |
| 25 | googletag.cmd.push(function() { |
| 26 | googletag.display("div-gpt-ad-123456789-0"); |
| 27 | }); |
| 28 | </script> |
29 |
</div> |
30 |
<div id="div-gpt-ad-123456789-1"> |
31 |
<script> |
32 |
googletag.cmd.push(function() { |
|
Baris 8, 25, dan 32: Panggilan fungsi ditambahkan ke antrean perintah agar diproses secara asinkron saat halaman dimuat. |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
|
Baris 9, 12, 23, 26, 30, dan 33: Meskipun angka acak digunakan di sini, ini bukanlah cara GPT mengenali permintaan iklan secara unik. Tindakan ini dilakukan di balik layar dengan library GPT. Selain itu, nama ini mungkin sama di setiap halaman selama tidak ada beberapa penggunaan nama div yang sama di halaman yang sama. Pelajari struktur inventaris Ad Manager, hierarki unit iklan, dan cara unit iklan mewarisi penargetan lebih lanjut di ringkasan inventaris. |
|
| 34 | }); |
| 35 | </script> |
| 36 | </div> |
| 37 | </body> |
| 38 | </html> |
Jika Anda tidak dapat mengedit header halaman Anda
Anda dapat menggunakan GPT tanpa mengubah <header> situs Anda.
Opsi 1: GPT inline
Gunakan tag inline untuk menentukan tempat unit iklan muncul pada halaman, bukan menggunakan header halaman. Dengan tag inline, seluruh penetapan dan permintaan slot iklan GPT, termasuk pemuatan library GPT, berada di tag <script> tunggal.
Karena tag iklan menggunakan library JavaScript GPT, Anda harus menyertakan kode yang memuat library tersebut sebelum menyertakan kode tag iklan.
Contoh GPT inline ini tidak mendukung SRA.
Memanggil library JavaScript GPT
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
</script>
Contoh tag iklan inline
<div id="div-gpt-ad-1234567891234-0">
<script>
googletag.cmd.push(function() {
googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
.addService(googletag.pubads())
.setTargeting("Gender", "Male");
googletag.enableServices();
googletag.display('div-gpt-ad-1234567891234-0');
});
</script>
</div>
Opsi 2: masukkan semua kode ke isi halaman web
Gunakan penerapan GPT konvensional, namun tempatkan penetapan slot iklan di bagian isi HTML, bukan di header.
Kode yang memuat library dan menetapkan slot iklan harus dipanggil sebelum Anda meminta iklan untuk slot tersebut. Karena kode tersebut tidak tersegmentasi ke bagian header dan isi halaman dan Anda harus mengelola urutannya, pendekatan ini menjadi lebih rumit, namun memberikan fleksibilitas SRA.
Membuat Permintaan Tanpa Tag tanpa JavaScript
Permintaan Tanpa Tag dapat digunakan sebagai pengganti tag iklan untuk meminta kode materi iklan mentah yang diproses di Ad Manager. Permintaan Tanpa Tag umumnya digunakan saat tampilan dan penguraian kustom diperlukan, seperti decoder atau lingkungan lainnya tanpa dukungan SDK atau pemberian tag Google.