Vue.jsで構築したサイトにGoogle Adsense広告を掲載する

　下記の記事で、Vue.js で構築したサイト Google Analytics を導入する手順についてまとめました。

www.ketancho.net

　今回は、このサイトに Google Adsense 広告を掲載します。Google Adsense で出力したコードを貼るだけでしょ？と思っていたのですが、そうではなかったので手順を整理したいと思います。

vue-adsense を導入する

　今回は、下記のライブラリを利用しました。

npm install してください。

npm install vue-adsense --save

Vue.js ソースコードの修正

src/main.js の修正

　まず、 main.js 以下で vue-adsense をインポートします。

import VueAdsense from 'vue-adsense'

// Google Adsense 用
Vue.component('adsense', VueAdsense)

index.html の修正

　続いて、 index.html に下記のスクリプト行を追加します。

  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- この行を追加 -->
  </body>

.vue ファイルの修正

　最後に広告を掲載したい .vue ファイルに下記のコードを埋め込みます。

    <adsense
      ad-client="★1"
      ad-slot="★2"
      ad-style="★3"
      ad-format="★4">
    </adsense>

★の部分については広告ユニットによって変更が必要になります。

f:id:ketancho_jp:20180507152825p:plain

Google Adsense で取得したコードの★1〜★4をそれぞれ置き換えてください。

<ins class="adsbygoogle"
     style="display:block" ・・・★3
     data-ad-client="ca-pub-1595844274447550" ・・・★1
     data-ad-slot="7619058894" ・・・★2
     data-ad-format="auto"></ins> ・・・★4
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

node_modules 以下の vue-adsense モジュールを修正する

　ここまでやったのですが上手く動かないなーと思っていたら、 node_modules/vue-adsense/main.js を修正する必要があるそうです。

github.com

import VueAdsense from './VueAdsense.vue'
module.exports = VueAdsense

となっている部分を

import VueAdsense from './VueAdsense.vue'
export default VueAdsense

のように修正してください。

広告が表示されるまで待つ

　上の修正をしたのですが、コンソールに 400 が表示され、広告が表示されませんでした。しかし、これは広告ユニットを新規で作成したため、広告が配信されていないだけでした。少し待つか、過去に作った広告ユニットを利用した場合はこの問題が発生しないと思われます。

まとめ

　Google Adsense の広告掲載方法についてまとめました。個人で作った Web サイトにもこちらの方法で掲載しています。もっといいやり方がある、上のやり方で上手く動かないぞ、などございましたらコメントいただければと思います。

　他に、下記のような Vue.js 関連の記事を書いています。良ければご参照いただければと思います。