Nuxt.js에서 깔끔하게 구글 애드센스(Google Adsense) 추가하는 방법

Nuxt.js에서 깔끔하게 구글 애드센스(Google Adsense) 추가하는 방법

Nuxt.js에서 구글 애드센스(Google Adsense)를 추가할 때 직접 스크립트를 작성해도 되지만 최근에 매우 손쉽게 구글 애드센스를 추가할 수 있게끔 제공하는 라이브러리가 있어 소개하려합니다.

버전 정보

Nuxt.js@2.12.2

vue-google-adsense@1.10.1

vue-script2@2.1.0

설치

vue-google-adsense

npm install vue-script2 vue-google-adsense --save
// or
yarn add vue-script2 vue-google-adsense

플러그인 추가

Nuxt 플러그인에 plugins/vue-google-adsense.client.js 파일을 추가합니다.

import Vue from 'vue'
import Ads from 'vue-google-adsense'

Vue.use(require('vue-script2'))

Vue.use(Ads.Adsense)
Vue.use(Ads.InArticleAdsense)
Vue.use(Ads.InFeedAdsense)

그런 다음 다음 코드로 nuxt.config.js를 업데이트하세요.

module.exports = {
  ...
  plugins: [
	"~/plugins/vue-google-adsense.client"
  ]
}

템플릿 예시

Nuxt 플러그인에 추가한 후 컴포넌트에서 Adsense 컴포넌트를 불러와 템플릿에 추가하면 됩니다. data-ad-client, data-ad-slot은 애드센스 관련 키값으로 알맞는 애드센스 광고 코드 값으로 설정하면 됩니다.

<template>
  <div>
      <Adsense
        ins-style="display: inline-block; width: 320px; height: 120px"
        data-ad-client="ca-pub-xxxxxxxxxxxx"
        data-ad-slot="xxxxxxxxxxxx"
      >
      </Adsense>
  </div>
</template>