애드센스를 활용하여 수익을 올리기 위해서는 본문에 적절한 광고들이 잘 들어가야 한다는 것은 다들 알고 있을 것이다 그런데 내가 원하는 곳에 광고를 넣고 싶은데 소스를 그때그때 넣기는 여간 힘든일이 아니다 이럴때 쉽게 할 수가 있는 방법은 없을까 하는 분들이 계신데 오늘 이야기 하는 방식을 이용하면 정말 쉽게 활용을 할 수가 있다

방법은 바로 서식을 이용하는 방법이다 소스코드를 서식으로 만들어 놓으면 되는거지 그러면 어떻게 하면 되는지도 한번 알아보도록 하겠다 오늘 이야기 하는 방법은 스크립트 방법으로 나중에 광고의 모양이나 방식을 한번에 바꿀때 본문을 수정할 필요가 없는 방법이기 때문에 정말 유용한 방법이니 한번 잘 보기 바란다

그러면 티스토리의 서식관리로 먼저 들어가 본다 좌측에 보면 아래와 같이 서식관리를 할 수가 있다 이 곳은 내가 자주 사용하는 폼을 서식으로 만들어서 언제든 계속해서 사용을 할 수가 있게 만들 수가 있다는 부분에서 잘 활용을 하면 효율적으로 사용을 할 수가 있다 

그리고 서식등록을 할때 아래와 같이 간단하게 하나 등록을 한다 Div 하나만 html 보기로 등록을 하면 된다 html 편집으로 꼭 해야만 한다 아래와 같이 기본모드 에서 Html 을 선택을 한다 그러면 본문이 까만색으로 바뀌는 것을 알 수가 있다

아래와 같이 에디터가 바뀌었다면 html 하나를 넣어준다 간단하게 딱 div 하나와 Id 만 정리를 해서 넣어준다 그리고 안의 내용은 공백으로 넣어준다 너무 간단하다 이렇게 하면 끝인가 이게 어떻게 움직이는 것일까 하는 사람들이 있을 것 같다 여기에서 끝이 나는건 아니다 다음 스텝으로 가 본다.

하여간 이렇게 서식이 하나 생성이 된 걸 알 수가 있다 안에 들어가면 아무것도 보이지 않는다 그냥 공백일 뿐 그러면 이제 html 수정하기로 가 본다 여기에서 이제 시작을 하는 것이다

그리고 소스의 맨 마지막 부분으로 간다 그리고 아래의 빨강 부분 소스를 삽입을 한다 이 부분이 이 서식을 이용해서 광고를 띄우는 부분이라 볼 수가 있다 

간단하게 해석을 해 보겠다 자바스크립트 로 되어 있다는 것을 알 수가 있는데 해석을 하면 이렇다 만약 본문에 ads 로 되어있는 객체가 있는지를 확인을 해 본다 그리고 있으면 그 객체 안에 innseHtml 로 html 을 추가를 해 준다는 그런 이야기 이다 

그 내용은바로 애드센스 광고 내용을 넣으면 될 것이다 그러면 이제 본문에서 ads 로 된 객체가 있으면 그 부분에 저 소스가 들어가게 되는 것이다 그럼으로 광고가 나오게 되는 것이다 아주 스마트한 부분이다

소스에서 녹색 박스 부분만 나의 애드센스 코드로 바꾸어 준다 이 부분은 위에서 몇번 언급을 했으니 잘 알거라 생각한다 잘 이해가 안간다면 아래의 문서를 한번 자세히 살펴보면 될 것 같다 그리고 아래의 본문도 애드센스를 하는 분들이라면 꼭 참조를 하면 좋을 것 같다 너무나도 유용하기 때문이다

자 여기까지 만들었다면 이제 세팅이 다 되었다 글을 쓸때 서식만을 이용하면 된다 하나 실습으로 만들어 보도록 하겠다 이미 작성을 한 글에 한번 내가 원하는 곳에 광고를 넣어 보도록 하겠다 나는 아래의 본문 사이에 광고를 넣고 싶다 예전의 방법으로 하려면 html 로 바꾸어서 소스를 다 넣어야 한다 너무 번거롭다 

그러면 본문 수정으로 한 다음 커서를 광고를 넣을 부분으로 가져다 놓는다 그리고 난 다음 서식 열기를 해 본다 

서식을 보면 아까 만들어 놓은 서식을 찾을 수가 있다 하나하나 천천히 따라오면 누구나 다 만들 수가 있다 이렇게 서식에 있는 애드센스 본문을 선택을 한다 그러면 끝이 난 것이다 완료 버튼을 클릭을 하면 된다

