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

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

ライブラリの導入

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

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

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

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

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

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

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

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

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

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

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

  • 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を作成し、以下のようにコーディングしてみてください。

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

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

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

バグを修正する

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

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

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

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

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

 

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

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

Vue.jsの最新記事8件