创建Google Adsense自适应广告单元

自适应广告单元会自动调整尺寸来适应您的页面版式,让您可以支持各类设备(即:计算机、手机、平板电脑等)。无论用户使用哪种设备访问您的网站,自适应广告单元都能帮助您为他们提供出色的广告体验。

要创建新的自适应广告单元,请按以下步骤操作:

1、生成广告代码。
要为自适应广告单元生成广告代码,请执行以下操作:

按常规方法创建广告单元,确保在创建过程中选中广告尺寸下拉菜单中的“自适应”,然后点击保存并获取代码。
2、将广告代码放到您的网站上。
复制广告代码并粘贴到您希望展示广告的网页的 HTML 源代码中,请注意广告代码会动态继承父级容器的尺寸。

放置广告代码后,我们建议您在不同的设备和屏幕上测试您的广告,确保自适应功能正常工作。

水平形状示例

以下示例显示如何修改自适应广告代码,为广告单元指定大体的横向形状:

<ins class=”adsbygoogle”
    style=”display:block;”
    data-ad-client=”ca-pub-1234″
    data-ad-slot=”5678″
    data-ad-format=”horizontal”></ins>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

默认情况下,我们的自适应广告代码包含一个 data-ad-format 代码(值为“auto”),此代码可让自适应广告单元自动确定尺寸。不过,您可以为自适应广告单元设置大体形状,方法是将 data-ad-format 的值更改为以下任一值:“rectangle”、“vertical”、“horizontal”或这些值的任意组合形式(以逗号分隔),例如“rectangle, horizontal”。

确定尺寸或响应式布局

如果您只想针对某些屏幕尺寸展示广告,请使用 CSS 来实现这一目标。下面的示例演示了如何修改您的广告代码,以使用 CSS3 媒体查询针对特定屏幕尺寸隐藏广告:

<style type=”text/css”>
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class=”adsbygoogle adslot_1″
   data-ad-client=”ca-pub-1234″
   data-ad-slot=”5678″></ins>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

在该示例中,如果屏幕宽度少于 400 像素,则不会展示任何广告。

参考文章:https://support.google.com/adsense/answer/3213689?hl=zh-Hans&ref_topic=3641113&rd=1

Leave a Reply