この記事では、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ライフを。
最後まで読んでいただき、ありがとうございました。