WordPressで運用していた当メディアサイトですが、この度SSGで完全な静的サイトに移行しました。今回はNuxt.jsのgenerateで静的サイトを作成しておりGoogleアドセンスも使っているのですが、何故か初回読み込み時を除くページ遷移後に「adsbygoogle.push() error: Only one AdSense head tag supported per page. The second tag is ignored.」というエラーが発生しているようでした。そこで今回はこのエラーを解消すべく色々と調べてみました。   Nuxt.jsで作成しているサイトにアドセンスを使う場合には「@nuxtjs/google-adsense」というモジュールがあり、これを使うことで手軽にGoogleアドセンスの広告を表示させることができます。（過去記事「Nuxt.jsのプロジェクトでGoogleアドセンスの広告を表示させる」もご参考ください）ただし、generateで完全な静的サイトとする場合、初回読み込み以降のページ遷移時に下記のエラーが発生していました。

"TagError: adsbygoogle.push() error: Only one AdSense head tag supported per page. The second tag is ignored."

  このエラーは、headで読み込むアドセンス用のスクリプトファイルを複数回読み込んでしまっていることで発生するエラーのようですが、以下のような方法で動的にスクリプトを挿入している場合、ページ遷移のタイミングで重複することがあるようです。ですので、この点を調整してあげる必要があります。 【index.vue】

export default {
  .....
  head() {
    return {
      script: [
        {
          ref: 'ads_script',
          async: true,
          src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-**************',
          crossorigin: "anonymous",
        }
      ]
    }
  },
  .....
}

  先述のモジュールでも対処方法を探してみるものの、generateで作成しているサイトでは不具合が発生しているとのイシューが見られるようで、、どうやら自前で対応する必要があるようでした。。そこで、モジュールの利用は諦めて、mountedのタイミングでDOMを使って動的にscriptタグを挿入することにしました。その際に、下記のようにして対象となるスクリプトが存在しない場合に限定することでスクリプト読み込みの重複が起こらないようにしました。 【index.vue】

export default {
  .....
  mounted() {
    if(document.querySelector('#ads_script') === null) {
      const scriptElement = document.createElement('script')
        scriptElement.setAttribute('id', 'ads_script')
        scriptElement.setAttribute('src', 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-**************')
        scriptElement.setAttribute('crossorigin', 'anonymous')
        scriptElement.async = true
      document.querySelector('head').insertBefore(scriptElement, document.querySelectorAll('script')[0])
    }
  },
  .....
}

  これで、スクリプト読み込み重複が起こらなくなり先ほどのエラーも解消することができました。ただ、広告ユニットをコンポーネント化している場合に、下記のエラーも発生していました。ページ遷移時に広告がうまく読み込まれていないようです。

"adsbygoogle.push() error: All ins elements in the DOM with class=adsbygoogle already have ads in them."

  そこで、コンポーネント側でのmountedで広告データを更新する処理をすることにしました。一応念のため「nextTick()」を使って全てのコンポーネントの描画を待つようにしています。下記では広告のユニットIDとレイアウトの指定をPropsで渡してあげるようにしていますがこの辺りは適宜必要に応じて合わせておくと使い回せるので便利ですね。

<template>
  <ins 
    class="adsbygoogle" 
    style="display:block" 
    :data-ad-slot="adsenceSlot" 
    :data-ad-format="adsenceFormat" 
    data-ad-client="ca-pub-**************"
    data-full-width-responsive="true"
  >
  </ins>
</template>

<script>
  export default {
    .....
    props: {
      adsenceSlot: {
        type: String,
        default: '',
      },
      adsenceFormat: {
        type: String,
        default: '',
      },
    }
    mounted() {
      this.nextTick(() => {
        (window.adsbygoogle = window.adsbygoogle || []).push({})
      })
    }
  }
</script>

  色々と調べてみるものの、結構情報が少なかったのでちょっと強引な感じになっているかもしれませんが、現状はエラーも発生せず広告も正常に表示されているようなのでひとまず様子を見てみようと思います。先ほどのモジュールがその辺りも対応してくれるようになると嬉しいですね。   （参考にさせて頂いたサイト） Gridsomeで作ったサイトにGoogle Adsenseを導入する方法