VuepressとGoogle Adsenseを連携させる

VuepressとGoogle Adsenseを連携させます．

有料枠設定にしていますが，下記のサイトで他の記事もみれます．youtubeの投げ銭的な物として，お考えください．

VuepressとGoogle Adsenseを連携させる

ファイル構成

.vuepress
└── components
   ├── CallAdsense.vue
   └── CallInArticleAdsense.vue

VuepressとGoogle Adsenseの連携

ディスプレイ広告と記事内広告を記述する場合は，.vuepress/componentsに以下のファイルを追加します．

// ディスプレイ広告
// .vuepress/components/CallAdsense.vue
<template>
 <div>
   <Adsense
     data-ad-client="＊＊＊＊＊＊＊＊＊＊＊＊"
     data-ad-slot="＊＊＊＊＊"
   />
 </div>
</template>

// 記事内広告
// .vuepress/components/CallInArticleAdsense.vue
<template>
 <div>
   <InArticleAdsense
     data-ad-client="＊＊＊＊＊＊＊＊＊＊＊＊"
     data-ad-slot="＊＊＊＊＊"
   />
 </div>
</template>

Google Adsenseの貼り付け

vueファイルの生成が済みましたら，追加したい場所に以下のコードを記述します．

<!-- ディスプレイ広告 -->
<ClientOnly>
 <CallAdsense />
</ClientOnly>

<!-- 記事内広告 -->
<ClientOnly>
 <CallInArticleAdsense />
</ClientOnly>
まとめ

VuepressとGoogle Adsenseの連携を実装しました．

参考サイト

VuepressとGoogle Adsenseを連携させる