网站接入GoogleAdsense广告（VanBlog版）
## 简介 建站可能是因为热爱，但生活需要Money。 建站一个常见的搞钱方式就是接广告，Googl
渲染中...
## 简介
建站可能是因为热爱，但生活需要Money。
建站一个常见的搞钱方式就是接广告，Google的Adsense广告集成相对容易。本文就记录一下主要使用`VanBlog`原生的功能点集成GoogleAdsense广告。
**本文使用的VanBlog版本为`v0.52.0`。**
<div class="article-ads"></div>
<!-- more -->
## 注册开通GoogleAdsense
这个就不详细说明了，简要说一下步骤吧：
1. [注册Google帐号](https://accounts.google.com/signup/v2/webcreateaccount?biz=false&cc=SG&dsh=S1779411376%3A1682069492985185&flowEntry=SignUp&flowName=GlifWebSignIn&ifkv=AQMjQ7SKPzVDZeNBVKrk1Fmt2umoS9i6jUrPcaE5ew81jlgzkKylBKvdSD5oMbQlpJiaykbRFYQ1Tw)
2. [开通Google Adsense](https://adsense.google.com/start/)
3. 填写你的个人信息、收款信息等，收款信息较为重要，Google一般会根据你填写的地址邮递收益支票。
4. 在Google Adsense中绑定你的网站（域名）`（此步需要配置DNS验证）`
通过以上四步，完成网站认证后，算是完成了广告投放的前置工作。后面就需要实际操作将广告添加到网站中了。
## 添加广告到网站
Google提供的广告常用的有两种：自动广告、手动广告（自定义广告）。无论哪种广告添加到网站，简单来讲都可以为两步：
1. 生成广告脚本
2. 将广告脚本插入到网站页面
此处是一个手动插入的文章内广告：
<div class="article-ads"></div>
### 自动广告
#### 生成自动广告脚本
自动广告是Google提供的最简单的广告方式如果你已经完成了前置工作，在下图页面可以直接获取相关的自动广告脚本，其中广告细节设置包括：广告形式、广告位置、广告启停等。
点击上图【获取代码】后，可以弹出脚本信息及使用的相关说明，如下图：
#### 配置自动广告脚本
找到脚本后，将脚本复制，即可到自己的VanBlog后台进行配置，配置时使用的功能是：【站点管理】→【系统设置】→【客制化】。`PS：脚本不要直接使用本文中的哦！那是我的广告脚本。。。`
现在【客制化】中有：自定义CSS、自定义Script、自定义Html（Body）、自定义Html（Head）。在老版本的VanBlog中只有自定义CSS和自定义Script，所以需要将脚本在自定义Script进行配置，而且配置内容需要稍微处理一下，新版本直接在自定义Html（Head）中配置即可。
1. 自定义Html（Head）
在自定义Html（Head）中将谷歌提供的脚本直接粘贴到输入框中即可，如下图。
2. 自定义Script
**仅推荐没有`自定义Html（Head）`功能的VanBlog版本使用！**
在自定义Script中加入如下配置（注意改成你自己的广告脚本）
脚本前加个`</script>`，脚本后加个`<script>`
```html
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8842635629279684" crossorigin="anonymous"></script>
<script>
```
#### 拓展
无论你开不开启自动广告，都推荐在`自定义Html（Head）`中配置如下脚本，也就是[配置自动广告脚本](#配置自动广告脚本)中的`1.自定义Html（Head）`，至于原因，咱们下面再说。（**注意将脚本改为你自己的广告脚本**）
```html
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8842635629279684" crossorigin="anonymous"></script>
```
### 手动广告（自定义广告）
> 以下内容建立在VanBlog高版本（含有`自定义HTML（body）`功能的版本）下，以`自定义侧边栏广告`为例介绍配置过程。低版本应该也能够实现，但可能相对麻烦，所以如果你的版本较低，建议升级！
#### 获取手动广告脚本
手动广告需要先创建，再获取脚本，如下图进入【按广告单元】设置页面，选择展示广告、信息流广告等四种广告类型中的一种，进行广告创建。
其中本人常用的是【展示广告】、【文章内嵌广告】。
简单介绍一下展示广告和文章内嵌广告：
- 展示广告：可以自定义广告大小、长宽，如自定义侧边栏广告。
- 文章内广告：可以自适应文章内容长宽，看起来像是文章内的图片一样。
创建完广告后，点击获取代码即可进入脚本页面，如下图：
咱们使用HTML类型的代码即可。
#### 配置手动广告脚本
获取到脚本后，可以先观察一下脚本的内容，如下：
```html
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8842635629279684"
crossorigin="anonymous"></script>
<!-- 侧边栏广告 -->
<ins class="adsbygoogle"
style="display:inline-block;width:200px;height:500px"
data-ad-client="ca-pub-8842635629279684"
data-ad-slot="9778797459"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
```
经过测试，该脚本可以拆分成三部分，并且可以独立配置：
1. 谷歌广告单元脚本引入
```html
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8842635629279684"
crossorigin="anonymous"></script>
```
该部分脚本细心地朋友可能会发现，与【自动广告】的脚本是一样的，所以才有了上面[拓展](#拓展)中的说明。
所以此部分参考[自动脚本的配置](#配置自动广告脚本)即可，不再详细说明。
2. 广告容器
```html
<!-- 侧边栏广告 -->
<ins class="adsbygoogle"
style="display:inline-block;width:200px;height:500px"
data-ad-client="ca-pub-8842635629279684"
data-ad-slot="9778797459"></ins>
```
该部分脚本，简单理解就是一个html元素，用于存放Google广告图片的（`虽然广告一般不仅仅是简单的图片，但这么理解也没啥大问题`）。
所以该部分脚本放置在您想要插入广告的页面源码中即可。在VanBlog中推荐在自定义HTML（Body）中配置，如下图：
**提示：图中通过一个侧边栏广告标签（自定义标签）插入了两个广告位，并且使用css的`position`调整了每个广告的位置。**
3. 广告刷新（显示）脚本
```html
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
```
**该部分脚本需要在以上两部分脚本配置完毕后，再使用，否则会报错。** 其作用可以理解为：获取谷歌广告内容，并在广告位中插入广告内容。
该部分脚本推荐在自定义Script中配置，如下图：
因为上面设置了两个广告容器，所以该部分脚本也要使用两遍，原因自己体会吧~~~
## 总结
经过以上介绍，你应该可以使用VanBlog系统自带的功能完成一些简单的谷歌广告接入。并且应该能了解到，自定义广告的脚本可分为三部分：1.谷歌广告引入，2.广告容器设置，3.广告刷新（显示）。
### 拓展：文章内嵌广告
谷歌的【文章内嵌广告】也较常用，但VanBlog文章前台页面是后端渲染的，出于安全性等方面的考虑，所以禁用了文章正文嵌入脚本的部分功能，导致直接在写文章时将广告嵌入文章正文一般是无法展示的。但由于VanBlog后台提供了丰富的客制化功能，也可以实现【文章内嵌广告】的接入。
此处就不详细介绍了，只提出简单的实现思路，具体实现欢迎大家讨论：
1. 在客制化中将广告位插入到正文中，如：`innerHTML`。
2. 页面加载时，获取页面的广告位数量，按照数量循环刷新，防止部分广告未渲染。
**PS：VanBlog作者真是太棒了，有问必答有求必应，妥妥的劳模，赞！**
## ads.txt 的坑
虽然使用VanBlog经过以上步骤，你可以简单快速完成谷歌广告的接入，但还是有一个坑是目前VanBlog无法独自完成的，那就是`ads.txt`文件的处理。
官方指南：[ads.txt指南](https://support.google.com/adsense/answer/7532444?hl&sjid=2395357316123191762-AP)
具体`ads.txt`的作用可以查阅指南，这里说一下直观的要求。
比如我的网站是`https://oldmoon.top`，那么Google AdSense建议通过`https://oldmoon.top/ads.txt`可以访问并显示他提供给你的内容（`在Google AdSense可以下载你的ads.txt文件`）。
我的做法是，关闭VanBlog自带的HTTPS解析功能，使用`Nginx Proxy Manager`自己代理`https://oldmoon.top`到VanBlog系统，并配置独立的拦截`/ads.txt`，将其请求转发到另一个`Nginx`，用于访问`ads.txt`文件。
当然如果你有更好的解决方案，欢迎在评论中讨论！
### 其他建议
1. 不要刷网站的广告访问量，小心被封号；
2. 不要发布歧视、煽动战争等等有害言论，小心被停止广告推送；
3. 其他请自行查阅谷歌广告规范~
## 赞助
如果你觉得本文对你有用，想要给作者一些赞助，可以动动小手点击下方广告给予支持，万分感谢~
您的每次点击都能给予作者更多分享的动力！**请无情点击吧：**
<!-- 文章内嵌广告位 -->
<div class="article-ads"></div>END
评论
登录后查看和发表评论
前往登录