Shiny

放 Google AdSense 在 Gatsby 的靜態網頁上

September 23, 2019 #AdSense#Gatsby

AdSense 是最受歡迎的 blog 廣告服務之一,因為最近剛從 Medium 搬到由 gatsby 自建起來的 blog,所以就放了一下 AdSense 來加減賺一點

步驟

  1. 在 Google AdSense 上面建立廣告,因為懶的關係,直接選用 AdSense 內建的自動廣告的功能 CleanShot 2019 09 24 at 17 00 25 2x

  2. 點選右上角的 設定自動廣告 並且複製 google_ad_client 的內容 CleanShot 2019 09 24 at 17 05 46 2x

  3. 進入 Gatsby 的資料夾並且輸入以下指令

    yarn add gatsby-plugin-google-adsense
  4. gatsby-config.js 內的 plugins 清單加入以下資訊,並且把 publisherId 修改成在第二步驟的 google_ad_client 的內容

    module.exports = {
     siteMetadata: {
       ...
     },
     plugins: [
       ...,
       {
         resolve: `gatsby-plugin-google-adsense`,
         options: {
           publisherId: `ca-pub-1721860710174593`,
         },
       },
       ...,
     ],
    }
  5. 然後 yarn build 接著 yarn serve 在檢查原始碼就可以看到 AdSense 的內容被加上去了


Shiny

Experienced JavaScript / Node.js engineer & team lead.
Twitter Facebook Medium LinkedIn GitHub Email