下記の記事で、Vue.js で構築したサイト Google Analytics を導入する手順についてまとめました。
今回は、このサイトに 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>
★の部分については広告ユニットによって変更が必要になります。
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
を修正する必要があるそうです。
import VueAdsense from './VueAdsense.vue' module.exports = VueAdsense
となっている部分を
import VueAdsense from './VueAdsense.vue' export default VueAdsense
のように修正してください。
広告が表示されるまで待つ
上の修正をしたのですが、コンソールに 400 が表示され、広告が表示されませんでした。しかし、これは広告ユニットを新規で作成したため、広告が配信されていないだけでした。少し待つか、過去に作った広告ユニットを利用した場合はこの問題が発生しないと思われます。
まとめ
Google Adsense の広告掲載方法についてまとめました。個人で作った Web サイトにもこちらの方法で掲載しています。もっといいやり方がある、上のやり方で上手く動かないぞ、などございましたらコメントいただければと思います。
他に、下記のような Vue.js 関連の記事を書いています。良ければご参照いただければと思います。