Sau đây là một mã mẫu đầy đủ để tạo Thẻ nhà xuất bản Google (GPT) cho việc triển khai trên máy tính và thiết bị di động. Hãy sử dụng Trình tạo Thẻ Google để tự động tạo thẻ.
Đối với nhà phát triển và những người cần triển khai GPT nâng cao, hãy tham khảo tài liệu tham khảo API và cách triển khai mẫu (chẳng hạn như tải từng phần).
Mã ví dụ về Thẻ nhà xuất bản của Google
Có hai phần mã được triển khai cho GPT:
- Cấu hình GPT nằm trong phần
<head>của trang web. - Các lệnh gọi cho từng vùng quảng cáo cụ thể sẽ nằm tại phần có liên quan trong
<body>.
Mẫu này chỉ nhằm cung cấp thông tin và bạn nên nhờ một nhà phát triển giúp triển khai mã trên trang web của mình.
Cấu hình GPT
Đoạn mã ví dụ sau đây bao gồm các hoạt động gọi thư viện GPT JavaScript, xác định vùng quảng cáo, nhắm mục tiêu khoá-giá trị, v.v.
1 |
<html> |
2 |
<head> |
3 |
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> |
4 |
<script> |
5 |
window.googletag = window.googletag || {cmd: []}; |
6 |
</script> |
|
Dòng 3-6: tải không đồng bộ thư viện GPT mà Ad Manager sử dụng, bằng cách sử dụng SSL/HTTPS. Đây là nơi hàng đợi lệnh được tạo để xử lý danh sách hàm (thường là lệnh gọi quảng cáo) một cách không đồng bộ. Bạn không cần chỉnh phần mã này. |
|
| 7 | <script> |
| 8 | googletag.cmd.push(function() { |
| 9 | googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0") |
|
Dòng 9:
|
|
10 |
.addService(googletag.pubads()) |
11 |
.setTargeting("interests", ["sports", "music", "movies"]); |
12 |
googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1") |
13 |
.addService(googletag.pubads()) |
14 |
.setTargeting("gender", "male") |
| 15 | .setTargeting("age", "20-30"); |
|
Dòng 11, 14 và 15: đặt tiêu chí nhắm mục tiêu theo khoá-giá trị ở cấp vùng quảng cáo bằng Tìm hiểu thêm về cách đặt tiêu chí nhắm mục tiêu và kích thước bằng GPT. |
|
| 16 | googletag.pubads().setTargeting("topic","basketball"); |
|
Dòng 16: Khi định cấu hình tiêu chí nhắm mục tiêu với khóa-giá trị ở cấp độ trang, tất cả vùng quảng cáo sẽ kế thừa tiêu chí này. Giống như khóa-giá trị ở cấp vùng, bạn có thể liên kết nhiều giá trị với một khóa: |
|
| 17 | googletag.pubads().enableSingleRequest(); |
|
Dòng 17: |
|
| 18 | googletag.enableServices(); |
| 19 | }); |
20 |
</script> |
21 |
</head> |
22 |
<body> |
23 |
<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px"> |
|
Dòng 23 (không bắt buộc): Nếu sử dụng thẻ nhiều kích thước, bạn nên bỏ qua dòng này (trong trường hợp đó, kích thước của phần tử sẽ lấy kích thước của quảng cáo đã chọn khi hiển thị) hoặc đặt cả hai kích thước đủ rộng để chứa quảng cáo đủ điều kiện lớn nhất. Đối với thẻ quảng cáo có một kích thước, hãy sử dụng thông số này để mở rộng phần tử vùng chứa cho đến khi quảng cáo tải để các phần tử trang khác không thay đổi khi quảng cáo hiển thị. |
|
| 24 | <script> |
| 25 | googletag.cmd.push(function() { |
| 26 | googletag.display("div-gpt-ad-123456789-0"); |
| 27 | }); |
| 28 | </script> |
29 |
</div> |
30 |
<div id="div-gpt-ad-123456789-1"> |
31 |
<script> |
32 |
googletag.cmd.push(function() { |
|
Dòng 8, 25 và 32: Các lệnh gọi hàm được thêm vào hàng đợi lệnh để được xử lý không đồng bộ khi tải trang. |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
|
Dòng 9, 12, 23, 26, 30 và 33: Mặc dù số ngẫu nhiên được sử dụng ở đây, nhưng đây không phải là cách GPT phân biệt từng yêu cầu quảng cáo. Việc này được thực hiện ngầm thông qua thư viện GPT. Ngoài ra, các tên này có thể giống nhau ở mọi trang, miễn là không có nhiều phiên bản của cùng một tên div trên cùng một trang. Bạn có thể tìm hiểu thêm về cấu trúc khoảng không quảng cáo Ad Manager, phân cấp đơn vị quảng cáo và cách đơn vị quảng cáo kế thừa tiêu chí nhắm mục tiêu trong phần tổng quan về khoảng không quảng cáo. |
|
| 34 | }); |
| 35 | </script> |
| 36 | </div> |
| 37 | </body> |
| 38 | </html> |
Nếu bạn không thể chỉnh sửa tiêu đề các trang web của mình
Bạn có thể sử dụng GPT mà không cần sửa đổi <header> của trang web.
Lựa chọn 1: GPT cùng dòng
Sử dụng thẻ cùng dòng để xác định nơi đơn vị quảng cáo xuất hiện trên trang thay vì sử dụng tiêu đề trang. Với một thẻ nội tuyến, toàn bộ định nghĩa vùng quảng cáo GPT và yêu cầu, bao gồm cả tải thư viện GPT, sẽ nằm trong một thẻ <script> duy nhất.
Vì thẻ quảng cáo sử dụng thư viện GPT JavaScript, nên bạn phải cung cấp mã tải thư viện này trước khi cung cấp mã thẻ quảng cáo.
Các ví dụ về GPT nội tuyến không hỗ trợ SRA.
Gọi thư viện GPT JavaScript
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
</script>
Mẫu thẻ quảng cáo cùng dòng
<div id="div-gpt-ad-1234567891234-0">
<script>
googletag.cmd.push(function() {
googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
.addService(googletag.pubads())
.setTargeting("Gender", "Male");
googletag.enableServices();
googletag.display('div-gpt-ad-1234567891234-0');
});
</script>
</div>
Lựa chọn 2: đặt toàn bộ đoạn mã vào phần body của trang web
Sử dụng cách triển khai GPT thông thường, nhưng đặt định nghĩa vùng quảng cáo vào phần body HTML chứ không phải ở header.
Mã tải thư viện và xác định vùng quảng cáo phải được gọi trước khi bạn yêu cầu quảng cáo cho các vùng đó. Bởi vì mã không được phân đoạn thành tiêu đề và phần nội dung trang và bạn phải quản lý trình tự của mã, nên cách tiếp cận này phức tạp hơn nhưng cung cấp tính linh hoạt của SRA.
Tạo Yêu cầu không gắn thẻ không dùng JavaScript
Bạn có thể sử dụng Yêu cầu không gắn thẻ thay cho thẻ quảng cáo để yêu cầu mã quảng cáo thô được quản lý trong Ad Manager. Yêu cầu không gắn thẻ thường được sử dụng khi cần phân tích cú pháp và hiển thị tùy chỉnh, chẳng hạn như trong hộp giải mã tín hiệu số hoặc các môi trường khác khi không có tính năng gắn thẻ Google hoặc không hỗ trợ SDK.
