【Web】Vue.jsプロジェクトでGoogle Adsenseを使う方法と注意点
Vue.jsでGoogle Adsenseを使う方法
サイトを作成したら、まぁアドセンス配置しますよね。。
Vue.jsプロジェクトでは下記のプラグインを使用します。
使い方はリンク先に書いてある通りなのですが、動かすうえで一点だけ注意点がありました。
【もくじ】
ソースコードを一部変更しないとプラグインを読み込めない
ソースコードを一部変更する必要がありました。これをしないと、プラグインをプロジェクトにimport
することが出来ずしばらくハマりました。
npm install --save-dev vue-adsense
でプラグインをインストールすると、プロジェクトルート直下にnode_modules/vue-adsense
フォルダが出来ていると思います。その中にあるmain.js
を以下のように変更します。
// node_models/vue-adsense/main.js // プラグインのソースファイルを編集します。 // import VueAdsense from './VueAdsense.vue' //この行をコメントアウトするか削除します。 var VueAdsense = require('./VueAdsense.vue') //この行を新たに追加します。 module.exports = VueAdsense
やっていることはimport
の書き方を変えているだけなのですが、この書き方でないとプラグインが動かなかったです。
広告を実際に表示するにあたって
まずは、index.html
の<body>タグ
を閉じる前のところにGoogle提供のアドセンス用のスクリプトを読み込みましょう。
<body> <div id="app"></div> <!-- これを追記! --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </script> </body>
次に広告を読み込みます。
このプラグインやっていることは、Adsense用の新しいコンポーネントを作成することなので、自分のVueプロジェクトにおいてもプラグインが作成したComponentとして読み込んでやれば使えます。
// src/main.js import VueAdsense from 'vue-adsense' Vue.component('adsense', VueAdsense) //「adsense」という名前のコンポーネントとして読み込む
プラグインが提供しているコンポーネントを「adsense」という名前で読み込むことで、HTML内で<adsense></adsense>
という形でプラグインを使用することが出来ます。
実際に広告を配置したいところに以下のように設置します。
// src/App.vue <template> <span class="pr" >- スポンサードリンク -</span> <adsense ad-style="display:block" ad-format="fluid" data-ad-layout-key="*********" //Adsenseサイトで作成したコードを入力してください。 ad-client="********* //Adsenseサイトで作成したコードを入力してください。 ad-slot="*********" //Adsenseサイトで作成したコードを入力してください。 > </adsense> </template>
私の環境ではこれで動きました。 以上、一部ソースコードを変更する必要がある点だけ注意が必要というお話でした。
つくった。。
今回Vue.jsの練習で作った本当に簡単なサイトなんですけど、良かったら遊んでください。
自分は何王なのか診断できるジョークサイトです。『陸王』を見ながら調べたり、『日新ラ王』を食べながら調べるのがおすすめですね(笑)
Twitterでは日ごろ気配を感じた王の名前をつぶやいています。言葉を自動で選択しているのでたまにシモいワードがでます。。のでよろしくお願いいたします。