Show AdSense Samples
This is a VuePress
and Vue Google AdSense
sample site.
If you want to use Vue Google AdSense
, please read a below article.
How it works
<CallAdsense>
, <CallInArticleAdsense>
and <CallInFeedAdsense>
are wrap components that I implemented.
Please refer this repository.
https://github.com/tacck/vuepress-google-adsense-sample
Display
Use like this.
<ClientOnly>
<CallAdsense />
</ClientOnly>
And, edit docs/.vuepress/components/CallAdsense.vue
directory.
<template>
<div>
<Adsense
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
/>
</div>
</template>
InArticleAdsense
Use like this.
<ClientOnly>
<CallInArticleAdsense />
</ClientOnly>
And, edit docs/.vuepress/components/CallInArticleAdsense.vue
directory.
<template>
<div>
<InArticleAdsense
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
/>
</div>
</template>
InFeedAdsense
Use like this.
<ClientOnly>
<CallInFeedAdsense />
</ClientOnly>
And, edit docs/.vuepress/components/CallInFeedAdsense.vue
directory.
<template>
<div>
<InFeedAdsense
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-layout-key="-XX+XX+XX-XX+XX
/>
</div>
</template>