Hexo Next 接入 google AdSense 廣告


前言

個人網站 www.waylon.one 已經運營近一年,每日的瀏覽量不斷上升,現在維持在兩位數,打算承接一點廣告賺睡后收入,用來維持網站的日常運營,希望能覆蓋網站的服務器和域名開銷。

FYI 本博客實時更新於 個人網站 - Hexo網站引入google AdSense,請移步閱讀最新內容。

目前,自己通過 Google AdSense 在個人網站的廣告位承接廣告,下面主要講解從注冊 Google AdSense,到審核通過后設置廣告的基本操作。

點擊 www.waylon.one 測試體驗,如下圖。在側邊欄下部應該可以看到 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


堅持原創技術分享,您的支持將鼓勵我繼續創作!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM