【アドセンス】Vue.jsアプリケーションにアドセンス導入【vue-cli】

f:id:duo-taro100:20160218004611p:plain

今回はvue-cliを使って作ったVue.js + webpackのWEBアプリケーションにGoogleアドセンスを導入する方法を解説していきたいと思います。
ここではvue-google-adsenseというプラグインを用いて実装します。

https://www.npmjs.com/package/vue-google-adsense

いつも通り、Macでの導入方法になりますのでご注意下さい

vue-google-adsenseを使う

なぜプラグインを利用するのか

Googleアドセンスを普通に導入する方法もありますが、SPAに導入する場合は、SPAでない場合と実装方法が異なる場合があります。
その面倒を吸収してくれるのがプラグインです。
細かい実装方法は後ほど解説しますが、今回の例で言えば、

①プラグインをnpmで取ってくる
②javascriptファイルでインポートする
③自分の広告のid(slotなど)を記載する

これだけで実装ができます。とても楽です。ぜひ導入しましょう。

vue-google-adsenseがおすすめの理由

今回使用するプラグインは「vue-google-adsense」です。

https://www.npmjs.com/package/vue-google-adsense

アドセンスを扱う、似たようなプラグインは他にもありますが、「vue-google-adsense」のはアドセンスの３種類の広告に対応しているからです。
アドセンスの広告には

・ノーマル(レスポンシブ)広告
・記事内広告
・インフィード広告

がありますが、「vue-google-adsense」の3つに対応しています。
これらが区別して記述できるのはとてもありがたいです。

■ノーマル(レスポンシブ)広告の場合
ノーマル(レスポンシブ)広告の場合は以下のように記述します。

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

■記事内広告
記事内広告の場合は以下のように記述します。

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

■インフィード広告
インフィード広告の場合は以下のように記述します。

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

vue-google-adsenseの導入

早速導入していきましょう。

前提の環境

vue-cliで作成したVue.js + webpackアプリケーションの環境があることを前提としています。
まだ環境構築をされていない方は、以下のページを参考にして下さい。

【webpack版】Vue.jsの開発環境を整える【推奨】

npmを使ってインストール

以下はターミナルで実施して下さい。

プロジェクトに移動します。ここでは例として、/Users/duotaro/project/skylimitにあるとします。

$ cd /Users/duotaro/project/skylimit

移動したので、npmを使ってインストールしましょう。

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

これでインストールが完了です。
続いて、使うための準備を整えましょう。

vue-google-adsenseのインポートと準備

最初にディレクトリ構造を確認しておきましょう。
環境構築構築間も無い場合は、以下のようになっています。

src/
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
├── main.js
└── router
└── index.js

srcディレクトリ直下にあるmain.jsを修正しましょう。
修正前のmain.jsです

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

ここにインポート文と使用宣言を追加します。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
/* アドセンスのインポート */
import Ads from 'vue-google-adsense'

Vue.config.productionTip = false

/* アドセンスの使用宣言 */
Vue.use(require('vue-script2'))
Vue.use(Ads.Adsense)
Vue.use(Ads.InArticleAdsense)
Vue.use(Ads.InFeedAdsense)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

全部で5つの文を追加すればOKです。
これで使用準備ができました。最後は具体的な使い方です。

vue-google-adsenseの使い方

例えば、共通ヘッダーコンポーネントであるCommonHeader.vueで広告を使うとしましょう。
使う前に作成していた共通ヘッダーを以下のようなコンポーネントだったと仮定します。

<!-- テンプレート部分 -->
<template>
  <header>
      <router-link tag="div" to="/">
          <h1>タイトル</h1>
      </router-link>
      <div class="header-navi">
          <ul>
              <router-link class="on" to="/">Home</router-link>
              <router-link to="/page1">Page1</router-link>
              <router-link to="/page2">Page1</router-link>
          </ul>
      </div>
  </header>
</template>

<!-- javascript部分 -->
<script>
export default {
  name: 'CommonHeader'
}
</script>

ここでノーマル（レスポンシブ）広告を使ってみましょう。

<!-- テンプレート部分 -->
<template>
  <header>
      <router-link tag="div" to="/">
          <h1>タイトル</h1>
      </router-link>
      <div class="header-navi">
          <ul>
              <router-link class="on" to="/">Home</router-link>
              <router-link to="/page1">Page1</router-link>
              <router-link to="/page2">Page1</router-link>
          </ul>
      </div>
      <!-- 広告を設定 -->
      <Adsense data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxx"></Adsense>
  </header>
</template>

<!-- javascript部分 -->
<script>
// インポート
import Ads from 'vue-google-adsense'

export default {
  name: 'CommonHeader',
  // コンポーネントを設定
  components : {
  	Ads
  }
}
</script>

まずはインポートしましょう。

import Ads from 'vue-google-adsense'

続いて、このコンポーネントでAdsコンポーネントを利用するための宣言です。

components : {
	Ads
}

最後に、テンプレートにコンポーネントを埋め込みます、
data-ad-clientやdata-ad-slotはご自分の広告の値を入力して下さい。

<Adsense data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxx"></Adsense>

これで完成です。
取得間もない広告は表示まで時間がかかることが多いので気をつけて下さい。

Techvenience

Technology × Convenience - Vue / React / Next / Nuxt / ChatGPTなどのIT技術がもたらす便利さをお伝えします。最近はChatGPTなどのAI技術を使ってブログを書いています。

【アドセンス】Vue.jsアプリケーションにアドセンス導入【vue-cli】