VuepressとGoogle Adsenseを連携させる
VuepressとGoogle Adsenseを連携させます.
有料枠設定にしていますが,下記のサイトで他の記事もみれます.youtubeの投げ銭的な物として,お考えください.
ファイル構成
.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の連携を実装しました.
参考サイト
ここから先は
0字
¥ 100
この記事が気に入ったらサポートをしてみませんか?