Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
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.
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.
<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.
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.
[null,null,["Cập nhật lần gần đây nhất: 2025-05-09 UTC."],[[["\u003cp\u003eGoogle Publisher Tag (GPT) is an ad tagging library for Google Ad Manager that dynamically builds ad requests.\u003c/p\u003e\n"],["\u003cp\u003eGPT uses key details like ad unit code, size, and targeting to build the request and display ads on web pages.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can find sample code and detailed instructions to implement GPT for displaying test and live ads.\u003c/p\u003e\n"],["\u003cp\u003eTo display live ads, publishers need an active line item in their Ad Manager network and an ad tag generated for the specific ad unit.\u003c/p\u003e\n"]]],["GPT, a Google Ad Manager tagging library, dynamically builds ad requests. To display a test ad, create an HTML file, load the GPT library, and define an ad slot with `googletag.defineSlot()`, including the ad unit path (e.g., `/6355419/Travel/Europe/France/Paris`) and dimensions. Enable GPT with `googletag.enableServices()`. Add a `\u003cdiv\u003e` element to the body matching the slot's ID and use `googletag.display()` to render the ad. Replace test ad details with your Ad Manager network's ad tag to show your ads.\n"],null,["# Get Started with Google Publisher Tag\n\nThe Google Publisher Tag (GPT) is an ad tagging library for\nGoogle Ad Manager.\n\nYou can use GPT to dynamically build ad requests.\nGPT takes key details like the ad unit code, ad size, and\ncustom targeting, builds the request, and displays the ad on web pages.\n\nFor more details on GPT, see the\n[Ad Manager help center](//support.google.com/admanager/answer/181073).\n\nHere are some samples you can use to get started with GPT. If\nyou need more help with GPT, see the [support\noptions](/publisher-tag/support/feedback-questions).\n\nDisplay a test ad\n-----------------\n\nThe following example walks you through creating a test page that\nuses GPT to load a generic ad from Google's test network.\n\nFull code for this example can be found on the\n[display a test ad](/publisher-tag/samples/display-test-ad) sample page.\n\n1. Create a basic HTML document\n\n In a text editor, create a basic HTML document called `hello-gpt.html`. \n\n ```html\n \u003c!DOCTYPE html\u003e\n \u003chtml\u003e\n \u003chead\u003e\n \u003cmeta charset=\"utf-8\" /\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n \u003cmeta name=\"description\" content=\"Display a fixed-sized test ad.\" /\u003e\n \u003ctitle\u003eDisplay a test ad\u003c/title\u003e\n \u003cstyle\u003e\u003c/style\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n ```\n2. Load the GPT library\n\n Load the GPT library by adding the following to the\n `\u003chead\u003e` of the HTML document.\n\n This code loads the GPT library from\n \u003chttps://securepubads.g.doubleclick.net/tag/js/gpt.js\u003e. Once the library has\n fully loaded, it processes any queued commands in the\n [`googletag`](/publisher-tag/reference#googletag) object.\n **Important:** Only [load GPT from a Google domain](/publisher-tag/guides/general-best-practices#load_from_an_official_source). \n\n ```html\n \u003chead\u003e\n \u003cmeta charset=\"utf-8\" /\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n \u003cmeta name=\"description\" content=\"Display a fixed-sized test ad.\" /\u003e\n \u003ctitle\u003eDisplay a test ad\u003c/title\u003e\n \u003cscript\n async\n src=\"https://securepubads.g.doubleclick.net/tag/js/gpt.js\"\n crossorigin=\"anonymous\"\n \u003e\u003c/script\u003e\n \u003cstyle\u003e\u003c/style\u003e\n \u003c/head\u003e\n ```\n3. Define an ad slot\n\n Define an ad slot and initialize GPT using the\n [`googletag.enableServices()`](/publisher-tag/reference#googletag.enableServices) method.\n\n This code first ensures the googletag object is available, then queues a\n command which constructs an ad slot and enables GPT.\n\n The ad slot in this example will load an ad of size `300x250` from the ad\n unit specified by path `/6355419/Travel/Europe/France/Paris`. The ad will be\n displayed in a `\u003cdiv id=\"banner-ad\"\u003e` element in the body of the page, which\n will be added next.\n\n \u003cbr /\u003e\n\n | Ad unit path follows the format `/`\u003cvar translate=\"no\"\u003enetwork-code\u003c/var\u003e`/[`\u003cvar translate=\"no\"\u003eparent-ad-unit-code\u003c/var\u003e`/.../]`\u003cvar translate=\"no\"\u003ead-unit-code\u003c/var\u003e, where:\n |\n | \u003cbr /\u003e\n |\n | - \u003cvar translate=\"no\"\u003enetwork-code\u003c/var\u003e is a [unique identifier](//support.google.com/admanager/answer/7674889#network-code) for the Ad Manager network the ad unit belongs to\n | - \u003cvar translate=\"no\"\u003eparent-ad-unit-code\u003c/var\u003e are the codes of all parent ad units (only applies to non-top level ad units)\n | - \u003cvar translate=\"no\"\u003ead-unit-code\u003c/var\u003e is the code for the ad unit to be displayed\n |\n | Note that all ad unit codes included in the ad unit path must adhere to the\n | [formatting rules](//support.google.com/admanager/answer/1628457#ad-unit-codes) specified by\n | Ad Manager.\n\n \u003cbr /\u003e\n\n ```html\n \u003chead\u003e\n \u003cmeta charset=\"utf-8\" /\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n \u003cmeta name=\"description\" content=\"Display a fixed-sized test ad.\" /\u003e\n \u003ctitle\u003eDisplay a test ad\u003c/title\u003e\n \u003cscript\n async\n src=\"https://securepubads.g.doubleclick.net/tag/js/gpt.js\"\n crossorigin=\"anonymous\"\n \u003e\u003c/script\u003e\n \u003cscript\u003e\n window.googletag = window.googletag || { cmd: [] };\n\n googletag.cmd.push(() =\u003e {\n // Define an ad slot for div with id \"banner-ad\".\n googletag\n .defineSlot(\"/6355419/Travel/Europe/France/Paris\", [300, 250], \"banner-ad\")\n .addService(googletag.pubads());\n\n // Enable the PubAdsService.\n googletag.enableServices();\n });\n \u003c/script\u003e\n \u003cstyle\u003e\u003c/style\u003e\n \u003c/head\u003e\n ```\n4. Specify where the ad will appear\n\n Specify where the ad will appear on the page by adding the following code to\n the `\u003cbody\u003e` of the HTML document.\n\n Note that the ID of this `\u003cdiv\u003e` matches the ID specified when defining the\n ad slot. \n\n ```html\n \u003cbody\u003e\n \u003cdiv id=\"banner-ad\" style=\"width: 300px; height: 250px\"\u003e\u003c/div\u003e\n \u003cscript\u003e\n googletag.cmd.push(() =\u003e {\n // Request and render an ad for the \"banner-ad\" slot.\n googletag.display(\"banner-ad\");\n });\n \u003c/script\u003e\n \u003c/body\u003e\n ```\n5. Preview the test page\n\n Save the `hello-gpt.html` file and open it in a web browser. Once loaded,\n the page will display a test ad in the body of the web page.\n | **Caution:** If you don't see an ad, ensure that the div ID specified in the `\u003chead\u003e` of the page matches the ID of the `\u003cdiv\u003e` element you added to the `\u003cbody\u003e` of the page.\n\nDisplay your own ad\n-------------------\n\nTo display your own ad, use the `hello-gpt.html` file from [Display a test\nad](#generic-ad), then replace the code in the header with code specifying\ninventory from your own Ad Manager network.\n| **Note:** Before you can display an ad from your Ad Manager network, you need to make sure there's an active line item already trafficked in the \"Ready\" status. Learn more about creating line items in the [Ad Manager help center](//support.google.com/admanager/answer/82236).\n\n1. Generate an ad tag for the ad unit you'd like to display. Learn more about\n generating ad tags in the\n [Ad Manager help center](//support.google.com/admanager/answer/177207).\n\n2. Copy the ad tag code provided in the **Document header** section and use it\n to replace the corresponding code in the `\u003chead\u003e` of your HTML document.\n\n **Caution:** ensure that the width, height, and ID of the `\u003cdiv\u003e` declared in the body of the page matches the width, height, and ID of the ad slot defined in the ad tag code. \n\n \u003chead\u003e\n \u003cmeta charset=\"utf-8\"\u003e\n \u003ctitle\u003eHello GPT\u003c/title\u003e\n \u003cscript src=\"https://securepubads.g.doubleclick.net/tag/js/gpt.js\" crossorigin=\"anonymous\" async\u003e\u003c/script\u003e\n \\\u003cscript\\\u003e\n window.googletag = window.googletag \\|\\| {cmd: \\[\\]};\n googletag.cmd.push(function() {\n googletag\n .defineSlot(\"\u003cvar translate=\"no\"\u003ead-unit-path\u003c/var\u003e\", \\[\u003cvar translate=\"no\"\u003ewidth\u003c/var\u003e, \u003cvar translate=\"no\"\u003eheight\u003c/var\u003e\\], \"\u003cvar translate=\"no\"\u003ediv-id\u003c/var\u003e\")\n .addService(googletag.pubads());\n googletag.enableServices();\n });\n \\\u003c/script\\\u003e\n \u003c/head\u003e\n\n3. Save the updated `hello-gpt.html` file and open it in a web browser."]]
