放 Google AdSense 在 Gatsby 的靜態網頁上

  1. #AdSense
  2. #Gatsby

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

步驟

  1. 在 Google AdSense 上面建立廣告，因為懶的關係，直接選用 AdSense 內建的自動廣告的功能

  2. 點選右上角的 設定自動廣告 並且複製 google_ad_client 的內容

  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 的內容被加上去了