그러면 안에 내용이 잘 들어가 있는지를 한번 본문에서 Html 보기로 확인을 해 본다 확인을 해 보니 서식으로 만들어 놓은 부분이 잘 들어간 것이 확인이 된다 

자 그럼 나가서 본문 보기를 해 보자 이 곳에 광고가 잘 들어갔는지 확인을 해 보겠다 와 내가 원하는 광고가 딱 들어가 있는것을 볼 수가 있다 너무 기분이 좋지 않은가 이렇게 하면 내가 원하는 곳에 광고를 넣을 수가 있다는게 정말 중요한 부분이라 생각을 한다

이렇게 오늘은 서식을 이용하여 애드센스 본문광고를 쉽게 넣는 방법을 알아보았다 이 방식이 좋은 점은 나중에 본문의 광고 형식을 바꿀때 html 의 소스만 바꾸면 모든 본문의 광고가 다 한번에 바뀐다 즉 100개의 글이 있다면 예전에는 하나하나 들어가서 본문을 다 수정해야 했다면 이제는 그냥 html 편집에서 한번만 바꾸면 싹 바뀐다 

그리고 모든 본문에서 광고를 빼야하는 상황이 발생했다면 그때도 html 소스 부분만 지우면 한번에 싹 빠진다 그래서 이런 서식을 여러개 만들어서 본문 사이사이 다양한 광고 스타일을 넣는 방식도 괜찮다는 생각이 든다 본문에 쉽게 서식을 넣고 나중에 일괄로 한번에 수정을 하고자 한다면 이 방식을 사용해 보길 권장한다 스크립트는 파일로 제공을 하도록 하겠다 함께 돈 벌어보자!!!

애드센스 승인을 얻은 후로 부턴 한동안 애드센스 관련된 내용을 계속해서 연재를 할 예정이다 내가 이 오빠만세 사이트에 광고를 만들어 나가는 과정을 모두 글로 만들어 볼 예정이다 그럼으로 내가 가지고 있는 Tip 들이 다 이 곳에 들어갈 것이라 생각을 하고 많은 분들에게 이 내용들이 도움이 되었으면 좋겟다 

지난 시간에 애드센스 광고에 대한 부분을 이야기를 해 보았고 다양한 종류의 광고를 직접 만들어 보기도 햇다 그렇게 코드를 만들었다면 이제는 나의 사이트에 적용을 해 볼 차례이다 나의 경우는 자동광고와 광고단위를 함께 사용하는 편이다 다 장단점이 있기 때문이다 광고 단위로 쓰면 내가 원하는 곳에 광고를 넣을 수가 있기 때문이다 

애드센스 촤적화 광고 사이즈는 

내가 알고 있기로는 336*280 이 최적화 된 사이즈라고 볼 수가 있다 모바일에서도 확실하게 보이고 Pc 에서도 괜찮은 사이즈로 보이기 때문에 나는 이 사이즈를 즐겨 사용을 하고 있다 그리고 상단이 가장 수익이 괜찮기 때문에 상단 광고에 힘을 많이 주는 편이다 그래서 pc 에서는 상단에 2개의 광고가 모바일에서는 하나의 광고가 자동으로 보이게 할 예정이다 

이렇게 하기 위해서는 html 편집에서 스크립트를 넣어주는게 좋다 그러면 일단 먼저 스크립트를 애드센스에서 가지고 온다. 

신규 광고단위 에서 지난번에 만들어 놓은 상단광고를 가지고 온다 <> 이 표시를 클릭을 하면 소스를 볼 수가 있다 이 곳에서 소스 보기를 한다. 

가장 중요한 부분은 위의 빨간박스 안에 있는 부분이다 위의 부분은 클라이언트 라고 해서 애드센스 계정의 고유 코드이다 보통 펍코드 라고도 많이들 부른다 나의 애드센스 계정을 뜻하는 내용이다 그리고 아래 부분은 광고단위의 고유 코드이다 이 두가지 코드만 일단 알아 놓는다 그리고 스크립트를 만들어 본다 아래와 같이 

<div align = "center">
<script>
//상단 768 픽셀 이상일 경우 광고 송출
if(window.getWindowCleintWidth()>=768){
	document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle"style="display:inline-block;width:336px;height:280px;"data-ad-client="ca-pub-4706755557397688"data-ad-slot="2615550355"></ins>');
		(adsbygoogle = window.adsbygoogle || []).push({});
	}
</script>
					
