zoukankan      html  css  js  c++  java
  • Hexo Next 接入 google AdSense 广告

    前言

    个人网站 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 extlayout\_partialshead.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 广告单元代码位置的插入。

    插入评论区

    将广告单元生成的广告代码插入 hemes extlayout_partialscomments.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 %}
    

    插入侧边栏

    将代码插入 hemes extlayout\_macrosidebar.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 %}
    
    

    插入文章头部

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

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

    插入到 hemes extlayout\_macropost.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


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

  • 相关阅读:
    项目无法运行iPhone5模拟器
    多线程下载图片,滑动tableView崩溃--资源抢夺问题
    提醒事项 1. 冥想TX 2.下班路上听歌激励自己 3. 不戴眼镜 4. 困难任务拆解
    AutoLayout性能不如frame
    Tunnelblick 覆盖安装失败
    weakSelf 和 strongSelf
    动画
    4/16 近期状态
    知乎live 我的读书经验 总结
    C语言-第23课
  • 原文地址:https://www.cnblogs.com/DHUtoBUAA/p/12283738.html
Copyright © 2011-2022 走看看