最新AdSense广告代码优化技巧

AdSense丰富的广告资源与投放方式深受广大站长喜爱，虽然Google已离开了中国大陆市场，但这不影响AdSense的发展。 AdSense 目前有展示广告、信息流广告、文章内嵌广告、匹配内容（即将停用）这四种广告单元。

注：广告单元是指在同一段 AdSense 广告代码的作用下展示出来的一个或多个 Google 广告。

AdSense广告单元的类型

• 展示广告单元
  • 这种格式的广告适用范围广，在任何空间都能投放。
  • 默认情况下，展示广告属于自适应广告，也就是说它们会自动根据您的页面布局和用户的设备屏幕调整自身尺寸。
  • 这种格式的广告可进行自定义，以显示固定尺寸的广告。
  • 此外，这种格式的广告还与 AMP 网页兼容。
• 信息流广告单元
  • 在信息流（例如，文章或产品列表）内投放的原生广告，看起来十分自然，可提供良好的用户体验。
• 文章内嵌广告单元
  • 完美融入网页段落之间的原生广告，可增强用户的阅读体验。
• 匹配内容单元（2022年3月1日停用）
  • 一种内容推荐功能，可向网站访问者宣传您的内容，有望提升收入、网页浏览量并延长用户在网站上停留的时间。

AdSense广告代码优化技巧

这里主要介绍展示广告的优化技巧，因为信息流与文章内嵌广告单元可以在 AdSense广告单元创建或修改中进行自定义，基本上可以满足所需的展示样式需求。

AdSense自适应广告代码参数

AdSense自适应广告是一大特色功能，非常适合当下流行的响应式网页。为了更好的适应部分网页的一些特殊需求，Google AdSense允许自定义一些参数，这些参数是Adsense可接受修改的，不会违反 AdSense 合作规范。

通过自适应广告代码参数，可以更改自适应型展示广告单元的行为。例如，指定广告单元应采用的大体形状。要使用自适应广告代码参数，您通常需要对自适应广告代码稍作更改。例如，您可以将 data-ad-format 参数的值从”auto”更改为”rectangle”。注： “auto”为完全自动适应宽度和高度，”rectangle” 广告形状为矩形、”vertical”为垂直形状、”horizontal”为水平横幅形状。

代码示例：将广告改为水平横幅形状

/* 代码示例 */
<ins class="adsbygoogle"
    style="display:block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"
    data-ad-format="horizontal"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});
</script>

注意以上参数仅针对桌面设备起作用，在移动设备以上参数是无效的。

移动设备仅支持data-full-width-responsive参数修改。该参数为是否允许广告进行全宽展示，也就是说如果值为”true”时，当父容器宽度为300px，而设备屏幕宽度有450px的时候，该广告单元宽度会小于或等于450px，反之，如果值为”false”的时，则广告单元宽度会小于或等于300px。

代码示例：Googel Adsense建议将data-full-width-responsive参数设置为”true”，这样可以提高广告收入。

/* 代码示例 */
<ins class="adsbygoogle"
    style="display:block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"
    data-ad-format="auto"
    data-full-width-responsive="true"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});
</script>

注意：如果代码中没有指定 data-full-width-responsive 参数，则默认为”true”。

AdSense自适应广告代码样式修改

AdSense除了前文介绍的一些自带参数可以自定义之外，还可以通过CSS修改其样式。

代码示例：当屏幕大于768时才展示AdSense广告，仅需通过CSS就能实现。

/* 小屏幕不展示任何Adsense广告 - 代码示例 */
@media (max-width: 769px) {
	.adsbygoogle{display:none;}
}

.adsbygoogle是Adsense的默认样式，所以以上CSS将对所有广告单元生效，如果仅针对部分广告单元，可以在广告代码中添加一个自定义样式名，看以下示例：

广告代码：代码中加入了zzbgg样式

/* 代码示例 */
<ins class="adsbygoogle zzbgg"
    style="display:block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"
    data-ad-format="auto"
    data-full-width-responsive="true"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});
</script>

CSS代码：通过CSS控制zzbgg样式在小屏幕上不展示

/* 小屏幕不展示含有zzbgg样式名的Adsense广告 */
@media (max-width: 769px) {
	.zzbgg{display:none;}
}

针对不同屏幕宽度设置确切广告单元尺寸的示例（官方示例）

此示例将介绍如何修改自适应代码才能为三类屏幕宽度（即移动设备、平板电脑和桌面设备）设置具体的广告单元尺寸。即使以前没有任何 CSS 媒体查询或是 AdSense 广告代码修改经验，也可以理解此示例。

下面是一段修改后的自适应广告代码，这段代码会为每种屏幕宽度设置下列确切的广告单元尺寸：

• 宽度不超过 500 像素的屏幕：320×100 广告单元。
• 宽度在 500 像素到 799 像素之间的屏幕：468×60 广告单元。
• 宽度在 800 像素以上的屏幕：728×90 广告单元。

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX11XXX9" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

以上代码要注意将发布商 ID与广告单元 ID修改成自己的

• 发布商 ID，例如 ca-pub-1234567891234567
• 广告单元 ID (data-ad-slot)，例如 1234567890。

指定可展开宽度和固定高度

以下示例显示如何修改自适应广告代码，以指定高度和宽度，其中：高度为 90 像素（固定），宽度在 400 像素（最小值）到 970 像素（最大值）之间。

<ins class="adsbygoogle"
   style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-XXXXXXX11XXX9"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX11XXX9" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

通过data-ad-status参数隐藏未展示内容的广告单元

有时候 AdSense 的广告单元会出现未展示广告的情况，这个时候如果空一块在那，确实影响美观。

将以下 CSS 样式添加到网页中，以自动隐藏广告空缺的广告单元：

/* HTML */
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

/* CSS */
ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

以下示例，将在Adsense广告单元出现广告空缺时展示自己的图片广告

/* HTML */
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-1234567890"
     data-ad-slot="1234567890">
    <a href="//zhanzhangb.com"><img src="https://cdn.zhanzhangb.com/广告图片.jpg" width="300px" height="250px"></a>
</ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

/* CSS */
ins.adsbygoogle a {
    display: none !important;
}
ins.adsbygoogle[data-ad-status="unfilled"] a {
    display: block;
}

如果你还没有Adsense账户，点这里注册：https://www.google.cn/adsense/start/。