Hướng dẫn sau đây sẽ 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 chạy 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"
crossorigin="anonymous"
></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 mảng lệnh GPT ngay lập tức. 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ị trí 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 ba vị trí quảng cáo với các định dạng quảng cáo, kích thước và lựa chọn 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ã vùng chứa <div>, đoạn mã này
cũng chỉ định một số tuỳ 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ị trí này. Tìm hiểu thêm về tính năng nhắm mục tiêu theo khoá-giá trị.
Vùng quảng cáo cố định
Dưới đây là một vị trí quảng cáo cố định cuối màn hình, được đính kèm ở 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 neo là một loại định dạng nằm ngoài trang, đượ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.
Các đị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ị trí quảng cáo linh hoạt
Dưới đây là một vị trí quảng cáo linh hoạt cho quảng cáo gốc:
// Define a fluid ad slot that fills the width of the enclosing column and // adjusts the height as defined by the native creative delivered. 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 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ề 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ố tuỳ chọn cấu hình GPT áp dụng trên toàn cầu, thay vì chỉ áp dụng cho một số vùng quảng cáo cụ thể. Đây được gọi là chế độ cài đặt ở cấp trang.
Dưới đây là ví dụ về cách định cấu hình 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 3 việc:
- Định cấu hình các tuỳ chọn nhắm mục tiêu ở cấp trang. Các tuỳ chọn này được áp dụng cho mọi vùng quảng cáo trên trang.
- 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 vào 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à yếu tố cần thiết để đảm bảo rằng các tiêu chí loại trừ cạnh tranh và rào cản đượ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.
- Bật các dịch vụ được đính kèm vào vùng quảng cáo của chúng tôi để cho phép tạo 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>Thao tác 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ị trí quảng cáo trước đó trong ví dụ này.
Sau khi tất cả các vùng quảng cáo được xác định, lệnh gọi để hiển thị banner-ad sẽ được thực hiện. Vì SRA đang bật, nên 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ị trí quảng cáo được xác định cho đến thời điểm này. Nếu cần, bạn có thể kiểm soát chính xác hơn việc tải và làm mới quảng cáo cũng như hành vi tạo lô khi bật SRA.
Ví dụ đầy đủ
Sau đây là mã nguồn đầy đủ cho trang mẫu mà hướng dẫn này dựa trên đó. Bạn cũng có thể xem bản minh hoạ tương tác của trang này.