# AdSense 表示例

設定

<CallAdsense> 、 <CallInArticleAdsense> 、 <CallInFeedAdsense> は、実装したラップコンポーネントです。

詳しくは、こちらのリポジトリを参照してください。
https://github.com/tacck/vuepress-google-adsense-sample

# ディスプレイ広告

下記の様に使用します。

<ClientOnly>
  <CallAdsense />
</ClientOnly>

こちらのファイルを修正してください。 ( docs/.vuepress/components/CallAdsense.vue )

<template>
  <div>
    <Adsense
      data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
      data-ad-slot="XXXXXXXXXX"
    />
  </div>
</template>

# 記事内広告

下記の様に使用します。

<ClientOnly>
  <CallInArticleAdsense />
</ClientOnly>

こちらのファイルを修正してください。 ( docs/.vuepress/components/CallInArticleAdsense.vue )

<template>
  <div>
    <InArticleAdsense
      data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
      data-ad-slot="XXXXXXXXXX"
    />
  </div>
</template>

# インフィード広告

下記の様に使用します。

<ClientOnly>
  <CallInFeedAdsense />
</ClientOnly>

こちらのファイルを修正してください。 ( docs/.vuepress/components/CallInFeedAdsense.vue )

<template>
  <div>
    <InFeedAdsense
      data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
      data-ad-slot="XXXXXXXXXX"
      data-ad-layout-key="-XX+XX+XX-XX+XX
    />
  </div>
</template>