Hexo站点Next主题添加google adsense广告

本文转载自: https://www.93bok.com

前言

无意之间看到了google adsense的广告,于是就想到给我的站点也弄一个,本来以为是很简单的事,参考了很多资料,终于是部署成功了,效果可查看我的站点:www.93bok.com

一、注册google adsense

此处省略,可参考此文

二、把广告代码粘贴到网站上

这一步是最关键的,也是这一步花费了我很长的时间

1、首先我按照google adsense的说明,直接用了“自动广告”

FSIhPs.png

2、添加上图中的代码到你的head.swig文件中
vim /data/themes/next/layout/_partials/head/head.swig
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-8243248314488866",
          enable_page_level_ads: true
     });
</script>
3、提交代码查看网站是否显示广告
hexo clean && hexo g && hexo d

问题来了,部署完代码之后,等了很久,1天时间,也没看到有广告显示,使用移动端打开网站试了一下,哎哟,移动端有广告显示,但是桌面端死活不显示广告。找了很多资料,没有一个可以解决的。

4、桌面端打开网站,debug一下(Ctrl+Shift+i打开),看一下代码是不是部署成功了

FSoBo4.png

代码已经部署成功了,为什么桌面端不显示广告呢,实在找不到解决办法,于是我发邮件给google adsense咨询,不得不说,人家的办事效率以及态度都是很好的,我以为发送了也没什么用,因为他们每天收到的邮件不知道有多少,怎么会搭理我。没想到的是,他们给我回复了:

FSoHSI.png

就跟你们看到的上图中一样,我来来回回和他回复了好几封邮件,就这样,终于在他的带领下,我的问题解决了。

5、添加广告单元

adsense的大概意思是建议我换成“广告单元”,而不是“自动广告”

FSTFXV.png

6、如上图,新建完广告单元之后,获取代码,把代码部署你想让广告显示的位置

这里获取代码之后,我是在文章结束,评论的上方显示代码,所以编辑comments.swig文件

vim /data/themes/next/layout/_partials/comments.swig
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- head -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8243248314488866"
     data-ad-slot="1571553111"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

然后又想在头部显示广告,又编辑head.swig文件

vim /data/themes/next/layout/_partials/head/head.swig
<div align="center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- head -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8243248314488866"
     data-ad-slot="1571553111"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

可参考这里

FSTb4J.png

三、检查网站广告

等到把上边的步骤都做完之后,为了确保已经正确部署,你可以打开站点,然后查看网站源代码,找找看是不是有你部署的那些广告代码。

猜你喜欢

转载自www.cnblogs.com/93bok/p/12425212.html
今日推荐