Hexo Next 接入 google AdSense 广告

折月煮酒 提交于 2020-02-08 17:05:23

前言

个人网站 www.yanlongwang.net 已经运营近一年,每日的浏览量不断上升,现在维持在两位数,打算承接一点广告赚睡后收入,用来维持网站的日常运营,希望能覆盖网站的服务器和域名开销。

FYI 本博客实时更新于 个人网站 - Hexo网站引入google AdSense,请移步阅读最新内容。

目前,自己通过 Google AdSense 在个人网站的广告位承接广告,下面主要讲解从注册 Google AdSense,到审核通过后设置广告的基本操作。

点击 www.yanlongwang.net 测试体验,如下图。在侧边栏下部应该可以看到 AdSense 推送的广告,如果看不到,查看浏览器是否安装了 AdBlock 等广告屏蔽插件,请暂时关闭这些插件。

// 系统
- Next Theme
// 在 hexo 目录下, 输入 “hexo version” 可以查看 Next 及依赖的版本
- hexo: 3.8.0
- hexo-cli: 1.1.0
- ...

广告联盟选择

在国内,比较知名的广告联盟都要求网站备案,比如百度广告联盟,否则无法承接广告,而自己的小网站暂时没有备案,所以只能选择国外的广告联盟。

国外的广告联盟,毫无疑问会选择 Google AdSense,申请门槛相对较低。网站一般运营几个月,有十几篇文章,是比较容易通过审核的。并且,AdSense 的广告相比百度联盟的还是比较优质的,所以最后选择 google AdSense 联盟。

注册 AdSense 账号

  • 注册网站 搬梯子登录
  • 点击右上角 Get started 进行注册;如有 google 账号,可以直接点击 sign in 进行登录。

  • 填写完信息之后,页面会生成一段代码,要求你放置到你的网站的标记中。注意,当审核通过后,这一段代码在开启“自动广告”后,会自动推送广告。
    • 针对 Next Theme,可以复制代码到 themes\next\layout\_partials\head.swig 中任意一个script块下。
<!-- layout example in head.swig -->
{% if theme.google_site_verification %}
  <meta name="google-site-verification" content="{{ theme.google_site_verification }}" />
{% endif %}

<script data-ad-client="ca-pub-612**56" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

{% if theme.bing_site_verification %}
  <meta name="msvalidate.01" content="{{ theme.bing_site_verification }}" />
{% endif %}
  • 在你添加完成之后,在 google AdSense 上点击确认,谷歌会到你的网站上进行核查和验收。
  • 博主是2020.02.05上午申请,2020.02.06上午收到申请通过的邮件。

配置广告位

在收到审核通过的邮件后,可以登录 google AdSense 在自己的网站上进行广告位置的筛选和设计了,目前 google AdSense 主要提供了自动广告和广告单元两种形式的广告添加方式。

自动广告

自动广告是 google AdSense 近来提供的一种广告形式,它能够通过分析你的博客布局结构,自定义的在你的网站中插入合适的广告,无论是内容,还是广告尺寸,都是完全契合网站内容本身的,算是一种比较高质量的广告。

打开 AdSense 首页,然后转到广告。您可以在概览中为各个网站设置自动广告。

如果您的网站已经启用自动广告,在审核通过的几个小时内,您便会在网站上看到相关的广告,并开始累积收入(之前插入的检验代码,接入了 google AdSense 的自动广告)。

这种广告投放的几率比较小,在PC端效率比较低,如果你的网站支持移动端查看的话,会自动投放移动端自适应的广告。

广告单元

为了能够最高效的利用自己博客的广告位,AdSense提供了三种固定广告位。

  • 文字广告和展示广告(即侧边栏,评论区之类的固定广告位)
  • 信息流广告(插入在信息流内容的广告位置)
  • 文章内嵌广告(主要是插入在每篇文章内部的开始,中间,结尾部分,展示次数比较多,强烈推荐)

由于本人的是博客网站,所以第二种信息流广告没有投入使用,第三种影响阅读体验,所以博主现在主要采用第一种方式,在侧边栏展示广告。

具体的操作流程是,在网站上,选择广告单元->新建广告位->选择对应的广告类型->生成对应的广告代码。

广告单元插入

博主启用了自动广告,广告单元仅使用了第一种方式,在网站的侧边栏和评论区展示广告,但下面会提供几种针对 Hexo 的 Next Theme 广告单元代码位置的插入。

插入评论区

将广告单元生成的广告代码插入 \themes\next\layout_partials\comments.swig 中的末尾即可。

  {% elseif theme.valine.appid and theme.valine.appkey %}
    <div class="comments" id="comments">
    </div>
  {% endif %}

<!-- Insert google ad blocks -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Comment_Below -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-61***56"
     data-ad-slot="83***73"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

{% endif %}

插入侧边栏

将代码插入\themes\next\layout\_macro\sidebar.swig 文件中

的最下侧。
      {% if theme.sidebar.b2t %}
        <div class="back-to-top">
          <i class="fa fa-arrow-up"></i>
          {% if theme.sidebar.scrollpercent %}
            <span id="scrollpercent"><span>0</span>%</span>
          {% endif %}
        </div>
      {% endif %}

<!-- Insert google ad blocks -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Comment_Below -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-6129496365361356"
     data-ad-slot="8323610673"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

    </div>
  </aside>
{% endmacro %}

插入文章头部

在\themes\next\layout\_custom 目录下,新建 google_adsense.swig,并将 AdSense 提供的广告代码放入其中,然后将

{% include '../_custom/google_adsense.swig' %}

插入到 \themes\next\layout\_macro\post.swig 文件中。

        {% else %}
          {% if post.type === 'picture' %}
            <a href="{{ url_for(post.path) }}">{{ post.content }}</a>
          {% else %}
            {{ post.content }}
          {% endif %}
        {% endif %}
      {% else %}
<!-- Insert google ad blocks -->
        {% include '../_custom/google_adsense.swig' %}

        {{ post.content }}
      {% endif  %}
    </div>
    {#####################}
    {### END POST BODY ###}
    {#####################}

我不建议在一个网页中布置多个广告,广告内容雷同,会严重影响用户阅读体验。在页面的侧边布置一个广告,难道不香吗?

注意事项

在成功接入 AdSense 后,google 会根据几种方式和数据判断广告点击是否作弊,从而注销你的账号,所以不要心存侥幸心理,好好发原创文章,提高网站的质量才是王道。

  • 作弊广告点击者的IP地址与你Adsense账户登录IP地址相同
  • 作弊广告点击的CTR数据太高
  • 作弊广告点击者的IP地址来自同一个地理区域
  • 根据Cookies判断作弊Adsense广告点击
  • 作弊广告点击者页面停留时间太短
  • 直接访问者的广告点击率过高
  • 流量小但广告点击率高
  • 在网页上用文字提示请求鼓动点击广告

Last but not least

现在通过 AdSense 能赚到的收入本身并不高,尤其是博客类的网站更是如此,但在有空余的地方放置一点广告还是能起到丰富博客的作用。

既然大家愿意花时间和精力去搭建个人博客,除了钱以外,肯定还有其他的目的,希望大家不忘初心,更不要舍本逐末,忘记了自己搭建博客的初衷,毕竟广告收入这个事情,有当然好,没有也不用气馁,尽力就好~

References


坚持原创技术分享,您的支持将鼓励我继续创作!

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!