VuePressを使用して作成したページにGoogle AdSenseの広告ユニットを自由に配置する

コンポーネントを作成して、Markdownにタグを追加するだけで簡単に配置できます。

# コンポーネントを作成する

./vuepress/componentsAdCard.vueを作成したとします。

そして、AdCard.vueには下記のようなコードを追加してください。

<template>
  <div id="ad-card">
    <ins
      class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-123456789000"
      data-ad-slot="12345678900"
      data-ad-format="auto"
      data-full-width-responsive="true"
    ></ins>
    <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </div>
</template>

data-ad-clientdata-ad-slotは書き換えることを忘れないでください。

# MarkdownファイルにAdCardのタグを追加する

下記のような感じでMarkdownファイルに<AdCard />を挿入するとディスプレイ広告が表示されると思います。

いんこかわいい

<AdCard />

いんこかわいい