前言

很多项目的开始都是因为情怀和热爱,“为爱发电”是一件很值得尊敬的事情,然而大量“为爱发电”的项目最后却不得不因”难以为继“而被迫停服。

园子就是很好的案例,它一直以来就是一个很纯粹的技术分享平台,但纯爱是最容易受伤的,不过哪怕是现在逐步探索商业化了,和”牛皮藓“满天飞,看个文章还要登录的某N(不点名,你知道我在说谁)相比,依然是一股清流。

说回本文主题,分享两个我个人开发的内置 Google 广告位的Typecho主题,我希望使用这两款主题搭建网站的同学能够永不停服,所以我一开始就想着把谷歌广告集成进去,虽未必能赚多少钱,但只要持续输出文章、作品,确保站点是活着的,一年下来挣个服务器和域名的费用总还是可以的吧!

1. 展示效果

篇幅有限,主题效果不截图展示,大家可以通过下面各小节中的项目地址详细查看,这里主要介绍 Google Ads 集成的问题,本以为集成 Google Ads 会是一件很简单的事情,最多调一下样式就好了,但结果为了能让广告正常显示,却很费了一些力气,主要就是PJAX这种页面无跳转的技术(也包括VueReact等前端SPA框架)与 Google Ads 存在兼容性问题,本文不谈坎坷的道路,后面单独写一篇文章来记录踩坑过程,这里直接展示一下集成后的效果。

1.1 博客主题

项目地址

https://github.com/ZShijun/WaterDrop

为了兼顾收益和用户体验,我一共为博客主题设置了三个广告位:侧边栏底部,文章页头部和文章页尾部。由于窄屏没有侧边栏,因此,窄屏其实只有两个广告位。

文章页头部效果

文章页尾部效果

侧边栏效果

1.2 导航主题

项目地址

https://github.com/ZShijun/BeaconNav

文章页效果

导航主题实在没什么好的位置,就只在详情页中设置了一个广告位。

怎么样?无论是博客主题,还是导航主题,广告嵌入的都还算和谐,不恶心吧?如果你用了我开发的主题,也赶紧试试吧,蚊子再小也是肉,给自己稍微增加一点创作的动力吧!

2. 如何使用

两个主题的设置方式大同小异,因此我以博客主题为例演示说明。配置方式很简单,我在主题配置页面增加了一个谷歌广告的配置项,如下图所示:

其中,publisher是发布商ID,后面三个可以理解为广告位的编号,都可以直接从 Google Ads 后台获取,如下图所示:

就这么简单,搞定了,至于怎么操作以及原因,我打算后面再写一篇文章来单独解释。

不出意外的话,广告很快就能在你的网站中展现出来了,所以,首要问题还是得先注册一个 Google Ads 账号,心动就赶紧行动起来吧!

3. 鱼和熊掌

如果你不希望你的网站显示广告,主题中的谷歌广告的配置直接空着就行了,不显示广告起码有以下两个优点:

  1. 没有了广告,网站会更纯净一些,用户体验也会好一些,当然,每个广告位都可以单独选择是否投放;
  2. 由于PJAXGoogle Ads 兼容性的问题,接入广告后,向文章内容页的跳转会退化成页面跳转模式,而关闭广告后,又可以恢复原来的 PJAX 路由模式,文章页加载也会快一些。

事实上,上述优点只是理论上的,实际感受未必有那么明显,因为广告并不是每次都显示,也并不是所有广告位都会同时显示。至于性能的变化,访问者也未必会有明显的感受。

总之,不管怎么样,收益和体验,就如同鱼和熊掌,二者不可兼得,总还是需要权衡一下的。

结语

到此并没有结束,后续还要继续观察观察,例如,屏蔽一些在咱们这边比较敏感的广告,并且,事实上,广告展示可能还有BUG,路也没有完全走通,套句名言:这才刚刚开始!

说到这里,为了调试,我这几天几乎每天都会刷新上百次广告,现在都不太敢自己访问自己的网站了,生怕一不小心就被判定违规了,所以测试的可能不太充分,如果你在使用过程中发现新的问题,欢迎留言反馈,我会尽快验证修复。

感兴趣的赶紧去 GitHub 上下载源码安装试试吧!