Jekyll 블로그에 구글 애드센스 설치하기

0. 설치하기 전에..

현재 블로그는 minimal mistakes 테마를 바탕으로 작성되었고, 개발자의 샘플 페이지에서도 애드센스가 각 페이지 하단에서 위치하는 것을 확인 할 수 있다. 블로그에 구글 애드센스는 신청 후 승인을 받아야만 운영 할 수 있기때문에, 신청하기 전에 미리 어느정도 블로그를 운영해서 일정 수준의 방문자와 포스트를 갖춰야 할 필요성이 있다.

1. 기본적인 애드센스 설치 방법

먼저 애드센스를 홈페이지에 달기위해 구글 애드센스 홈페이지에서 신청을 해야한다. 신청하게되면 아래와 같은 형식의 광고 코드를 자신의 홈페이지에 반영해서 업데이트하라는 문구가 나타난다.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-9089895411733030",
    enable_page_level_ads: true
  });
</script>

Minimial mistakes 테마를 기준으로 _layout\default.html 파일 내에서 아래 코드의 하단에 위의 애드센스 스크립트를 붙여 주었다.

<div class="initial-content">
   ~~~  
</div>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
~~~~

위처럼 수정 사항을 반영하고 애드센스 홈페이지에서 진행하는 단계를 완료하면 구글에서 승인 심사를 진행하고 1~2일 후에 결과가 나온다.

처음 시도했을때는 포스트가 적어서인지 거절되고 2번째 신청했을때 승인 결정이 나왔다.

2. minimal mistakes 테마에서 포스트 하단에 넣기

디자인 상 깔끔하다고 생각하는 광고의 위치가 각각

  • 테마 개발자의 샘플페이지처럼 매 페이지 최하단에 위치
  • 각 포스트의 컨텐츠의 마지막 부분 (태그/ 댓글창 등의 바로 위) 였기때문에 해당 위치에 애드센스를 설치하는 법을 살펴봤다.

테마 개발자는 위의 코드보다 아래의 코드를 사용하는 것을 추천했다.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<div align="center" style="margin: 1em 0;">
<ins class="adsbygoogle"
     style="display:block; border-bottom: initial;"
     data-ad-client="ca-pub-9089895411733030"
     data-ad-format="auto"></ins>
</div>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

2.1 각 페이지 최하단 설치

먼저 페이지 최하단에 설치하는 방법은 두 가지이다. 위의 코드를 아래에서 말하는 해당 위치에 붙여넣으면 된다.

  1. _layout\default.html 파일 내에 <div class="initial-content"> ~~~ </div> 다음 부분. (기본 설치와 같음)
  2. _include\footer\custom.html 파일 내에 작성.

제대로 동작하면 다음과 같이 광고가 나타난다.

ads1

2.2 각 포스트 내용 하단 설치

이 테마에서 기본적인 웹페이지는 _layouts\single.html의 형식을 공유한다. single.html을 살펴보면 포스트를 .md 파일로 작성했을 때 해당 컨텐츠의 내용이

<section class="page__content" itemprop="text">
~~~
</section>

에 위치하므로 </section> 바로 위에 애드센스 코드를 넣어주었다.

그러면 아래와 같이 포스팅 바로 하단에 광고가 위치하는 것을 볼 수 있다. |ads2|

카테고리:

업데이트:

댓글남기기