欢迎光临
我们一直在努力

在 WordPress 的 AMP 网页中插入 Adsense

在文章WordPress开启加速移动页面AMP增强SEO中,我们提到了

AMP 技术的本质就是通过将页面精简,比如说去掉一些不是与网页内容而言不是很本质的东西。比如说为实现不同功能的各种各样 JavaScript 脚本。比说如常用的统计代码,广告代码,Mathjax 等。

今天我们讲讲怎么将 Adsense 广告插入到 WordPressAMP 网页中。

方法一:Accelerated Mobile Pages 插件

其实在 WordPress开启加速移动页面AMP增强SEO中,我们差不多讲全了。现在具体讲讲怎么用这个插件来插入广告。点击进入插件设置页面,选择 `Get Started` 中的 `Advertisement`,选择 `开启/关闭` 来控制你想要广告出现的位置。

Wordpress 开启加速移动页面 AMP 增强 SEO

那么这里面的数据应该怎么填写了?

在您的 AdSense 帐户中创建一个自适应广告单元,记下自适应广告代码中的以下信息(第二种方法也要用到这个哦):

  • 发布商 ID (data-ad-client)。
  • 广告单元 ID (data-ad-slot)。

我们假设如下就是对应的广告代码

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

那么对应的发布商 ID (data-ad-client) 就是 `ca-pub-1234567891234567`, 而广告单元 ID (data-ad-slot) 是 `1234567890`。将它们分别如下图填入再点击 `save changes` 保存即可。

在 WordPress 的 AMP 网页中插入 Adsense

方法二:免插件实现

这里我们将通过修改官方的 `AMP` 插件来达到目的。如图所示进入编辑 `AMP` 插件页面,我们要修改的是 `amp/templates/single.php` 文件。

在 WordPress 的 AMP 网页中插入 Adsense

首先,我们将如下的 JS 代码放入到 `amp/templates/single.php` 文件中 `head` 标签内部,如下图所示。

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

在 WordPress 的 AMP 网页中插入 Adsense

然后将如下代码块复制到你想要广告出现的地方。

<amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

对于非首屏的广告展示位置,建议使用 300×250 的自适应 AMP 广告单元。使用 AMP 自适应布局选项后,您的广告单元将会根据用于查看该广告单元的设备的尺寸来自动调整自身尺寸。

要创建 300×250 的自适应 AMP 广告单元,请将下列代码中的值 data-ad-client 和 data-ad-slot 替换为第一种方法中你自己的发布商 ID 和广告单元 ID。

比如说文章上方,如图所示。

在 WordPress 的 AMP 网页中插入 Adsense

如果你想加到别的地方,只要找好位置,将广告代码块复制过去即可。是不是依然很简单?

总结

个人推荐第一种方法,简单方便,而且各种功能都很适用,简直是 WordPress 实现 AMP 杀人灭口居家旅行的必备良药。

参考文献:创建 AMP 广告单元

转载请注明:满忘近 » 在 WordPress 的 AMP 网页中插入 Adsense

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址