Nuxt에서 애드센스 사용하는 방법 3가지

Nuxt에서 구글 애드센스를 사용하는 방법 정리

 

방법 1) Nuxt 앱 템플릿에 추가

root 디렉토리에 app.html 파일을 만든다. 기본적으로 app.html 파일은 다음과 같다.

 

여기에 아래처럼 애드센스 정보를 넣으면 된다. data-ad-client에 애드센스 ID를 넣으면 모든 경로에서 애드센스가 동작한다.

 

방법 2) @nuxtjs/google-adsense 라이브러리 사용

두 번째 방법은 라이브러리를 사용하는 방법이다. 먼저 아래처럼 설치한다.

yarn add @nuxtjs/google-adsense
또는
npm i --save @nuxtjs/google-adsense

 

nuxt.config.js 파일에 아래처럼 모듈 추가 및 애드센스 ID를 추가한다.

 

방법 3) 구성 파일에 스니펫 추가

마지막 방법은 스니펫 콘텐츠를 nuxt.config.js 파일의 head섹션에 추가하는 것이다. 다시 말하지만 이것은 간단하지만 가장 번거롭기 때문에 권장되지 않는다. 이 방법은 앱 템플릿에 추가하는 것과 유사하지만 구성 파일을 더 많이 막는다. 또한 vue-meta향후 종속성이 변경되면 이를 변경해야 할 수도 있다.

 

참고 : https://pipinghot.dev/tutorial/how-to-add-google-adsense-to-nuxt/