×

Google AdSense:如何修改自适应广告代码

作者:Web前端之家2022.08.12来源:Web前端之家浏览:439评论:0
关键词:Google AdSense
微信公众号

微信公众号

500.jpg

回顾上篇文章:Google AdSense:展示广告单元的自适应行为简介,今天我们继续分享关于自适应代码:Google AdSense:如何修改自适应广告代码。一起往下看吧!

如果您发现我们的自适应广告代码无法满足您的所有需求,则不妨修改广告代码,更好地满足自适应网站的需求。下面这些示例将向您说明如何正确地进行此类修改:

重要提示

注意:本文中介绍的示例均为对 AdSense 广告代码的可接受修改。只要是按照这些经过批准的方式修改自适应广告代码,就不会违反 AdSense 合作规范。

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

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

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

  • 宽度不超过 500 像素的屏幕:320x100 广告单元。

  • 宽度在 500 像素到 799 像素之间的屏幕:468x60 广告单元。

  • 宽度在 800 像素以上的屏幕:728x90 广告单元。

<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-1234567890123456"
 crossorigin="anonymous"></script>

  <!--example_responsive_1-->

  <ins class="adsbygoogleexample_responsive_1"

       style="display:block"

       data-ad-client="ca-pub-1234567890123456"

       data-ad-slot="8XXXXX1"></ins>

  <script>

  (adsbygoogle = window.adsbygoogle || []).push({});

  </script>

针对您自己的网站调整此示例代码:

  1. 在您的 AdSense 帐号中创建一个展示广告单元,确保“广告尺寸”部分中的自适应选项保持选中状态。记下自适应广告代码中的以下信息:

    • 发布商 ID,例如 ca-pub-1234567890123456

    • 广告单元 ID (data-ad-slot),例如 1234567890。

  2. 在示例代码中:

    • 您的唯一名称只能包含英文字母 (A-Z)、数字和下划线,且第一个字符必须是英文字母。

    • 您每次调整此示例代码时都必须使用不同的唯一名称。

    • 将所有的 example_responsive_1 都替换为唯一名称,例如 Home_Page、front_page_123 等。

    • 您的唯一名称只能包含英文字母 (A-Z)、数字和下划线,且第一个字符必须是英文字母。 您每次调整此示例代码时都必须使用不同的唯一名称。 

    • ca-pub-1234567890123456 替换为您自己的发布商 ID。

    • 8XXXXX1 替换为您自己的广告单元 ID。

  3. 决定您希望广告单元在每类屏幕宽度上占据的尺寸:

    • 320px100px 替换为您希望为宽度不超过 500 像素的屏幕使用的广告单元的宽度和高度。

    • 468px60px 替换为您希望为宽度在 500 像素和 799 像素之间的屏幕使用的广告单元的宽度和高度。

    • 728px90px 替换为您希望为宽度超过 800 像素的屏幕使用的广告单元的宽度和高度。

    • 如果您希望采用示例代码中现有的广告单元尺寸,则不需要做出任何额外更改。

    • 如果您希望根据具体屏幕尺寸设置不同的广告单元尺寸,请在示例代码中进行以下操作:

  4. 复制修改后的广告代码,并将其粘贴到您希望展示广告的网页的 HTML 源代码中。

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

自适应广告代码高级功能示例

如果您发现我们的自适应广告代码无法满足您的所有需求,则不妨修改广告代码,通过 CSS 指定广告单元的确切尺寸。

注意:除非您对修改广告代码非常有把握,否则我们不建议您使用这些高级功能。

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

您可以修改自适应广告代码,通过 CSS 指定广告单元的可展开宽度和固定高度。以下示例显示如何进行修改:

高度固定的可展开宽度示例

下面的示例展示了如何修改自适应广告代码,以指定 90 像素的固定高度和 400 像素(最小宽度)到 970 像素(最大宽度)的可变宽度:

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

根据屏幕宽度指定确切尺寸

您可以修改自适应广告代码,通过 CSS 指定广告单元的确切尺寸。以下示例显示如何进行修改:

根据屏幕宽度指定确切尺寸的示例

如果知道在每种设备上最适合您的自适应网站的确切广告单元尺寸,则您可以使用 CSS3 媒体查询来设置自适应广告单元的尺寸。以下示例展示了如何修改广告代码以使用 CSS3 媒体查询:

<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@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"
    style="display:block;"
    data-ad-client="ca-pub-1234567890123456"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

@media 规则是一种 CSS3 语法,当前所有主流浏览器均支持这种规则。请注意,目前尚未正式支持通过 CSS 在外部样式表中设置广告单元的尺寸。

隐藏广告单元

在某些情况下,尤其是在较小的移动设备上,您可能完全不打算展示广告。如果您确实希望隐藏广告单元,可以使用 CSS 媒体查询来设置参数,确保不发出广告请求且不展示广告。以下示例显示如何进行修改:

针对特定屏幕尺寸隐藏广告的示例

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

<style type="text/css">
.adslot_1 { display: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-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

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

您的支持是我们创作的动力!
温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/GoogleAdSense20220812.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    sddddddddddddddVS的vVSVS但是v方法v方法v发v方法v发v发v方不方便德文法文...

  • 没人发言

    鸡肋的功能...

  • 23b

    这个你应该加群找群主才对吧...

  • 访客

    大佬,能提供能一下提取图片中的文字工具的源码吗,感谢...

  • qdxx

    SEO原创还可以的,新手学习下。...

  • Web前端之家

    已处理!...

  • 程序员路灯

    贵站友链已添加名称:程序员路灯地址:http://www.eqishare.com...

  • Web前端之家

    可以加群讨论...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2