eyecatch

作成日:2020-05-06 / 更新日:2020-05-16

サイトの作成はしたので、google-adsense入れてみたいと思います。

# vuepressでブログ作成

こちらも参照ください。 Vuepressでのブログ作成

# 設定方法

大きく2種類ありそうなので、以下に記載します。

# 設定1

headに組み込みます。 最近のGoogle AdSenseは自動広告なので、この設定だけで大丈夫だと思います。

headに組み込むためにはsrc/.vuepress/config.jsに以下の内容を追記します。

module.exports = {
  ―――中略―――
  head: [
    ["script",
      {"data-ad-client": "ca-pub-xxxxxxxxxxxxx",
        "async src": "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
      }
    ],
  ―――中略―――
}

これで<head></head>の中にスクリプトが埋め込みされます。

# 設定2

vueコンポネントを作成して、文章の中に広告を表示させます。

.vuepress/components/CallAdsense.vue を作成します。

<template>
  <div>
    <Adsense
      data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
      data-ad-slot="XXXXXXXXXX"
    />
  </div>
</template>

必要なパッケージをインストールします。 (vuepres用ではなく、vue用がミソ?)

npm install -s vue-script2 vue-google-adsense

JSONファイルにも記載されています。

{
  "name": "vuepress-tech",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vuepress dev src",
    "build": "vuepress build src --dest dist",
    "eject": "vuepress eject src"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@vuepress/plugin-blog": "^1.9.2",
    "@vuepress/plugin-google-analytics": "^1.4.1",
    "vue-google-adsense": "^1.8.1",  <--- add
    "vue-script2": "^2.1.0",         <--- add
    "vuepress": "^1.4.0"        
  }
}

ヘッドレス環境のために以下を設定します。 .vuepress/enhanceApp.js

export default ({
  Vue,
  options,
  router,
  siteData
}) => {
  if (typeof window !== 'undefined') {
    import('vue-google-adsense')
      .then(module => {
        const Ads = module.default
        Vue.use(require('vue-script2'))
        Vue.use(Ads.Adsense)
        Vue.use(Ads.InArticleAdsense)
        Vue.use(Ads.InFeedAdsense)
      })
      .catch(e => {
        console.log(e)
      })
  }
}

記事(.mdファイル)に以下を埋め込みます。

<ClientOnly>
  <CallAdsense />
</ClientOnly>

# たぶんこれで大丈夫だと思うのですが・・・2020/5現在)

当サイトのアカウントがポリシー検証中のようで、現在広告が正しく表示されていません。 枠はできるようなので、たぶん大丈夫なのですが、実際の広告が見れないです(涙)

# 参考サイト

v1.x系の参考になるものがなく、なかなか苦労しました。 以下が参考にさせてもらいました。

VuePress and Vue-Google-AdSense

headの登録はこちらがわかりやすいです。async:tureとならないよう、"async src"とすると、AdSenseのスクリプトと同じになります。 hene