반응형
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/
반응형
'development' 카테고리의 다른 글
Java 스레드(Thread) 데드락(Deadlock) 방지하는 방법 (0) | 2023.02.07 |
---|---|
Java에서 HTTP HttpClient를 만드는 방법 (0) | 2023.02.06 |
2023 웹 개발 트렌드 10가지 (3) | 2023.02.05 |
[Nuxt] Template not found: /node_modules/@nuxtjs/google-adsense/dist/templates/plugin.mjs (0) | 2023.01.01 |
셸(Shell)과 터미널(Terminal) 차이 (0) | 2022.12.13 |