![[구글 애드센스] 게시물 상단 광고 적용 방법](https://i0.wp.com/www.walterz.net/wp-content/uploads/2017/11/1102529004_44db4a5e32_z.jpg?resize=500%2C400&ssl=1)
구글 애드센스는 블로그 관리자에게 수익을 창출해주는 도구입니다. 다른 수익모델과 비교해보았을 때 광고의 종류라든지 적용할 수 있는 광고 형태라든지 모든 부분에서 우수하기 때문에 전 세계적으로 가장 널리 사용되고 있는 수익모델입니다. 우리나라에도 구글 애드센스를 통하여 수익을 내려는 블로그가 많습니다.
그런데 블로그에 광고를 부착하여 수익을 창출하려면 약간의 지식이 필요합니다. 네이버 애드포스트와 같이 자동으로 광고가 삽입되는 것이 아니라 사용자가 직접 블로그를 본문에 넣어야 하는 이유 때문입니다. 이 글에서는 구글 애드센스를 본문 상단에 추가하는 방법에 대하여 알아볼 것입니다.
구글 애드센스
https://www.google.com/adsense/
광고 두 개를 본문 상단에 넣는 방법
이 방법은 가장 많이 사용되고 있는 광고 위치입니다. 본문 상단에 광고를 두 개 붙임으로써 방문자로 하여금 광고에 이목을 집중시키는 효과를 가져옵니다. 이 블로그에서도 동일한 방법을 사용하고 있습니다. 본문의 최상단은 아니지만 첫 번째 섹션이 시작되기 전에 광고 두 개를 보여줍니다.
그런데 모바일에서는 광고 두 개를 보여주기에 무리가 있습니다. 두 개의 광고를 모바일에서 그대로 출력시키면 화면 전체에 광고가 나타나기 때문입니다. 구글에서는 디스플레이의 상당 부분은 가리는 광고 위치를 단속하고 있으므로 모바일에서는 두 개의 광고 중 하나를 다른 곳으로 옮기거나 제거하는 작업이 필요합니다.
본문 상단에 두 개의 광고를 삽입하는 방법은 다음과 같습니다.
<html>
..........
<div id="googleAds">
<div class="ads-mobile"></div>
<div class="myads-01">
<!-- 첫 번째 애드센스 광고 코드 (336 x 280) / ins element class: myads adsbygoogle -->
</div>
<div class="myads-02">
<!-- 두 번째 애드센스 광고 코드 (336 x 280) / ins element class: myads adsbygoogle -->
</div>
</div>
<!-- 이곳에 본문이 들어갑니다. -->
..........
</html>
위 소스코드를 본문 상단에 넣어주는 것이 일반적인 방법이지만, 모바일에서의 광고 위치 제어를 용이하게 하고 최근에 각광받고 있는 광고 형태인 페이지 수준 광고에 대비하기 위하여 아래와 같이 자바스크립트를 이용하여 본문 상단에 광고를 삽입하는 것이 좋습니다.
필자의 블로그에서도 다음과 같은 방법으로 구글 애드센스를 본문 상단에 삽입하였습니다.
// 본문 헤더에 Open Graph가 추가되어 있어야 정상적으로 작동합니다.
var is_article = jQuery("meta[property='og:type']").attr("content");
var ad_client = ''; // 본인의 애드센스 클라이언트 코드
var ad_01 = ''; // 첫 번째 광고 코드
var ad_02 = ''; // 첫 번째 광고 코드
// 본문이 열러있는 상태에서만 스크립트를 실행합니다.
// 본문이 아닌 영역(첫 페이지, 카테고리 페이지 등)에서는 작동하지 않습니다.
if (is_article == 'article') {
// 본문의 가장 첫 번째 h4 요소 앞에 애드센스 박스를 추가합니다.
jQuery('div.entry-content h4:first').before('<div id="googleAds"><div class="ads-mobile"></div><div class="myads-01"><ins class="myads adsbygoogle" style="display:block" data-ad-client="'+ad_client+'" data-ad-slot="'+ad_01+'" data-ad-format="rectangle"></ins></div><div class="myads-02"><ins class="myads adsbygoogle" style="display:block" data-ad-client="'+ad_client+'" data-ad-slot="'+ad_02+'" data-ad-format="rectangle"></ins></div></div>');
// 모바일 환경에서는 광고 하나를 본문의 가장 마지막 h4 요소 앞에 넣습니다.
if (jQuery('#ads .ads-mobile').css('display') == 'block') {
var ads_02 = jQuery('#googleAds myads-02').removeClass('myads-02').addClass('ads-single');
jQuery('div.entry-content h4:last').before(ads_02);
jQuery('#googleAds').remove('.myads-02');
}
jQuery('.myads').each(function () {(adsbygoogle = window.adsbygoogle || []).push({});});
}
위 스크립트를 본문 페이지의 </body> 바로 앞에 추가합니다. 그런데 블로그에서 Open Graph를 사용하고 있지 않은 경우에는 다음과 같은 방법을 사용하십시오.
- 블로그 헤더에 다음을 추가
<script>var is_article = false;</script> - 본문이 시작되는 위치에 다음을 추가
<script>is_article = 'article';</script> - 위 스크립트에서 is_article 변수 정의 부분을 삭제
티스토리 블로그를 사용하고 있다면 skin.html을 수정하면 되고, 워드프레스를 사용하고 있다면 content-single.php를 수정하면 됩니다.
위 스크립트는 적어도 2개 이상의 h4 태그가 사용되어야 정상적으로 작동합니다. 왜냐하면 모바일 환경에서 두 개의 광고 중 나머지 한 개의 광고를 가장 마지막 h4 태그 앞에 이동시키기 때문입니다. 만약에 본문이 짧은 글을 많이 작성하는 블로그라면 위 스크립트에서 아래 부분을 제거합니다.
var ads_02 = jQuery('#googleAds myads-02').removeClass('myads-02').addClass('ads-single');
jQuery('div.entry-content h4:last').before(ads_02);
이렇게 하면 모바일 환경에서는 한 개의 광고만 출력됩니다. 이 방법을 응용하면 광고의 위치를 자유자재로 제어할 수 있습니다. 아래에서도 설명하겠지만 본문 상단 우측에 광고 하나를 위치시킬 때에도 이 방법이 사용됩니다.
그러나 자바스크립트를 이용하여 광고를 제어할 때에는 구글 애드센스 광고 붙임 메소드 push()가 실행되지 않은 상태이어야 합니다. 만약 이 메소드가 실행된 후 자바스크립트를 이용하여 광고의 위치를 바꾸는 경우에는 애드센스의 내부적 오류가 발생할 것입니다. 이 글에서도 해당 메소드가 아직까지 사용되지 않았음을 확인할 수 있습니다. push() 메소드의 사용방법은 아래에서 설명하도록 하겠습니다.
스타일시트 (CSS)
위 스크립트를 적용한 후에는 광고가 정상적으로 화면에 출력될 수 있도록 스타일시트를 수정해야 합니다. 아래의 내용을 블로그 스타일시트(CSS)에 추가합니다.
/* Google Adsense */
#googleAds {
max-width:697px;
width:100%;
margin:0 auto;
margin-top:0px;
margin-bottom:60px;
}
#googleAds:after {
display: block;
content: "";
clear: both;
}
#googleAds .myads-01 {
float: left;
max-width:336px;
width:100%;
margin: 0px auto;
}
#googleAds .myads-02 {
float: right;
max-width:336px;
width:100%;
margin: 0px auto;
}
#googleAds ins,
.ads-single ins {
border-bottom: 0px;
font-style: normal;
text-decoration: inherit;
}
#googleAds .ads-mobile {
width: 0px;
height: 0px;
overflow: hidden;
display: none;
}
.ads-single {
max-width:336px;
width:100%;
margin: 0px auto;
margin-top:0px;
margin-bottom:60px;
}
@media (max-width: 1200px) {
#googleAds .myads-01 {
float: none;
margin: 0px auto;
}
#googleAds .ads-mobile {
display: block;
}
}
위 내용을 스타일시트에 추가하면 자바스크립트에 의하여 만들어진 광고가 아래와 같이 본문 상단에 정렬됩니다. 광고에 초록색 레이어가 덧붙여진 것은 구글 크롬의 Google Publisher Toolber의 광고 오버레이 기능을 사용하였기 때문입니다. 광고 오버레이 기능을 사용하면 블로그 관리자는 광고를 클릭할 수 없게 되어 부정클릭으로부터 자유로워집니다.
구글은 애드센스를 이용하여 부정적인 수익을 올리는 사용자를 지속적으로 단속하고 있습니다. 사이트 방문자로부터 직접 신고를 받거나 구글만의 검열 시스템을 사용합니다. 관리자 계정으로 로그인한 후 구글 광고를 클릭하면 부정클릭으로 인식될 확률이 높은 이유입니다. 그러므로 되도록이면 광고 오버레이 기능을 사용하도록 합시다.
웹브라우저 화면을 줄여 모바일 환경으로 만든 후 새로고침을 하면 본문 상단에서 광고 하나가 사라지고 본문 하단에 광고가 추가되는 것을 확인할 수 있습니다. 이렇게 자바스크립트를 사용함으로써 구글 애드센스 광고를 본문 곳곳에 위치시킬 수 있습니다. 다음으로는 본문 우측 상단에 광고를 위치시키는 방법에 대하여 알아보도록 하겠습니다.
광고를 본문 우측 상단에 넣는 방법
이 방법은 뉴스 사이트에서 많이 사용되고 있습니다. 구글 애드센스 교육 세션에서도 추천하고 있는 광고 위치 최적화 방법입니다. 사람의 눈은 왼쪽에서 오른쪽으로 글을 읽기 때문에 본문과 합쳐진 광고가 있다면 그 광고에 어쩔 수 없이 눈이 가게 된다는 것이 이 방법의 논리입니다.
초보자를 위하여 위에서 사용했던 스크립트에 내용을 추가하는 방법으로 기능을 구현할 것입니다. 새롭게 스크립트를 만드는 것은 본문 분량이 늘어날 뿐만 아니라 어렵다고 판단했기 때문입니다.
일단 우측 상단에 광고를 위치시키려면 본문 상단에 있는 두 개의 광고 중 하나를 제거해야 합니다. 모바일 환경에서 광고를 삭제했던 방법과 동일합니다. 그렇다면 모바일에서든 PC에서든 광고 하나를 제거해야 하는 것은 같으므로 위 스크립트에서 다음 부분을 삭제하도록 합니다.
if (jQuery('#ads .ads-mobile').css('display') == 'block') {
// 블록만 삭제하고 내용은 삭제하지 마세요.
....
}
조건문을 삭제하면 블록 내부에 있던 내용이 밖으로 나오게 됩니다. 이렇게 되면 모바일 뿐만 아니라 PC에서도 본문 상단의 광고 두 개 중 광고 하나를 본문 마지막 h4 태그 앞쪽으로 이동시키게 됩니다. 위에서 설명했던 것처럼 본문 내용이 짧은 경우를 대비해야 한다면 아래 부분을 스크립트에서 제거하면 됩니다. 위와 동일한 방법입니다.
var ads_02 = jQuery('#googleAds myads-02').removeClass('myads-02').addClass('ads-single');
jQuery('div.entry-content h4:last').before(ads_02);
이렇게 자바스크립트를 사용하여 광고 위치를 변경했다면 우측 상단에 광고가 위치할 수 있도록 스타일 시트를 수정해야 합니다. 위에서 설명했던 스타일 시트를 수정하는 방식으로 진행하겠습니다. 우선 본문 상단에 위치하고 있는 광고의 스타일을 수정해야 합니다. myads-01 class를 다음과 같이 수정합니다.
#googleAds .myads-01 {
float: none;
max-width:336px;
width:100%;
margin: 0px auto;
}
그리고 두 개의 광고를 감싸고 있던 영역을 광고 한 개 크기에 맞도록 넓이를 수정하고 우측에 위치할 수 있도록 해당 속성을 추가해야 합니다. 본문 텍스트에 직접적으로 삽입되는 광고이기 때문에 본문과 내용이 겹치지 않도록 여백을 지정해주는 것이 중요합니다.
#googleAds {
max-width:336px;
width:100%;
margin-top: 20px;
margin-left:20px;
margin-bottom:20px;
}
모두 수정하면 아래와 같이 광고 하나가 본문 상단 우측에 출력됨을 확인할 수 있습니다. 광고가 본문과 붙어있기 때문에 방문자로하여금 광고에 시선이 쏠리게 하는 효과를 극대화시킬 수 있습니다. 광고 클릭률이 낮은 경우에 이 방법을 한 번 사용해보십시오.
그런데 본문 상단에 이미지가 있는 경우에는 이 방법을 사용하였을 때 화면이 깨질 수 있습니다. 그러므로 본문 우측 상단에 광고를 넣고자 할 때에는 이미지 사용을 자제해야 합니다. 이미지를 본문 중간부터 삽입하는 것이 안전하게 광고를 출력하는 방법입니다.
지금까지 구글 애드센스 광고를 본문 상단에 넣는 방법에 대하여 알아보았습니다. 본문 상단에 두 개의 광고를 나란히 출력하는 방법과 우측에 하나의 광고를 출력하는 방법을 배웠습니다. 그런데 아직 구글 애드센스 스크립트의 push() 메소드를 실행하지 않았습니다. 이 메소드를 실행하지 않으면 광고가 출력되지 않습니다. 상단의 스크린샷들은 광고 출력 모습을 미리 보여드리기 위한 예제입니다.
push() 메소드 사용방법
구글 애드센스 push() 메소드는 하나의 <ins> 태그를 광고 스크립트로 변경시켜줍니다. 하나의 <ins> 태그에 대해서만 작동하기 때문에 본문에 삽입되어 있는 모든 광고에 적용시키려면 광고 갯수만큼 메소드를 실행해야 합니다. 광고 갯수만큼 push() 메소드를 실행하는 방법은 다음과 같습니다. myads class를 기준으로 삼은 이유는 페이지 수준 광고에 대비한 것입니다.
jQuery('.myads').each(function () {(adsbygoogle = window.adsbygoogle || []).push({});});
이 글에서 설명했던 구글 애드센스 관련 스크립트가 모두 실행된 후에 위 스크립트를 실행하면 됩니다.
마무리
지금까지 구글 애드센스 광고를 본문에 삽입하는 여러 방법에 대하여 알아보았습니다. 이 글에서 설명한 방법 외에도 다양한 방법이 있으므로 다른 블로그를 방문하여 광고 위치를 연구해보십시오. 최적화된 광고 위치는 클릭률을 높여 수익을 극대화할 수 있으므로 자신의 블로그에 맞는 광고 위치를 찾는 것이 중요합니다. 이 글에서 잠깐 언급되었던 페이지 수준 광고에 대해서는 추후 글에서 따로 설명하도록 하겠습니다.
구글 애드센스에서 head 나 body에 붙여넣으라고 제공해주는 소스?만
head에 갖다 놓으면 자동으로 광고가 생성되는게 아니라
추가적으로 작업을 해줘야 광고가 나오는건가요?
ㅠㅠ
그렇습니다.
에 애드센스 코드를 넣더라도 광고가 출력될 부분에 별도의 소스코드를 추가해야합니다.하지만 최근 애드센스에서 새롭게 추가한 기능인 인공지능 기반 자동배치 서비스를 이용하면 별도의 소스코드 삽입 없이도 애드센스 광고를 페이지에 넣을 수 있습니다. 이 경우에는
에 애드센스 코드만 넣어주면 됩니다.http://furuna.tistory.com/
위 블로그 유저분의 애드센스 코드를 살펴보면
위 스크립트 만으도로 애드센스가 나오는데
어떤 방법인가 해서요?
너무 궁금해서 실례를 무릎쓰고 질문을 드려봅니다.
소스코드를 보았는데, 무엇인가 다른 방법으로 애드센스 광고를 넣은 것 같습니다. 찾아보아야 할 것 같습니다.