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 khusus, membuat permintaan, dan menampilkan iklan pada laman web.

Untuk 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 dukungan lainnya.

Tampilkan iklan percobaan

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

Kode lengkap untuk contoh ini dapat ditemukan di menampilkan halaman contoh iklan percobaan.

Membuat dokumen HTML dasar

Di editor teks, buat dokumen HTML dasar 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>
  </body>
</html>

Memuat library GPT

Muat library GPT dengan menambahkan kode berikut ke bagian <head> dari dokumen HTML.

Kode ini memuat library GPT dari https://securepubads.g.doubleclick.net/tag/js/gpt.js. Setelah perpustakaan dimuat sepenuhnya, ia 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"
    crossorigin="anonymous"
  ></script>
  <style></style>
</head>

Menentukan slot iklan

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

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

Slot iklan dalam contoh ini akan memuat iklan berukuran 300x250 dari iklan tersebut unit yang ditetapkan 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, dalam hal ini:
- 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 non-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"
    crossorigin="anonymous"
  ></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 pada 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 uji

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 di bagian <head> halaman cocok dengan ID elemen <div> yang Anda tambahkan <body> pada halaman.

Tampilkan iklan Anda sendiri

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

Buat tag iklan untuk unit iklan yang ingin ditampilkan. Pelajari selengkapnya tentang 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> pada dokumen HTML Anda.

<head>
  <meta charset="utf-8">
  <title>Hello GPT</title>
  <script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></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