SlideShareと連携してVuepressにスライド機能を実装します．

• ファイル構成
• VuepressとGoogle Adsenseの連携
• Google Adsenseの貼り付け
• まとめ
• 参考サイト

全国630店舗以上！もみほぐし・足つぼ・ハンドリフレ・クイックヘッドのリラクゼーション店【りらくる】

ファイル構成

.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の連携を実装しました．

参考サイト

tacck/vuepress-google-adsense-sample (opens new window)

VuePress and Vue-Google-AdSense (opens new window)

VuePress に Vue-Google-AdSense を導入する手順解説 (opens new window)

全国630店舗以上！もみほぐし・足つぼ・ハンドリフレ・クイックヘッドのリラクゼーション店【りらくる】