Hexo Next 接入 google AdSense 广告

2020-02-18 15:39:15 浏览数 (1)

前言

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

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

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

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

代码语言：javascript复制
// 系统
- 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，可以复制代码到 themesnextlayout_partialshead.swig 中任意一个script块下。
代码语言：javascript复制
<!-- 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 广告单元代码位置的插入。

插入评论区

将广告单元生成的广告代码插入 themesnextlayout_partialscomments.swig 中的末尾即可。

代码语言：javascript复制
  {% 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 %}
插入侧边栏

将代码插入themesnextlayout_macrosidebar.swig 文件中

的最下侧。

代码语言：javascript复制
      {% 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 %}
插入文章头部

在themesnextlayout_custom 目录下，新建 google_adsense.swig，并将 AdSense 提供的广告代码放入其中，然后将

代码语言：javascript复制
{% include '../_custom/google_adsense.swig' %}

插入到 themesnextlayout_macropost.swig 文件中。

代码语言：javascript复制
        {% 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

  • hexo个人next主题博客接入谷歌广告
  • hexo博客next主题添加google adsense(亲测可用)
  • Hexo接入Google adsense广告

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

网站 hexo tcp/ip 信息流

0 人点赞