Halaman ini diterjemahkan oleh Cloud Translation API.

Mulai Menggunakan Tag Google Publisher

Tag Google Publisher (GPT) adalah library pemberian tag iklan untuk Google Ad Manager.

Anda dapat menggunakan GPT untuk membuat permintaan iklan secara dinamis. GPT mengambil detail penting seperti kode unit iklan, ukuran iklan, dan penargetan kustom, membuat permintaan, serta menampilkan iklan di halaman web.

Untuk mengetahui detail selengkapnya tentang GPT, lihat pusat bantuan Ad Manager.

Berikut beberapa contoh yang dapat Anda gunakan untuk memulai GPT. Jika Anda memerlukan bantuan lebih lanjut terkait GPT, lihat opsi dukungan.

Menampilkan iklan percobaan

Contoh berikut akan memandu Anda dalam membuat halaman pengujian yang menggunakan GPT untuk memuat iklan generik dari jaringan pengujian Google.

Kode lengkap untuk contoh ini dapat ditemukan di halaman contoh tampilkan iklan pengujian.

Membuat dokumen HTML dasar

Di editor teks, buat dokumen HTML biasa yang bernama hello-gpt.html.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Display a fixed-sized test ad." />
    <title>Display a test ad</title>
    <style></style>
  </head>
  <body>
    <script>
      googletag.cmd.push(() => {
        // Request and render an ad for the "banner-ad" slot.
        googletag.display("banner-ad");
      });
    </script>
  </body>
</html>

Memuat library GPT

Muat library GPT dengan menambahkan hal berikut ke <head> dokumen HTML.

Kode ini memuat library GPT dari https://securepubads.g.doubleclick.net/tag/js/gpt.js. Setelah dimuat sepenuhnya, library akan memproses perintah dalam antrean di objek googletag.

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
  <style></style>
</head>

Menentukan slot iklan

Tentukan slot iklan dan inisialisasi GPT menggunakan metode googletag.enableServices().

Kode ini memastikan terlebih dahulu objek googletag tersedia, lalu mengantrekan perintah yang membuat slot iklan dan mengaktifkan GPT.

Slot iklan dalam contoh ini akan memuat iklan berukuran 300x250 dari unit iklan yang ditentukan oleh jalur /6355419/Travel/Europe/France/Paris. Iklan akan ditampilkan dalam elemen <div id="banner-ad"> di isi halaman, yang akan ditambahkan berikutnya.
Jalur unit iklan mengikuti format /network-code/[parent-ad-unit-code/.../]ad-unit-code, dengan:
- network-code adalah ID unik untuk jaringan Ad Manager tempat unit iklan berada
- parent-ad-unit-code adalah kode dari semua unit iklan induk (hanya berlaku untuk unit iklan bukan tingkat atas)
- ad-unit-code adalah kode untuk unit iklan yang akan ditampilkan
Perhatikan bahwa semua kode unit iklan yang disertakan dalam jalur unit iklan harus mematuhi aturan pemformatan yang ditentukan oleh Ad Manager.
```
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
  <script>
    window.googletag = window.googletag || { cmd: [] };

    googletag.cmd.push(() => {
      // Define an ad slot for div with id "banner-ad".
      googletag
        .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "banner-ad")
        .addService(googletag.pubads());

      // Enable the PubAdsService.
      googletag.enableServices();
    });
  </script>
  <style></style>
</head>
```

Tentukan tempat iklan akan muncul

Tentukan tempat iklan akan muncul di halaman dengan menambahkan kode berikut ke <body> pada dokumen HTML.

Perhatikan bahwa ID <div> ini cocok dengan ID yang ditentukan saat menentukan slot iklan.

<body>
  <div id="banner-ad" style="width: 300px; height: 250px"></div>
  <script>
    googletag.cmd.push(() => {
      // Request and render an ad for the "banner-ad" slot.
      googletag.display("banner-ad");
    });
  </script>
</body>

Melihat pratinjau halaman pengujian

Simpan file hello-gpt.html dan buka di browser web. Setelah dimuat, halaman akan menampilkan iklan percobaan dalam isi halaman web.

Perhatian: Jika Anda tidak melihat iklan, pastikan ID div yang ditentukan dalam <head> halaman cocok dengan ID elemen <div> yang Anda tambahkan ke <body> halaman.

Tampilkan iklan Anda sendiri

Untuk menampilkan iklan Anda sendiri, gunakan file hello-gpt.html dari Tampilkan iklan pengujian, lalu ganti kode di header dengan kode yang menentukan inventaris dari jaringan Ad Manager Anda sendiri.

Buat tag iklan untuk unit iklan yang ingin Anda tampilkan. Pelajari lebih lanjut cara membuat tag iklan di pusat bantuan Ad Manager.

Salin kode tag iklan yang diberikan di bagian Header dokumen dan gunakan untuk mengganti kode yang sesuai di <head> dokumen HTML Anda.

<head>
 <meta charset="utf-8">
 <title>Hello GPT</title>
 <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
 <script>
   window.googletag = window.googletag || {cmd: []};
   googletag.cmd.push(function() {
     googletag
         .defineSlot(
             'ad-unit-path', [width, height], 'div-id')
         .addService(googletag.pubads());
     googletag.enableServices();
   });
 </script>
</head>

Simpan file hello-gpt.html yang diperbarui dan buka di browser web.

Berikutnya

Pelajari dasar-dasarnya