이번에는 Gatsby 블로그에 구글 광고(Google Adsense) 를 달았습니다. 스팀잇에 글을 작성하여 스팀으로 보상받고, 외부 블로그(Gatsby)에서는 구글 광고로 수익을 낼 수 있다면 가장 이상적인 형태가 될 것 같습니다. 사실 스팀잇 플랫폼 내에서 둘 다 가능하다면 가장 좋겠지요.

지금까지 "Gatsby로 스팀잇 개인 블로그 생성하는 방법", "Travis-CI를 사용하여 자동으로 블로그를 생성하고, Github Page에 배포하는 방법" 을 포스팅하였습니다. 지금도 Travis-CI의 Cron Jobs 기능을 사용하여 매일 블로그를 자동 배포를 하고 있습니다. 하지만 특정 시간에 Cron Jobs을 실행할 할 수 없는 것은 조금 아쉽습니다.

---

관련 글

1. 개츠비(gatsby)로 스팀잇 블로그 만들기
2. Travis-CI를 이용한 Gatsby 블로그 자동 배포하기

---

* * *

애드센스 광고 코드 가져오기

먼저 구글 애드센스 사이트에서 광고 코드를 생성해야 한다. 애드센스 홈페이지에서 광고 > 광고 단위 메뉴를 선택한다.

그리고 [+ 새 광고 단위] 버튼을 누른다.

첫 번째에 있는 텍스트 및 디스플레이 광고를 선택한다. 그리고 이름을 입력하고 광고 형태를 설정한다. 기본 입력되어 있는 설정을 그대로 사용해도 된다.

마지막으로 [저장 및 코드 생성] 버튼을 누른다.

이제 광고 코드가 생성되었다. 여기서 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 )}