关于使用 Hugo 博客配置 Google AdSense 的教程。
注:这篇文章是从旧的博客系统中迁移过来的、我觉得还存在价值的文章。但是由于时间关系,可能已经不再是最佳实践,请仅作参考。
本博客有且只有在该文章末尾添加了测试用的广告。
1、注册 Google AdSense
官方链接:Google AdSense

填入链接和邮箱:

接着使用 Google 账号登录以完成绑定:

2、确认网站所有权和审核
在首页,获取用以认证用的代码:
注:如果你的 Google 账号没有收款信息,需要先在收款人信息页面做填写,才能看到如下页面。

这里提示需要放置在 <head> 和 </head> 标记之间,那么还是直接去修改主题内的文件,我的路径为:\themes\pure\layouts\partials\head.html

重新 build 页面并发布后,在页面上确定已经添加代码并开始审核:


审核结束后如果看到以下页面说明审核通过了:

3、纠正 ads.txt 文件
你可能会出现这样的错误:

修正方法官方也给出了:

普通的项目直接在网站根目录下添加 ads.txt 文件就行了,但是通过 Hugo 渲染的模板项目 ads.txt 则需要放在静态文件目录下:/static

渲染一下,public 的目录下有 ads.txt 就说明成功了:

4、选择合适的广告类型
官方给了 3 种广告单元可供选择:

我是给博文添加的,理论上信息流和文章内嵌类型的点击率更高:前者和文章或网页内容会有所关联,后者多数情况会以大图形式融入文章中。但是我个人是极度厌恶技术博客内插入广告的,这里只拿普通的展示广告做例子:

接着就能拿到代码段了:

如果你是给自己网站的前端页面添加广告的话,直接复制到 HTML 页面中的指定位置做调整就行了。
5、为 Hugo 静态博客新建 Shortcodes 广告模板以方便 Markdown 的书写和渲染
Hugo Shortcodes 官方介绍:Shortcodes
引入 YouTube 视频的官方案例:single-positional-example-youtube
如果你只想实现广告或其他差不多的简单功能,直接和我继续操作下去也可以。
明确一下,Hugo 模板的查找顺序是:
- /layouts/shortcodes/
.html - /themes/
/layouts/shortcodes/ .html
即优先使用主目录下的模板。
知道了模板存放路径,那么命名呢?命名也很简单,模板的 .html 文件名字可以自定义,在 Markdown 中书写的时候使用相同的名字就行了,例如我创建了 google-adsense.html 这个模板:

那么我在文章的 .md 文件中这样调用,后期 Hugo 就会自动渲染了:
{{</* google-adsense */>}}
把刚刚的 Google AdSense 的广告代码复制过来,并将部分值设定为用参数传入, google-adsense.html 的内容就变成了这个样子:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-{{ index .Params 0 }}"
crossorigin="anonymous"></script>
<!-- 测试广告 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-{{ index .Params 0 }}"
data-ad-slot="{{ index .Params 1 }}"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
调用:
{{</* google-adsense 7999470995937770 3998950649 */>}}
广告测试样例:
注意:广告生效需要时间,从 1 小时到 24 小时不等,期间你打开页面可能会发现广告处空白并在控制台报错:
Failed to load resource: the server responded with a status of 400 ()参考讨论:Google adsense responding the server responded with a status of 400 (),一般情况下耐心等待即可。
结束。