<script>
//상단 광고 송출
	document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle"style="display:inline-block;width:336px;height:280px;"data-ad-client="ca-pub-4706755557397688"data-ad-slot="2615550355"></ins>');
		(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>




<div align = "center">
<script>
    //하단 전체광고
		document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:block;width:100%" data-ad-client="ca-pub-4706755557397688" data-ad-slot="2615550355" data-ad-format="auto" data-full-width-responsive="false"></ins>');
		(adsbygoogle = window.adsbygoogle || []).push({});
</script>		
</div>

자바스크립트를 잘 모르는 분들에게는 어려울 수가 있으나 너무 어렵게 생각을 하지 않아도 된다 위의 소스에서 딱 두군데만 고치면 된다 펍코드와 슬롯 부분만 수정을 하면 된다 그리고 적용만 하면 바로 멋진 광고코드가 붙는걸 볼 수가 있다

그러면 어떻게 하는지를 알아보자 일단 위의 소스를 만들었다면 아래와 같이 티스토리의 html 편집으로 간다 이 곳에서 수정을 하면 되기 때문이다 html 편집을 어떻게 해야하는지 모르겠다면 아래의 글을 참조하면 될 것 같다

자 그러면 html 편집에서 위의 소스를 한번 넣어보겠다 먼저 소스에서 아래 부분을 찾는다 이 부분은 본문 내용이 나오는 티스토리 매타 태그라고 보면 된다 그러니 이 부분이 본문의 내용이라고 보면 된다 그래서 이 광고는 본문의 위 아래에 나오게 하는게 오늘의 해야할 임무라고 볼 수가 있다 

본문의 내용을 찾았다면 아래 위로 위의 소스를 넣어준다 이렇게 하면 완성이 되었다 너무 쉽다 html 을 조금 알고 자바스크립트를 조금만 안다면 누구나 쉽게 할 수가 있다 소스가 이해가 가지 않는다 하더라도 이 부분만 그냥 따라하기를 하면 될 것 같다

그러면 위의 소스에서 어떤 부분을 수정을 하면 될까 딱 두군데만 수정을 하면 된다 초록 박스로 한번 부각을 시켜 보겠다 아래의 초록 박스 부분을 애드센스에서 가지고온 소스로 수정만 해 주면 알아서 들어가 진다 처음 하면 어렵겠지만 몇번 해 보면 어렵지 않게 하지 않을까 하는 생각이 든다 소스는 파일로 첨부를 해 놓겠다  

그러면 광고소스를 넣기 전과 후를 한번 비교를 해 보겠다 넣기전은 아래와 같이 일반 텍스트만 보이는 것을 알 수가 있다 

광고를 넣었을때는 이렇게 예쁘게 나오는 것을 알 수가 있다 pc 버전은 이렇게 상단에 두개의 광고가 나오는게 개인적으로는 더 효과가 있는 것 같다 물론 다른 스타일을 좋아하는 분들이라면 알아서 잘 만들어 놓으면 될 것 같다는 생각도 든다

그리고 아랫 부분은 이렇게 큰 광고가 나오는 것을 볼 수가 있다 아래는 이렇게 크게 나오는게 괜찮아 보여서 이런 광고를 넣게 되었다 그 아래 일치하는 광고를 넣으면 더 좋을 것 같다 다음에는 일치하는 광고도 한번 넣어봐야겠다 

그리고 창을 작게 하면 이렇게 상단의 부분이 하나의 광고로 만들어지는 것을 볼 수가 있다 그러니 모바일이나 작은 화면으로 볼 때는 두개로 나와서 불편하지 않고 깔끔하게 광고를 볼 수가 있다는것을 알 수가 있다

이런 방법이 아닌 플러그인을 사용하는 방법을 이용해도 된다 요즘은 수익 이라는 곳이 별도로 있어서 그 곳에 애드센스 코드를 넣고 해도 되나 좀 느린 감이 있어서 나는 옛 스타일로 그냥 사용을 하고 있다

이 방법이 티스토리 글 로딩 속도가 더 빠른 것 같아서 불편해도 사용자를 위해 빠른 속도를 유지하기 위해 이 방법을 선호한다 위의 소스 부분은 파일로 남겨 놓을테니 사용을 하고 싶은 분들은 사용을 해 보기 바란다

오늘 이 방법으로 광고를 띄워 볼 사람들은 한번 따라 해 보는 것도 나쁘지 않다는 생각이 든다 다음에는 본문에 광고를 쉽게 넣는 방법에 대해 한번 이야기를 해 보도록 하겠다 그러면 오늘도 좋은 하루!!!