Gatsby 사이트에 애드센스 적용하기
1. Ads.txt 추가
Gatsby 블로그에 구글 애드센스를 적용하면,
먼저 ads.txt 파일을 루트 디렉토리에 업로드 해야한다.
처음에는 바보같이 최상단 루트에 업로드해서 deploy 과정에서 초기화가 되면서 파일이 계속 지워졌다...🥹
Ads.txt가 root 에 없다?!
해결방법은 간단하다.
먼저 package.json에 build시에 적용되게, 아래 코드를 추가해주자.
"scripts":{
"build": "gatsby build && cp static/ads.txt public/",
...
}그럼 Deploy 과정에서 /static 폴더의 파일들은 /public 폴더로 복사되어 정상적으로 적용된다.
2. <head>에 스니펫 추가
2-1. gatsby Head API을 이용하여 Head 추가
나는 react-helmet 대신 gatsby Head API를 이용해서 head에 추가하였다.
export const SEO = () => (
<>
<title>Just Do It!</title>
<meta name="google-adsense-account" content="ca-pub-****"></meta>
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-****"
crossorigin="anonymous"
></script>
</>
);[주의] React-helmet과 혼용하지말자.
간혹 react-helmet과 head api를 혼용해서 쓰다가 아래 같은 오류를 마주할 수 있다.
AdSense head tag doesn't support data-react-helmet attribute.
나는 react-helmet에서 gatsby head api로 마이그레이션 과정 중에서 이 오류메시지를 보게되었는데...
해당 관련 삽질 후기는 여기에서 확인가능하다.
2-2. gatsby-plugin-google-adsense 플러그인 사용
Gatsby 플러그인 gatsby-plugin-google-adsense을 설치 후, gatsby-config.js에 추가해주면 끝이다.
사용방법이 제일 간단하니, 앞서 소개한 방법이 어려우신 분은 이 방법을 사용하는 것이 제일 좋을 것 같다. 나도 애드센스 오류가 계속나서 위 방법을 사용해서 오류를 수정했다.
2-3. Netlify에서 제공하는 스니펫 삽입
이 방법도 진짜 간단하다.
Site configuration > Build & deploy > Post processing 에서 스니펫을 추가해주면된다.
