如果您对自适应多重广告单元有特定要求,则可以向您的广告代码添加参数,以自定义多重广告单元的展示方式。借助这些参数,您可以更改多重广告单元的布局,并指定其中广告的行与列的排列方式。
您还可以使用参数针对移动设备和桌面设备设定不同的设置。例如,如果您为布局参数提供了单一值,则您的多重广告单元将在移动设备和桌面设备上呈现相同的布局。如果您为布局参数提供了两个值,则多重广告单元将在移动设备上呈现一种布局(第一个值),在桌面设备上呈现另一种布局(第二个值)。
请注意,这些选项仅适用于自适应多重广告单元,并且必须添加所有参数才能使自定义设置有效。修改广告代码后,请务必在不同的设备和屏幕上测试多重广告单元,以确保它们能够正常工作。
更改多重广告单元的布局
您可以使用布局参数 (data-matched-content-ui-type
) 来控制多重广告单元中文字和图片的排列方式。例如,您可以选择并排放置图片和文字、将图片放在文字上方等等。
提供以下布局选项:
在这种布局中,图片和文字并排显示。要选择此布局,请将 data-matched-content-ui-type="image_sidebyside"
参数添加到您的广告代码中。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="image_sidebyside"
data-matched-content-rows-num="4"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
在这种布局中,图片和文字在卡片内并排显示。要选择此布局,请将 data-matched-content-ui-type="image_card_sidebyside"
参数添加到您的广告代码中。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="image_card_sidebyside"
data-matched-content-rows-num="4"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
在这种布局中,图片显示在相应文字的上方。要选择此布局,请将 data-matched-content-ui-type="image_stacked"
参数添加到您的广告代码中。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="image_stacked"
data-matched-content-rows-num="3"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
在这种布局中,图片在卡片内显示在相应文字的上方。要选择此布局,请将 data-matched-content-ui-type="image_card_stacked"
参数添加到您的广告代码中。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="image_card_stacked"
data-matched-content-rows-num="3"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
没有图片的纯文字布局。要选择此布局,请将 data-matched-content-ui-type="text"
参数添加到您的广告代码中。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="text"
data-matched-content-rows-num="4"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
卡片内的纯文字布局。要选择此布局,请将 data-matched-content-ui-type="text_card"
参数添加到您的广告代码中。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="text_card"
data-matched-content-rows-num="4"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
指定多重广告单元中的行数和列数
多重广告单元内的广告排列在网格中。您可以指定要在网格中显示的行数和列数。例如,您可以将多重广告单元设置为 2x2 方形、4x1 柱形等。
您可以使用 data-matched-content-rows-num
参数设置行数,并使用 data-matched-content-columns-num
参数设置列数。您必须同时设置这两个参数和 data-matched-content-ui-type
。
- 您可以设置的行数和列数须遵守一些限制。多重广告单元内的广告总数必须在 1 到 30 之间。如果您尝试展示的广告总数少于 1 或多于 30,则多重广告单元会显示为空白。
- 有时,我们可能无法显示您指定的确切行数和/或列数。例如,如果您设置了很多列,而您的多重广告单元的宽度不足以完全容纳所有列。在这种情况下,我们会调整行数和/或列数,以便您的广告能够恰当填充可用空间并提供良好的用户体验。
行和列的示例
此示例代码显示如何生成四行一列的多重广告单元(总共展示四个广告)。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-rows-num="4"
data-matched-content-columns-num="1"
data-matched-content-ui-type="image_stacked"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
此示例代码显示如何生成两行两列的多重广告单元(总共展示四个广告)。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-rows-num="2"
data-matched-content-columns-num="2"
data-matched-content-ui-type="image_stacked"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
此示例代码显示如何生成三行三列的多重广告单元(总共展示九个广告)。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-rows-num="3"
data-matched-content-columns-num="3"
data-matched-content-ui-type="image_stacked"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
此示例代码显示如何生成在移动设备上显示 4x1 网格、在桌面设备上显示 2x2 网格的多重广告单元。如果您拥有自适应网站,不妨使用此设置。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-rows-num="4,2"
data-matched-content-columns-num="1,2"
data-matched-content-ui-type="image_stacked,image_stacked"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
问题排查
自定义多重广告单元后,其呈现方式可能与您的预期并不完全一致。下面是一些有关多重广告单元的常见问题及其解决办法:
可能导致这种情况的原因有以下两种:
- 多重广告单元中的广告总数小于 1 或超过 30。您应该更改多重广告单元中的行数和/或列数,以便广告总数不超出限制。
- 您的多重广告单元对于设置的广告数量来说过宽。在这种情况下,您应该尝试缩小多重广告单元的宽度。
使用控制台查找多重广告单元中的错误
您可以使用浏览器中的控制台来确认是否已正确修改您的多重广告代码。例如,您可以通过控制台了解广告代码是否缺少必需参数或参数是否包含无效值。
如果您使用 Chrome,则可以按照以下步骤在开发者工具的控制台中测试您的广告代码:
- 访问您的多重广告单元所在的网页。
- 按 Ctrl + Shift + J (Windows/Linux) 或 Cmd + Opt + J (Mac)。
- 查看“控制台”面板中是否有错误消息。