헥소(Hexo)에 구글애드센스(Google AdSense)추가

구글 광고 추가

블로그 활동도 하면서 부수입도 벌고자 하는 활동입니다
다만, 구글의 애드센스 승인 기간이 한참 걸리고
사이트에 글이 어느정도 있어야 허가 해줍니다.
그러니, 미리 미리 블로그에 글도 풍성하게 올리고 승인을 기다리세요.

구글애드센스 가입

구글애드센스 가입을 합니다
예전에는 승인이 쉬웠는데 유튜브 뜨고 나서는 승인이 오래 걸립니다
그래도 신청하고 기다려봅시다

사이트 추가

사이트를 추가해줍니다
애드센스에 등록된 사이트 리스트

이미 사이트가 등록되어 있으면 하위 도메인도 추가해 줄 수 있습니다
하위 도메인 추가

사이트 광고코드

광고 > 사이트기준 메뉴에서 코드 가져오기

사이트용 광고코드

광고코드 생성

코드 가져오기를 누르면 head 태그사이에 넣은 사이트용 코드가 생성된다

1
2
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1731752765228761"
crossorigin="anonymous"></script>

광고코드 추가

위에서 생성한 광고 코드를 중 head 태그에 넣은 코드를 복사합니다

  1. 설정파일로 adsense 정보를 추가합니다
  2. head.ejs 에 head 용 태그를 넣습니다

설정파일로 adsense 정보 추가

book 테마의 경우 설정파일이 source/_data/book.yml 에 있습니다.
구글 애드센스에서 만들어 놓은 광고코드 정보를 설정파일에 입력합니다

book.yml
1
2
3
google_adsense:
enable: true
adClient: ca-pub-1731752765228761

head.ejs 수정

head.ejs 에 head 용 광고코드를 추가합니다.
google_adsense 를 사용할 때만 넣게 if 문으로 넣습니다

themes/book/layout/_partials/head.ejs
1
2
3
4
5
<!-- google adsense -->
<% if (theme.google_adsense.enable){ %>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=<%= theme.google_adsense.adClient %>"
crossorigin="anonymous"></script>
<% } %>

배포

배포해서 애드센스가 적용되는 지 확인합니다.

1
$ npm run deployall

적용결과

애드센스가 적용되는데 1시간까지 걸릴 수 있습니다
구글애드센스가 사이트를 분석해서 알아서 광고 창을 띄워줍니다
구글애드센스적용결과