Google 发布商代码 (GPT) 是 Google Ad Manager 的广告代码库。
您可以使用 GPT 动态构建广告请求。 GPT 会提取广告单元代码、广告尺寸和自定义定位等关键详情,构建请求,并在网页上展示广告。
如需详细了解 GPT,请参阅 Ad Manager 帮助中心。
下面提供了一些示例,您可以参考它们来开始使用 GPT。如果您需要 GPT 方面的更多帮助,请参阅支持选项。
展示测试广告
以下示例将逐步创建一个使用 GPT 从 Google 测试广告联盟加载常规广告的测试页。
可以在展示测试广告示例页面上找到此示例的完整代码。
创建基本 HTML 文档
在文本编辑器中,创建一个名为
hello-gpt.html
的基本 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> <script> googletag.cmd.push(() => { // Request and render an ad for the "banner-ad" slot. googletag.display("banner-ad"); }); </script> </body> </html>
加载 GPT 库
将以下代码添加到 HTML 文档的
<head>
中,加载 GPT 库。此代码从 https://securepubads.g.doubleclick.net/tag/js/gpt.js 加载 GPT 库。该库完全加载后,便会处理
googletag
对象中已加入队列的所有命令。<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"></script> <style></style> </head>
定义广告位
定义一个广告位,并使用
googletag.enableServices()
方法初始化 GPT。此代码会先确保 googletag 对象可用,然后再将用于构建广告位并启用 GPT 的命令加入队列。
此示例中的广告位将从路径
/6355419/Travel/Europe/France/Paris
指定的广告单元加载尺寸为300x250
的广告。广告将在页面正文的<div id="banner-ad">
元素中展示,接下来将添加该元素。<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"></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>
指定广告的展示位置
将以下代码添加到 HTML 文档的
<body>
中,以指定广告在网页上的展示位置。请注意,此
<div>
的 ID 与定义广告位时指定的 ID 一致。<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>
预览测试页
保存
hello-gpt.html
文件并在网络浏览器中打开它。加载后,页面会在正文中显示测试广告。
展示自己的广告
如需展示您自己的广告,请使用展示测试广告中的 hello-gpt.html
文件,然后将标头中的代码替换为指定您自己的 Ad Manager 广告资源网中的广告资源的代码。
为您要展示的广告单元生成广告代码。如需详细了解如何生成广告代码,请访问 Ad Manager 帮助中心。
复制“文档标头”部分提供的广告代码,并使用该代码替换 HTML 文档的
<head>
中的相应代码。<head> <meta charset="utf-8"> <title>Hello GPT</title> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></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>
保存更新后的
hello-gpt.html
文件,然后在网络浏览器中打开它。