【Web】Vue.jsプロジェクトでGoogle Adsenseを使う方法と注意点

Vue.js Adsense

Vue.jsでGoogle Adsenseを使う方法

サイトを作成したら、まぁアドセンス配置しますよね。。

Vue.jsプロジェクトでは下記のプラグインを使用します。

github.com

使い方はリンク先に書いてある通りなのですが、動かすうえで一点だけ注意点がありました。

【もくじ】

ソースコードを一部変更しないとプラグインを読み込めない

ソースコードを一部変更する必要がありました。これをしないと、プラグインをプロジェクトに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では日ごろ気配を感じた王の名前をつぶやいています。言葉を自動で選択しているのでたまにシモいワードがでます。。のでよろしくお願いいたします。

あなたは何王？