Làm quen với Thẻ nhà xuất bản của Google

Thẻ nhà xuất bản của Google (GPT) là thư viện gắn thẻ quảng cáo cho Google Ad Manager.

Bạn có thể sử dụng GPT để tự động tạo yêu cầu quảng cáo. GPT lấy các thông tin chi tiết quan trọng như mã đơn vị quảng cáo, kích thước quảng cáo và nhắm mục tiêu tuỳ chỉnh, tạo yêu cầu và hiển thị quảng cáo trên trang web.

Để biết thêm chi tiết về GPT, hãy xem Trung tâm trợ giúp Ad Manager.

Dưới đây là một số mẫu bạn có thể sử dụng để bắt đầu với GPT. Nếu bạn cần được trợ giúp thêm về GPT, hãy xem phần hỗ trợ .

Hiển thị quảng cáo thử nghiệm

Ví dụ sau đây hướng dẫn bạn cách tạo trang thử nghiệm sử dụng GPT để tải quảng cáo chung từ mạng thử nghiệm của Google.

Bạn có thể xem mã đầy đủ cho ví dụ này trên hiển thị quảng cáo thử nghiệm.

Tạo tài liệu HTML cơ bản

Trong trình chỉnh sửa văn bản, hãy tạo một tài liệu HTML cơ bản có tên là 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>

Tải thư viện GPT

Tải thư viện GPT bằng cách thêm thẻ sau vào <head> của tài liệu HTML.

Mã này tải thư viện GPT từ https://securepubads.g.doubleclick.net/tag/js/gpt.js. Sau khi thư viện có đã tải đầy đủ, công cụ này sẽ xử lý mọi lệnh được xếp hàng đợi trong Đối tượng googletag.

Lưu ý quan trọng: Chỉ tải GPT từ một miền mua qua Google.
```
<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>
```
Xác định vùng quảng cáo

Xác định vùng quảng cáo và khởi chạy GPT bằng cách sử dụng Phương thức googletag.enableServices().

Trước tiên, mã này đảm bảo đối tượng googletag có sẵn, sau đó xếp hàng đợi một lệnh xây dựng vùng quảng cáo và cho phép GPT.

Vùng quảng cáo trong ví dụ này sẽ tải quảng cáo có kích thước 300x250 từ quảng cáo được xác định theo đường dẫn /6355419/Travel/Europe/France/Paris. Quảng cáo sẽ được hiển thị trong phần tử <div id="banner-ad"> ở phần nội dung của trang sẽ được thêm vào tiếp theo.
Đường dẫn đơn vị quảng cáo sẽ tuân theo định dạng /network-code/[parent-ad-unit-code/.../]ad-unit-code, trong đó:
- network-code là một mã nhận dạng duy nhất cho Mạng Ad Manager chứa đơn vị quảng cáo này
- parent-ad-unit-code là mã của tất cả các đơn vị quảng cáo mẹ (chỉ áp dụng cho đơn vị quảng cáo không phải cấp cao nhất)
- ad-unit-code là mã cho đơn vị quảng cáo sẽ hiển thị
Xin lưu ý rằng tất cả mã đơn vị quảng cáo có trong đường dẫn đơn vị quảng cáo đều phải tuân thủ quy tắc định dạng được chỉ định bởi 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>
```
Chỉ định vị trí quảng cáo sẽ xuất hiện

Chỉ định vị trí quảng cáo sẽ xuất hiện trên trang bằng cách thêm mã sau vào <body> của tài liệu HTML.

Lưu ý rằng mã nhận dạng của <div> này khớp với mã nhận dạng được chỉ định khi xác định vùng quảng cáo.
```
<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>
```
Xem trước trang thử nghiệm

Lưu tệp hello-gpt.html rồi mở tệp đó trong trình duyệt web. Sau khi tải, trang sẽ hiển thị một quảng cáo thử nghiệm trong phần nội dung của trang web.

Thận trọng: Nếu bạn không thấy quảng cáo, hãy đảm bảo rằng mã div được chỉ định trong <head> của trang khớp với mã của phần tử <div> mà bạn đã thêm vào <body> của trang.

Hiển thị quảng cáo của chính bạn

Để hiển thị quảng cáo của chính bạn, hãy sử dụng tệp hello-gpt.html từ mục Hiển thị thử nghiệm ad, sau đó thay thế mã trong tiêu đề bằng mã chỉ định khoảng không quảng cáo từ mạng Ad Manager của riêng bạn.

Tạo một thẻ quảng cáo cho đơn vị quảng cáo bạn muốn hiển thị. Tìm hiểu thêm về cách tạo thẻ quảng cáo trong Trung tâm trợ giúp Ad Manager.

Sao chép mã thẻ quảng cáo được cung cấp trong phần Tiêu đề tài liệu rồi sử dụng mã đó để thay thế mã tương ứng trong <head> của tài liệu HTML.

<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>

Lưu tệp hello-gpt.html đã cập nhật rồi mở tệp đó trong trình duyệt web.

Tiếp

Tìm hiểu các khái niệm cơ bản