Tìm hiểu kiến thức cơ bản qua ví dụ

Hướng dẫn sau mở rộng về cách hiển thị quảng cáo thử nghiệm và giới thiệu thêm các khái niệm cơ bản để khai thác tối đa thư viện Thẻ nhà xuất bản của Google (GPT). Các khái niệm này bao gồm:

  • Định cỡ quảng cáo
  • Nhắm mục tiêu khoá-giá trị
  • Cấu trúc yêu cầu duy nhất

Tải thư viện GPT

Bắt đầu bằng cách tải và khởi động thư viện GPT. Thêm đoạn mã sau vào <head> của tài liệu HTML:

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };

  googletag.cmd.push(() => {

  });
</script>

Thao tác này sẽ tải thư viện GPT và khởi chạy cả đối tượng googletag và CommandArray. Việc khởi tạo các đối tượng này cho phép bạn bắt đầu sử dụng ngay mảng lệnh GPT. Thêm mã JavaScript theo sau vào phần nội dung của hàm trống được xác định trong đoạn mã này.

Xác định vùng quảng cáo

Sau khi tải GPT, bạn có thể xác định vùng quảng cáo. Ví dụ sau đây xác định 3 vùng quảng cáo có các tuỳ chọn định dạng quảng cáo, kích thước và nhắm mục tiêu khác nhau.

Vùng quảng cáo có kích thước cố định

Dưới đây là một vùng quảng cáo đơn giản, có kích thước cố định:

// Define a fixed size ad slot, customized with key-value targeting.
googletag
  .defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
  .addService(googletag.pubads())
  .setTargeting("color", "red")
  .setTargeting("position", "atf");

Ngoài đường dẫn đơn vị quảng cáo, kích thước và mã nhận dạng vùng chứa <div>, đoạn mã này còn chỉ định một số lựa chọn nhắm mục tiêu. Các tuỳ chọn này hạn chế và phân biệt những quảng cáo đủ điều kiện phân phát cho vùng này. Tìm hiểu thêm về tiêu chí nhắm mục tiêu khoá-giá trị.

Vùng quảng cáo cố định

Dưới đây là một vùng quảng cáo cố định, được gắn vào cuối khung nhìn:

// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
  "/6355419/Travel",
  googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);

// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
  anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());

  document.getElementById("status").textContent =
    "Anchor ad is initialized. Scroll page to activate.";
}

Vùng quảng cáo cố định là một loại định dạng nằm ngoài trang và được xác định bằng phương thức defineOutOfPageSlot thay vì phương thức defineSlot thông thường. Tìm hiểu thêm về mẫu quảng cáo nằm ngoài trang.

Định dạng nằm ngoài trang thường có các hạn chế về loại trang và thiết bị mà chúng đủ điều kiện phân phát. Do các hạn chế này, bạn phải xác minh rằng vùng quảng cáo đã được xác định thành công trước khi tương tác với vùng đó. Hãy xem mẫu Hiển thị quảng cáo cố định để biết thông tin chi tiết.

Vùng quảng cáo linh hoạt

Dưới đây là vùng quảng cáo linh hoạt cho quảng cáo gốc:

// Define a fluid ad slot that adjusts its height to fit the creative
// content being displayed.
googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

Vùng quảng cáo linh hoạt không có kích thước cố định. Vùng quảng cáo linh hoạt sẽ điều chỉnh để phù hợp với nội dung mẫu quảng cáo. Bạn xác định các vùng quảng cáo linh hoạt bằng tuỳ chọn kích thước fluid. Tìm hiểu thêm về các kích thước quảng cáo và các lựa chọn kích thước có sẵn.

Định cấu hình chế độ cài đặt cấp trang

Một số lựa chọn cấu hình GPT nhất định áp dụng trên toàn cầu, thay vì cho các vùng quảng cáo cụ thể. Đây được gọi là cài đặt cấp trang.

Dưới đây là ví dụ về cách định cấu hình các chế độ cài đặt cấp trang:

// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");

// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();

Đoạn mã này thực hiện ba việc:

  1. Định cấu hình các tùy chọn nhắm mục tiêu cấp trang, được áp dụng cho mọi vùng quảng cáo trên trang.
  2. Bật chế độ Cấu trúc yêu cầu duy nhất (SRA). Chế độ này sẽ nhóm các yêu cầu cho nhiều vùng quảng cáo thành một yêu cầu quảng cáo duy nhất. SRA giúp cải thiện hiệu suất và là điều cần thiết để đảm bảo rằng việc loại trừ cạnh tranh và kỹ thuật "khoanh vùng" được tuân thủ. Vì vậy, bạn nên luôn bật SRA. Tìm hiểu thêm về cách sử dụng SRA đúng cách.
  3. Bật các dịch vụ đính kèm với vùng quảng cáo của chúng tôi cho phép thực hiện yêu cầu quảng cáo.

Quảng cáo hiển thị

Cuối cùng, hãy thêm đoạn mã sau vào <body> của trang:

<div class="page-content centered">
  <div id="banner-ad" style="width: 728px; height: 90px"></div>
  <!--
  If the following status is displayed when the page is rendered, try
  loading the page in a new window or on a different device.
-->
  <h1 id="status">Anchor ads are not supported on this page.</h1>
  <!--
  Spacer used for example purposes only. This positions the native ad
  container below the fold to encourage scrolling.
-->
  <div class="spacer"></div>
  <div id="native-ad" class="native-slot"></div>
</div>
<script>
  googletag.cmd.push(() => {
    // Request and render all previously defined ad slots.
    googletag.display("banner-ad");
  });
</script>

Điều này xác định hai vùng chứa vùng quảng cáo: banner-ad và native-ad. Các giá trị id của vùng chứa này tương ứng với các giá trị mà bạn đã cung cấp khi xác định các vùng quảng cáo ở phần trước trong ví dụ này.

Sau khi xác định tất cả các vùng quảng cáo, lệnh gọi để hiển thị banner-ad sẽ được thực hiện. Vì SRA được bật, lệnh gọi hiển thị duy nhất này sẽ yêu cầu và hiển thị tất cả các vùng quảng cáo đã xác định cho đến thời điểm này. Nếu cần, bạn có thể kiểm soát việc tải và làm mới quảng cáo cũng như hoạt động gộp nhóm một cách chính xác hơn khi đã bật SRA.

Ví dụ đầy đủ

Sau đây là mã nguồn đầy đủ cho trang mẫu dựa trên hướng dẫn này. Bạn cũng có thể xem bản minh hoạ tương tác của trang này.

JavaScript

TypeScript

Trước
Bắt đầu
Tiếp
Sử dụng TypeScript