VanBlog集成/接入GoogleAdsense广告

简介

建站可能是因为热爱，但生活需要Money。

建站一个常见的搞钱方式就是接广告，Google的Adsense广告集成相对容易。本文就记录一下主要使用VanBlog原生的功能点集成GoogleAdsense广告。

本文使用的VanBlog版本为v0.52.0。

注册开通GoogleAdsense

这个就不详细说明了，简要说一下步骤吧：

1. 注册Google帐号
2. 开通Google Adsense
3. 填写你的个人信息、收款信息等，收款信息较为重要，Google一般会根据你填写的地址邮递收益支票。
4. 在Google Adsense中绑定你的网站（域名）（此步需要配置DNS验证）

通过以上三步，完成网站认证后，算是完成了广告投放的前置工作。后面就需要实际操作将广告添加到网站中了。

添加广告到网站

Google提供的广告常用的有两种：自动广告、手动广告（自定义广告）。无论哪种广告添加到网站，简单来讲都可以为两步：

1. 生成广告脚本
2. 将广告脚本插入到网站页面

此处是一个手动插入的文章内广告：

自动广告

生成自动广告脚本

自动广告是Google提供的最简单的广告方式如果你已经完成了前置工作，在下图页面可以直接获取相关的自动广告脚本，其中广告细节设置可以对广告形式、广告位置、广告启停等进行设置。

点击上图【获取代码】后，可以弹出脚本信息及使用的相关说明，如下图：

配置自动广告脚本

找到脚本后，将脚本复制，即可到自己的VanBlog后台进行配置，配置时使用的功能是：【站点管理】→【系统设置】→【客制化】。PS：脚本不要直接使用本文中的哦！那是我的广告脚本。。。

现在【客制化】中有：自定义CSS、自定义Script、自定义Html（Body）、自定义Html（Head）。在老版本的VanBlog中只有自定义CSS和自定义Script，所以需要将脚本在自定义Script进行配置，而且配置内容需要稍微处理一下，新版本直接在自定义Html（Head）中配置即可。

1. 自定义Html（Head）

在自定义Html（Head）中将谷歌提供的脚本直接粘贴到输入框中即可，如下图。

1. 自定义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>

该部分脚本细心地朋友可能会发现，与【自动广告】的脚本是一样的，所以才有了上面拓展中的说明。

所以此参考自动脚本的配置即可，不再详细说明。

1. 广告容器脚本

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调整了每个广告的位置。

1. 广告刷新（显示）脚本

html<script>     (adsbygoogle = window.adsbygoogle || []).push({}); </script>

该部分脚本需要在以上两部分脚本配置完毕后，再使用，否则会报错。 其作用可以理解为：获取谷歌广告内容，并在广告位中插入广告内容。

该部分脚本推荐在自定义Script中配置，如下图：

因为上面第二部分脚本使用了两遍，所以该部分脚本也要使用两遍，原因自己体会吧~~~

总结

经过以上介绍，你应该可以使用VanBlog系统自带的功能完成一些简单的谷歌广告接入。并且应该能了解到，自定义广告的脚本可分为三部分：1.谷歌广告引入，2.广告容器设置，3.广告刷新（显示）。

拓展：文章内嵌广告

谷歌的【文章内嵌广告】也较常用，但VanBlog文章前台页面是后端渲染的，出于安全性等方面的考虑，所以禁用了文章正文嵌入脚本的部分功能，导致直接在写文章时将广告嵌入文章正文一般是无法展示的。但由于VanBlog后台提供了丰富的客制化功能，也可以实现【文章内嵌广告】的接入。

此处就不详细介绍了，只提出简单的实现思路，具体实现欢迎大家讨论：

1. 在客制化中将广告位插入到正文中，如：innerHTML。
2. 页面加载时，获取页面的广告位数量，按照数量循环刷新，防止部分广告未渲染。

PS：VanBlog作者真是太棒了，有问必答有求必应，妥妥的劳模，赞！

坑

虽然使用VanBlog经过以上步骤，你可以简单快速完成谷歌广告的接入，但还是有一个坑是目前VanBlog无法独自完成的，那就是ads.txt文件的处理。

官方指南：ads.txt指南

具体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. 其他请自行查阅谷歌广告规范~