【Vue.js】Google Adsense広告を掲載する方法を解説

この記事では、Vue.jsで構築したサイトにGoogle Adsense広告を掲載する方法を解説します。

ライブラリの導入

①vue-adsenseをインストールする

使用するライブラリです。

https://github.com/darrynten/vue-adsense

以下コマンドでインストールしてください。

npm install vue-adsense

②index.htmlにadsbygoogle.jsを埋め込む

public/index.htmlに以下のscriptタグを追加してください。

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <!-- 以下を追加してください -->
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</body>

③main.jsでvue-adsenseをインポート

src/main.jsに以下を追加してください。

import VueAdsense from 'vue-adsense'

Vue.component('adsense', VueAdsense)

④vueファイルの広告掲載位置にadsense用コードを埋め込む

広告を掲載したい.vueに、以下のコードを記載してください。

<adsense
  ad-client="ca-pub-xxxxxxxxxxxxxxxx"
  ad-slot="xxxxxxxxxx"
  ad-style="display:block"
  ad-format="auto"
></adsense>

各プロパティには、以下の通り設定してください。

  • ad-client…サイト運営者IDです。Adsenseの広告コードの「data-ad-client」に該当します。
  • ad-slot…広告ユニットIDです。Adsenseの広告コードの「data-ad-slot」に該当します。
  • ad-style…スタイルの指定です。Adsenseの広告コードの「style」に該当します。
  • ad-format…フォーマットの指定です。Adsenseの広告コードの「data-ad-format」に該当します。

Tips

広告を掲載したいvueファイルに直接記載するのも良いですが、広告コンポーネントを作成して、繰り返し利用できるようにするのをオススメします。

src/components配下にadsense.vueを作成し、以下のようにコーディングしてみてください。

<!-- コンポーネントの例 -->
<template>
  <adsense
    ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    ad-slot="xxxxxxxxxx"
    ad-style="display:block"
    ad-format="horizontal"
  ></adsense>
</template>

<script>
export default {
  name: "Ad",
};
</script>

<style scoped>
</style>

広告を掲載したい箇所で、adsense.vueをインポートし、templeteタグ内に<Ad></Ad>と記載するだけで呼び出すことができるようになり、効率良く開発を行えます。

以上で、ライブラリの導入は完了です。

しかし、このままではエラーが出てしまい、広告を表示することができません。

バグを修正する

node_modules/vue-adsense/main.jsを修正する

node_modules/vue-adsense/main.jsを以下に書き換えてください。

// 以下に書き換える
import VueAdsense from './VueAdsense.vue'
export default VueAdsense

デプロイする際には、本番環境のnode_modules内の修正を忘れないよう気をつけてください。

以上の手順にて、Vue.jsで構築したサイトに広告を掲載できるようになります。

それでは良いVueライフを。

 

最後まで読んでいただき、ありがとうございました。

最新情報をチェックしよう!

Vue.jsの最新記事8件