이번에는 Gatsby 블로그에 구글 광고(Google Adsense) 를 달았습니다. 스팀잇에 글을 작성하여 스팀으로 보상받고, 외부 블로그(Gatsby)에서는 구글 광고로 수익을 낼 수 있다면 가장 이상적인 형태가 될 것 같습니다. 사실 스팀잇 플랫폼 내에서 둘 다 가능하다면 가장 좋겠지요.
지금까지 "Gatsby로 스팀잇 개인 블로그 생성하는 방법", "Travis-CI를 사용하여 자동으로 블로그를 생성하고, Github Page에 배포하는 방법" 을 포스팅하였습니다. 지금도 Travis-CI의 Cron Jobs 기능을 사용하여 매일 블로그를 자동 배포를 하고 있습니다. 하지만 특정 시간에 Cron Jobs을 실행할 할 수 없는 것은 조금 아쉽습니다.
관련 글
애드센스 광고 코드 가져오기
먼저 구글 애드센스 사이트에서 광고 코드를 생성해야 한다. 애드센스 홈페이지에서 광고 > 광고 단위 메뉴를 선택한다.
그리고 [+ 새 광고 단위] 버튼을 누른다.
첫 번째에 있는 텍스트 및 디스플레이 광고를 선택한다. 그리고 이름을 입력하고 광고 형태를 설정한다. 기본 입력되어 있는 설정을 그대로 사용해도 된다.
마지막으로 [저장 및 코드 생성] 버튼을 누른다.
이제 광고 코드가 생성되었다. 여기서 data-ad-client와 data-ad-slot 값만 기억하면 된다.
개츠비(Gatsby) 블로그에 구글 광고 달기
Gatsby 블로그는 React로 구현되어 있다. React에서 구글 광고를 사용하기 위해서는 react-adsense 라이브러리을 사용한다. react-adsense의 자세한 사용방법은 [react-adsense 사이트]를 참고한다.
react-adsense 설치하기
$ npm install --save react-adsense
react-adsense 사용방법
광고를 보여주기 원하는 곳에 광고 코드를 삽입한다. 나는 포스트 본문 상단에 삽입하였다.
import AdSense from 'react-adsense';
// auto full width responsive ads
<AdSense.Google
client='ca-pub-7292810486004926'
slot='7806394673'
style={{ display: 'block' }}
format='auto'
responsive='true'
/>
블로그 광고가 뜨는지 확인하기
자신의 블로그(https://anpigon.github.io/blog/)에 접속하여, 광고가 잘 보이는지 확인해보자.
광고 코드를 생성하고 광고가 표출되기까지 시간이 조금 걸립니다. 그리고 애드블록 (AdBlock) 프로그램을 사용하고 있으면, 구글 광고가 표시되지 않습니다.
사실 이전에도 티스토리 블로그에서 구글 광고를 사용한 적이 있습니다. 하지만 구글 광고 수익을 받아 본 적은 한 번도 없습니다. 구글 정책상 $100 이상 되어야지 수익을 받을 수 있는데, 총 수익이 $1도 안 됩니다. $100까지 앞으로 $95.46 남았습니다. ㅋ
다음은 구글 애드센스 홈페이지 메인 페이지에 있는 문구입니다.
여러분의 열정을 수익으로 돌려드립니다.
열정이 있으면 구글 광고 수익을 받을 수 있습니다.ㅋ 그리고 저의 Gatsby 블로그도 이제 조금씩 자리 잡아 가고 있네요.
여기까지 읽어주셔서 감사합니다.
Sponsored ( Powered by dclick )
