推广

宝塔面板￥3188礼包

谷歌AdSense如何自定义自适应匹配内容单元

什么是匹配内容单元

匹配内容是一项免费服务，它可以帮助您向网站访问者宣传网站中的相关内容，从而增加网页浏览量和用户在网站上的停留时间。简单来说就是一种内容互动单元，会自动采集扫描网站的内容并展示，如下图所示：

在某些情况下，我们需要修改匹配内容单元的样式，也就是自定义样式，但是默认的自定义样式仅仅提供了字体，标题，背景以及尺寸的自定义，我们需要修改如行数，列数以及其他样式如何修改呢？其实只要参考技术宅下面的内容即可轻松搞定。

自定义匹配内容单元

如果您对自适应匹配内容单元有特定要求，则可以向您的广告代码添加参数，以自定义内容的展示方式。借助这些参数，您可以更改匹配内容单元的布局，并指定其中推荐内容的行与列的排列方式。

您还可以使用参数针对移动设备和桌面设备定义不同的设置。例如，如果您赋予布局参数单一值，则您的匹配内容单元将在移动设备和桌面设备上呈现相同的布局。如果您赋予布局参数两个值，则匹配内容单元将在移动设备上呈现一种布局（第一个值），在桌面设备上呈现另一种布局（第二个值）。这些参数也适用于 AMP 匹配内容单元。

请注意，这些选项仅适用于自适应匹配内容单元，并且必须添加所有参数才能使自定义设置有效。修改广告代码后，请务必在不同的设备和屏幕上测试匹配内容单元，以确保它们能够正常工作。

注意：本文中介绍的示例均为对 AdSense 广告代码的可接受修改。如果您按照这些经过批准的方式修改匹配内容代码，将不会违反 AdSense 合作规范。

更改匹配内容单元的布局

您可以使用布局参数 (data-matched-content-ui-type) 来控制匹配内容单元中文字和图片的排列方式。例如，您可以选择并排放置图片和文字、将图片放在文字上方等等。

提供以下布局选项：

图片和文字并排放置

在这种布局中，图片和文字并排显示。要选择此布局，请将 data-matched-content-ui-type="image_sidebyside" 参数添加到您的广告代码中。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
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"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
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"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
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"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
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"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
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"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
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>

指定匹配内容单元中的行数和列数

匹配内容单元内的推荐内容排列在网格中。您可以指定要在网格中显示的行数和列数。例如，您可以将匹配内容单元设置为 2×2 方形、4×1 柱形等。

您可以使用 data-matched-content-rows-num 参数设置行数，并使用 data-matched-content-columns-num 参数设置列数。您必须同时设置这两个参数和 data-matched-content-ui-type。

注意：

  • 您可以设置的行数和列数须遵守一些限制。匹配内容单元中的推荐内容总数必须在 1 到 30 之间。如果您尝试展示的推荐内容总数少于 1 或多于 30，则匹配内容单元会显示为空白。
  • 有时，我们可能无法显示您指定的确切行数和/或列数。例如，如果您设置了很多列，而您的匹配内容单元的宽度不足以完全容纳所有列。在这种情况下，我们会调整行数和/或列数，以便您的推荐内容能够恰当填充可用空间并提供良好的用户体验。

行和列的示例

4×1（移动设备和桌面设备）

此示例代码显示如何生成 4×1（行x列）的匹配内容单元（总共展示四项推荐内容）。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
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>

2×2（移动设备和桌面设备）

此示例代码显示如何生成 2×2（行x列）的匹配内容单元（总共展示四项推荐内容）。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
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>

3×3（移动设备和桌面设备）

此示例代码显示如何生成 3×3（行x列）的匹配内容单元（总共展示九项推荐内容）。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
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>

针对自适应网站的 4×1（移动设备）和 2×2（桌面设备）

此示例代码显示如何在移动设备上生成 4×1 网格的匹配内容单元，并在桌面设备上生成 2×2 网格的匹配内容单元。如果您拥有自适应网站，不妨使用此设置。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
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，则可以按照以下步骤在 DevTools 控制台测试您的广告代码：

1、访问您的匹配内容单元所在的网页。
2、按 Ctrl + Shift + J (Windows/Linux) 或 Cmd + Opt + J (Mac)。
3、查看“控制台”面板是否有错误消息。

谷歌自适应自定义Adsense如何匹配内容单元
技术分享

使用WordPress自带工具修复优化数据库

2020-5-3 17:38:23

技术分享

Chevereto增加百度AI审核功能，并开启图片鉴黄

2020-5-6 13:15:16

猜你喜欢

WordPress增加判断是否投放投放谷歌AdSense广告单元代码

01.8k

美军公开收购未修补安全漏洞 用于网络战

046k

新技术能使浏览器性能提升20倍

043.9k

脑洞大开的谷歌，这次要把Android和Chrome操作系统合并

040.1k

简单CSS实现嵌入FLASH视频自适应长宽

063.3k

自定义wordpress的登录页面

091.7k
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索

  • 扫码打开当前页

  • 微信公众号

返回顶部

关于我们

技术宅，专注分享，专注技术！分享互联网科技新闻轶事，分享生活小常识，各种数码使用小技巧！互联网的精神本就是分享，我们坚信分享会带来更多的进步！

热门分类

宅自留地

支持与服务

技术宅官方邮箱在此

Copyright © 2020 技术宅 苏ICP备17056378号 苏公网安备32010202010371号 - 查询 32 次，耗时 0.1649 秒 南京市玄武区酷芯壳网络科技中心 提供技术支持 安全联盟认证

首页专题认证
搜索菜单我的