SPAサイトでGoogle Adsense広告を入れる方法

SPAでは通常と同じ方法でAdsense広告を挿入できない

Javascriptフレームワークで構成されているSPA（シングル・ページ・アプリケーション）の場合、通常のGoogle Adsenseタグを挿入しても広告が表示されません。

しかし、各フレームワークに対応したGoogle Adsense用のプラグインが有志の方によって開発されていますので、そちらを使うことで簡単にSPAサイトでもGoogle Adsense広告を表示させることが可能です。

SPAでGoogle Adsense広告の設定方法（Vue.jsの例）

今回は、Vue.jsを使ったSPAのケースで、SPAサイトでGoogle Adsense広告を表示させる方法を見ていきます。

プラグインを追加する

まずはプラグインを追加します。Vue.jsに対応したGoogle Adsense用プラグインは、

vue-google-adsense

vue-adsense

の二つがありますが、vue-adsenseの方は4年ほどメンテナンスがされていないので、現在もメンテナンスが続いているvue-google-adsenseを使います。

Vue.jsのプロジェクトディレクトリで、

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

//yarn
yarn add vue-script2 vue-google-adsense

で追加します。依存パッケージとしてvue-script2が必要なので、そちらも忘れずに追加してましょう。

main.jsでロードする

プラグインの追加ができたら、SPAアプリ全体でロードする設定をします。

main.jsに下記のように追記します。

import Ads from 'vue-google-adsense'

Vue.use(require('vue-script2'))

Vue.use(Ads.Adsense) //広告ユニット
Vue.use(Ads.InArticleAdsense) //記事内広告
Vue.use(Ads.InFeedAdsense) //フィード内広告

InArticleAdsenseは記事内広告、InFeedAdsenseはフィード内広告を使う場合に追加します。使わない場合は不要です。

テンプレートに広告ユニットを追加する

ここまで来たら、あとはテンプレートに広告を追加するだけです。

main.jsでロードしていれば、「Adsense」ブロックが使えるようになっています。

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

記事内広告とフィード内広告は、下記のようになります。

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

<InFeedAdsense
    data-ad-layout-key="-fg+5n+6t-e7+r"
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890">
</InFeedAdsense>

自動広告を使う場合

なお、今回試したvue-google-adsenseについては、Google Adsensの自動広告にも対応しています。

main.jsで、

import Ads from 'vue-google-adsense'

Vue.use(require('vue-script2'))

Vue.use(Ads.AutoAdsense, { adClient: 'クライアントID' })

とすれば、SPAアプリ全体でGoogle Adsensの自動広告が適用されます。

その他の細かい設定

その他の細かい設定は、公式レポジトリのドキュメントに記載があるため、そちらを確認してください。

mazipan /vue-google-adsense

色々と細かい設定をできるので、SPAの見え方によって調整すると良いでしょう。

---

SPAサイトでGoogle Adsense広告を入れる方法を見てきました。

プラグインを使えば、かなり簡単にGoogle Adsenseを入れることが可能なので、SPAサイトの収益化方法を探している方は、ぜひ試してみてください。