Nuxt.js Google Adsense 오류 없이 연동 하기

Nuxt.js에서는 Google Adsense(구글 애드센스) 광고를 이용할 때 가장 많이 사용하는 방법이 아마도

www.npmjs.com/package/@nuxtjs/google-adsense

@nuxtjs/google-adsense

위 @nuxtjs/google-adsense 모듈을 사용하는 방법일 겁니다.

 

해당 애드센스 모듈은 저도 오랫동안 사용해왔지만, 스토리북과 관련된 이슈도있고....

커스텀해서 붙이는 것처럼 동일된 태그를 계속해서 호출하는 문제가 있습니다.

 

이 문제는 정확히는 해당 모듈의 문제가 맞으면서도 아닌데, nuxt-router 즉 vue-router가 가상의 라우팅을 진행하면서 생긴 문제입니다. 초기 SSR 렌더링시에는 이미 호출이 됐는데 nuxt-link 등을 이용한 가상 라우팅의 접근으로는 head 태그가 또 호출이 되버립니다.

 

nuxt.config.js -> head -> script에 선언한 내용도 마찬가지로 동작하게 되는 문제가 있습니다.

이러한 동작은 다음과 같은 오류를 출력합니다.

"adsbygoogle.push() error: Only one AdSense head tag supported per page."

 

 

이를 해결하기 위해서는 해당 모듈을 사용하지 아니하고, 커스텀해서 사용할 것을 권장합니다.

 

// static/adsense.js
const script = document.createElement('script')
script.setAttribute('data-ad-client', 'ca-pub-1234567890')
script.setAttribute(
  'src',
  'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
)
document.head.appendChild(script)

static 폴더 밑에 adsense.js를 만들고 위 처럼 작성 후 ca-pub-값을 변경합니다.

 

 

// nuxt.config.js


head: {
  script: [
      {
        defer: true,
        hid: 'adsense',
        src: '/adsense.js',
      },
    ],
}

 

 

이렇게 하면 호출 부분은 끝입니다.  더이상의 오류가 나타나지 않습니다.

이제 광고 단위를 기준으로 컴포넌트를 만들어야 합니다.

 

 

// components/Ad.vue

<template>
  <div class="adsense-box pb-4">
    <ins
      class="adsbygoogle"
    ></ins>
  </div>
</template>

<script>
import { onMounted } from '@nuxtjs/composition-api'

export default {
  name: 'Ad',
  setup(_, { root }) {
    onMounted(() => {
      root.$nextTick(() => {
        try {
          ;(window.adsbygoogle = window.adsbygoogle || []).push({})
        } catch (error) {
          console.error('Adsbygoogle error is ', error)
        }
      })
    })
  },
}
</script>

<style scoped lang="scss">
</style>

저는 nuxt composition api를 사용하므로 setup을 이용합니다.

mount가 되었을 때 push를 진행합니다. 

 

이렇게 적용하고 컴포넌트를 호출해보면 콘솔에 오류가 없이 깔끔하게 진행되는 것을 볼 수 있습니다.