NuxtでGoogle Adsense広告を表示する【ライブラリなし】

公開日:2022/01/17
更新日:

NuxtでGoogeleアドセンス広告を表示したい

心理学を使ったTODOアプリを開発している、@takasqrです。

心理学を使ったTODOアプリ | todo8

心理学を使ったTODOアプリ | todo8

アドセンスの広告を表示しようとする時にサイトに下のようなコードを貼り付けるように表示されると思います。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx"
     crossorigin="anonymous"></script>
<!-- ヘッダー -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

ですがこのコードをNuxtの.vueに貼り付けてもうまくいきません。

そこで、Nuxt.jsで使えるようにコードをカスタマイズする方法を紹介します。 カスタマイズといってもかなり簡単です。

.vueコンポーネントの部分はVue.jsでも使えると思います。

手順

  1. nuxt.config.jsでライブラリ読み込み
  2. 広告部分をAdInPost.vueにコンポーネント化
  3. 広告コンポーネントを別コンポーネント(post.vue)から呼び出し

1. nuxt.config.jsでライブラリ読み込み

nuxt.config.js
export default {
  head: {
    script: [
      {
        src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx',
        async: true,
        crossorigin: 'anonymous'
      }
    ]
  }
}

2. 広告部分をAdInPost.vueにコンポーネント化

AdInPost.vue
<template>
  <ins
    class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="xxxxxxxxxx"
    data-ad-format="auto"
    data-full-width-responsive="true"
  />
</template>

<script>
export default {
  mounted () {
    const adsbygoogle = window.adsbygoogle || []
    adsbygoogle.push({})
  }
}
</script>

3. 広告コンポーネントを別コンポーネント(post.vue)から呼び出し

post.vue
<template>
  <AdInPost />
</template>

<script>
import AdInPost from '@/components/component/AdInPost.vue'

export default {
  components: {
    AdInPost
  }
}
</script>

これで広告部分をコンポーネント化することが出来たので他の場所でも使い回すことができるようになりました。

オススメ記事

5年間ほぼ毎日プログラミングの勉強をするためにやったこと
論文と本から学ぶ、プログラミング独学のコツ
目標達成率を高める if thenプランニングとは!?【本とアプリも紹介】