2023-04-21
班门弄斧
00

目录

简介
注册开通GoogleAdsense
添加广告到网站
自动广告
生成自动广告脚本
配置自动广告脚本
拓展
手动广告(自定义广告)
获取手动广告脚本
配置手动广告脚本
总结
拓展:文章内嵌广告
ads.txt 的坑
其他建议
赞助

简介

建站可能是因为热爱,但生活需要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集成/接入GoogleAdsense广告

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

VanBlog集成/接入GoogleAdsense广告

配置自动广告脚本

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

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

  1. 自定义Html(Head)

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

VanBlog集成/接入GoogleAdsense广告

  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)功能的版本)下,以自定义侧边栏广告为例介绍配置过程。低版本应该也能够实现,但可能相对麻烦,所以如果你的版本较低,建议升级!

获取手动广告脚本

手动广告需要先创建,再获取脚本,如下图进入【按广告单元】设置页面,选择展示广告、信息流广告等四种广告类型中的一种,进行广告创建。

其中本人常用的是【展示广告】、【文章内嵌广告】。

VanBlog集成/接入GoogleAdsense广告

简单介绍一下展示广告和文章内嵌广告:

  • 展示广告:可以自定义广告大小、长宽,如自定义侧边栏广告。
  • 文章内广告:可以自适应文章内容长宽,看起来像是文章内的图片一样。

创建完广告后,点击获取代码即可进入脚本页面,如下图:

VanBlog集成/接入GoogleAdsense广告

VanBlog集成/接入GoogleAdsense广告

咱们使用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)中配置,如下图:

VanBlog集成GoogleAdsense广告

提示:图中通过一个侧边栏广告标签(自定义标签)插入了两个广告位,并且使用css的position调整了每个广告的位置。

  1. 广告刷新(显示)脚本
html
<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

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

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

VanBlog集成/接入GoogleAdsense广告

因为上面设置了两个广告容器,所以该部分脚本也要使用两遍,原因自己体会吧~~~

总结

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

拓展:文章内嵌广告

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

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

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

PS:VanBlog作者真是太棒了,有问必答有求必应,妥妥的劳模,赞!

ads.txt 的坑

虽然使用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. 其他请自行查阅谷歌广告规范~

赞助

如果你觉得本文对你有用,想要给作者一些赞助,可以动动小手点击下方广告给予支持,万分感谢~

您的每次点击都能给予作者更多分享的动力!请无情点击吧:

如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:DingDangDog

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!