如何制作响应式 DFP 广告单元
已发表: 2016-01-22
这篇文章最近更新于 2021 年 8 月 31 日
因此，您有一个响应式主题，现在您想从 AdSense 迁移到 Google Ad Manager (GAM)。 您首先看到的是，没有像您通常在 AdSense 中看到的那样的响应式广告单元。
Google 的支持说明可能有点棘手或复杂。 所以今天我将向您展示如何通过几个简单的步骤使 GAM 代码具有响应性。
自定义 DFP 代码以制作 Google Ad Manager 自适应广告并非易事。如果您没有编码经验，更谨慎的做法是让专家第一次为您正确完成。您不想冒失去广告收入的风险！ 如果您需要帮助，请在此处联系我们。 |
在开始之前，请确保执行以下操作：
- 设置您的库存。 配置每个广告单元的所有相关尺寸。 阅读：Adsense 和 GAM 集成最佳实践
- 在此处查看我们关于如何生成多个 Ad Manager 代码的教程：https://youtu.be/s74dMDzczyc
- 现在制作两个文本文件并保存。 使用好的文本编辑器（我更喜欢使用 Notepad++，因为它免费且易于使用）。
- 为头部制作一个，为身体标签制作另一个。
- 保存正文标签。
- 打开您制作的 head.txt 文件。
使 head 标签响应
第一步：在记事本++中打开head.txt。首先，让我们一步一步来。 您的标头代码将如下所示：
| <!– 启动 GPT 代码 –> <script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script> <脚本> window.googletag = window.googletag || {命令：[]}； googletag.cmd.push(函数() { googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1') .addService(googletag.pubads()); googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2') .addService(googletag.pubads()); googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3') .addService(googletag.pubads()); googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4') .addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.pubads().collapseEmptyDivs(); googletag.enableServices(); }); </脚本> <!– 结束 GPT 标记 –> |
第 2 步：我在那里突出显示了一段代码：
googletag.cmd.push(函数() {
您必须在突出显示的行之后添加一些代码。 以下是您必须添加的给定代码。 根据您从以下选择的任何路线粘贴尽可能多的实例（副本）：
- 尺寸图的数量。 如果适用，您可以在多个广告单元上重复使用相同尺寸的地图
- 您拥有的广告单元数量
- 您想要响应式广告单元的数量
| var mappingadunitname = googletag.sizeMapping()。 addSize([992, 0], [[970, 90], [728, 90], [300, 250], [1, 1]]). //桌面 addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //药片 addSize([320, 0], [[320, 50], [320, 100], [300, 250], [1, 1]]). //移动的 addSize([0, 0], [[320, 50], [1, 1]]). //其他 建造（）; |
第 3 步：我突出显示了另一段代码。这是我们稍后将在广告单元中传递的映射名称。 我更喜欢这样做，mappingadunitname所以对于我们上面的例子，我选择为每个单位创建 1 个尺寸的地图，这意味着我们将需要它的 4 个实例并将它放在之后：
googletag.cmd.push(函数() {
第 4 步：添加映射后，您的标头代码应如下所示：
| <!– 启动 GPT 代码 –> <script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script> <脚本> window.googletag = window.googletag || {命令：[]}； googletag.cmd.push(函数() { var mappingheaderad1 = googletag.sizeMapping()。 addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //桌面 addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //药片 addSize([0, 0], [1, 1]). //其他 建造（）; var mappingcontentad1 = googletag.sizeMapping()。 addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //桌面 addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //药片 addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //移动的 addSize([0, 0], [[320, 50], [1, 1]]). //其他 建造（）; var mappingcontentad2 = googletag.sizeMapping()。 addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //桌面 addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //药片 addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //移动的 addSize([0, 0], [[300, 250], [1, 1]]). //其他 建造（）; var mappingrightrail1 = googletag.sizeMapping()。 addSize([992, 0], [[300, 250], [1, 1]]). //桌面 addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //药片 addSize([0, 0], [1, 1]). //其他 建造（）; googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1') .addService(googletag.pubads()); googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2') .addService(googletag.pubads()); googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3') .addService(googletag.pubads()); googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4') .addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.pubads().collapseEmptyDivs(); googletag.enableServices(); }); </脚本> <!– 结束 GPT 标记 –> |
第 5 步：现在是最后一步：您需要为每个广告单元定义或分配尺寸映射。让我们在这里抓一个，然后我会告诉你要添加什么以及在哪里添加。
| googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4') .addService(googletag.pubads()); |
第6步：现在你需要在上面代码的蓝色和红色部分之间添加这段代码.defineSizeMapping(mappingadunitname)。 即在点之前
此处重要的是括号中的文字应与您要在广告单元中添加的尺寸图相匹配。 对于我们此处的示例，RightRail_Ad1 应具有以下外观：
| googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4') .defineSizeMapping(mappingrightrail1).addService(googletag.pubads()); |
第 7 步：为所有其他广告单元添加类似的映射将为您提供最终代码。
| <!– 启动 GPT 代码 –> <script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>  <脚本> window.googletag = window.googletag || {命令：[]}； googletag.cmd.push(函数() { var mappingheaderad1 = googletag.sizeMapping()。 addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //桌面 addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //药片 addSize([0, 0], [1, 1]). //其他 建造（）; var mappingcontentad1 = googletag.sizeMapping()。 addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //桌面 addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //药片 addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //移动的 addSize([0, 0], [[320, 50], [1, 1]]). //其他 建造（）; var mappingcontentad2 = googletag.sizeMapping()。 addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //桌面 addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //药片 addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //移动的 addSize([0, 0], [[300, 250], [1, 1]]). //其他 建造（）; var mappingrightrail1 = googletag.sizeMapping()。 addSize([992, 0], [[300, 250], [1, 1]]). //桌面 addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //药片 addSize([0, 0], [1, 1]). //其他 建造（）; googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1') .defineSizeMapping(mappingheaderad1).addService(googletag.pubads()); googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2') .defineSizeMapping(mappingcontentad1).addService(googletag.pubads()); googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3') .defineSizeMapping(mappingcontentad2).addService(googletag.pubads()); googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4') .defineSizeMapping(mappingrightrail1).addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.pubads().collapseEmptyDivs(); googletag.enableServices(); }); </脚本> <!– 结束 GPT 标记 –> |
注意：突出显示的部分代码是为了强调哪个尺寸图用于哪个广告单元。
第 8 步：现在让我们看看尺寸映射：
| var mappingcontentad2 = googletag.sizeMapping()。 addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //桌面 addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //药片 addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //移动的 addSize([0, 0], [[300, 250], [1, 1]]). //其他 建造（）; |
红色代码定义了浏览器的宽度和高度。 通常高度并不重要，因为只有当我们在上面的代码中两行的宽度相等时才会考虑。
第 9 步：现在我们在第一行这样说：
- 如果浏览器的宽度等于或大于 992px，请显示 728×280 或 728×90 或 336×280 或 300×250 或 1×1 广告尺寸
在最后一行我们说：
- 如果浏览器的宽度等于或大于 320 像素，请显示 320×50 或 320×100 或 320×200 或 300×250 或 1×1 广告尺寸
no.s、992px、768px 和 320px 适用于大多数网站，因为它们遵循台式机、平板电脑和移动浏览器的常规尺寸。
但是，如果您的网站有平板电脑和手机主题，您可以询问您的开发人员触发主题转换的浏览器大小，然后您可以分别添加该大小来代替 768px 和 320px。
您 2019 年的程序化收入策略是什么？
在 MonetizeMore，我们帮助发布商从他们现有的广告库存中获得更多收入。我们是领先的 Google 发布合作伙伴，拥有一套发布商获利解决方案，可帮助我们的客户实现收入目标并解决他们的广告运营难题。
虽然您完全可以自行设置 DFP 自适应广告单元，但务必要考虑您的机会成本。花时间发展业务并冒因错误设置而损失收入的风险是否值得？
如果您有兴趣获得有关设置 DFP 自适应广告单元的帮助。立即在 MonetizeMore 注册高级帐户！
相关阅读：
- AdSense 提供自适应广告单元
- 2016 年热门移动广告类型
- Doubleclick 的 Accelerated Mobile Pages 对发布商的好处
- 随着移动广告支出超过桌面，如何让发布商做好准备
- Doubleclick 现在为移动广告商和出版商提供跨设备跟踪和原生广告