Vue.jsへの切り替えでGoogleアドセンスが非表示に！？ | ポータルサイトHack - 東京・港区ポータルサイト制作会社アクセルメディア

2019/6/26

ここ数年でジワリと浸透してきたVue.js、Bootstrap+Webpackと併用するケースが増えてきたのですが、Googleアドセンスを使用しているサイトに導入したところエラーが出てしまいました。そのまま表示されるものもありましたが、非表示となってしまったものもあったので解決方法を探っていこうと思います。

Vue.jsの基本

Vue.jsとはJavaScriptフレームワークの一つで、jQueryの代替えとして利用されるケースが増えてきました。
まだ未知の部分はありますが、体感としてはjQueryより軽い（表示速度が速い）気がします。

基本は下記のような

形で導入します。


 <!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1,minimum-scale=1.0" />
   <meta charset="UTF-8">
 </head>
 <body>
   <div id="app" v-cloak>
      {{ message }}
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>
   <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });
   </script>
 </body>
 </html>

Googleアドセンスのエラー

問題のエラーですが、リニューアルをかけた際にアドセンスが表示されないことに気づき、コンソールをみると下記のようなエラーが出てしまいました。
Vueを使用している所に外部のJavaScriptは使えませんよというエラーです。


[Vue warn]: Error compiling template:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

さて困ったぞということで解決方法を探していたところ「vue-google-adsense」というプラグインが見つかりました。
今回のリニューアルではWebpackを利用したので導入が容易だった点も助かりました。

vue-google-adsenseの導入

前提としてWebpackを利用している必要がありますが、導入は至って簡単です。
まずはvue-google-adsenseをインストールします。


$ npm install vue-script2 vue-google-adsense --save

インストールができたらコンパイルするファイル（今回はapp.js）にインポートします。
全体的な記述は下記になります。


import Vue from 'vue'
//vue-google-adsenseをインポート
import Ads from 'vue-google-adsense'
//vue-google-adsenseを使用するための記述
Vue.use(require('vue-script2'))
Vue.use(Ads.Adsense)
Vue.use(Ads.InArticleAdsense)
Vue.use(Ads.InFeedAdsense)
var app = new Vue({
//コンポーネントを定義する
    components: { Ads },
    el: '#app',
    data: {
    message: 'Hello Vue!'
    }
});

コンパイルされたapp.jsをアドセンスを利用するページに読み込みます。

アドセンスの表示

上記のapp.jsを読み込んだページならば下記のタグで表示できるようになります。
種類によって使い分けましょう。

ノーマルタイプのアドセンス


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

記事内に表示するアドセンス


<InArticleAdsense
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="XXXXXXXXXX">
</InArticleAdsense>

インフィードのアドセンス


<InFeedAdsense
    data-ad-layout-key="XXXXXXXXXXXXXX"
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="XXXXXXXXXX">
</InFeedAdsense>

まとめ

ポータルサイトではアドセンスの利用も当然考慮しないといけません。
今後ますます利用頻度が上がっていくと思われるVue.jsをポータルサイトで使う際は今回の記事を参考に、エラーを事前に回避しましょう。