Hexo (v8.5.0) 加入 Google Adsense

前言

實驗性質，好奇網站廣告收益到底能帶來多少收入，

畢竟只是隨手寫，並沒有特別的整理全部的資料，

如果能夠剛好cover主機的費用，那也是不無小補，

應該是不可能拉

申請 Google AdSense

申請Google AdSense帳號，步驟就不展示了，當時申請的時候被拒絕了三次，
理由大部分都是網站內容不足或是網站成立時間不夠長，
大約放了20幾篇文章加上半年的時間，在某一天再次申請後隔天就收到成功的通知信件。

安裝套件

$ npm install hexo-google-adsense --save

放置Google的程式碼

取得Google Adsense 程式碼

程式碼位置: https://www.google.com/adsense/new

左上角的漢堡 > 廣告 > 總覽 裡面有「取得程式碼」的按鈕

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx"
     crossorigin="anonymous"></script>

一開始還眼殘一直沒有看到按鈕，一直在網站的設定中找尋

放置在head中

Google Adsense 要求把程式碼放置在中

由於我的 Hexo 版本為 v8.5.0，不同的版本位置可能有所不同，

1. 將 _config.next.yml 的 head註解打開

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk

2. 加入在head.njk

在 source/_data中加入head.njk檔案，將Google AdSense 取得的程式碼放入檔案中

如果沒有檔案就自行建立一個

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx"
     crossorigin="anonymous"></script>

－以上是 「自動」的 Google AdSense，

自動與手動放置，只能選擇一種，否則就會JS相衝突

自動:按網站

手動:按廣告單元

設定 _config_next.yml

將設定檔內容加入在檔案的最下方，增加參數可以控制是否要出現區塊廣告

# Google AdSense
google_adsense:
  enable: true
  google_ad_client_id: ca-pub-xxxxxx 
  enable_page_level_ads: true
  ## siderbar_enable
  siderbar_enable: true
  siderbar_data_ad_slot: #
  ## post header
  postheader_enable: true
  postheader_data_ad_slot: #
  ## post footer
  postfooter_enable: true
  postfooter_data_ad_slot: #

範例程式碼

可自行加入在 source/_data/sidebar.njk

並註解 上方的 #sidebar: source/_data/sidebar.njk

siderbar_data_ad_slot: 在建立 廣告單元時的程式碼中就會提供

{% if theme.google_adsense.enable and theme.google_adsense.siderbar_enable %}
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client={{ theme.google_adsense.google_ad_client_id }}"
     crossorigin="anonymous"></script>
<!-- sidebar -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="{{ theme.google_adsense.google_ad_client_id }}"
     data-ad-slot="{{ theme.google_adsense.siderbar_data_ad_slot }}"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
{% endif %}

如果這一篇文章有幫助到你的話，
請您幫忙點選廣告，都是以不擾人與不強迫的方式呈現