VuePressで作ったウェブサイトにGoogleAdsenseを表示する

VuePressで作成したウェブサイトにGoogleAdsensを表示する方法をネットで探したのですが、簡単そうな方法が見つからなかったので自分でコンポーネントを作成して試してみました。VuePressのバージョンは1.0.0です。

Componentの作成

プロジェクトの.vuepress/components/の下にGAdsense.vueというファイルを作成して、あらかじめ取得しておいた広告ユニットのコードを埋め込みます。

<template>
<div>
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- xxx-display -->
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxx" data-ad-format="auto" data-ad-slot="xxxxxx" data-full-width-responsive="true" style="display: block;"></ins><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</template>

コンポーネントの挿入

広告を表示したいMarkdownファイルを開いて、表示したい場所にコンポーネントを追加します。

<GAdsense/>

一応広告が表示されているので、この方法で大丈夫そうです。