애드센스 반응형 광고 모바일 데스크탑 상단광고 설정해서 수익 올리기

애드센스를 통해 수익을 얻는 블로거 분들이 갈수록 많아지고 있는데요. 애드센스 고수익 어떻게 해야 될까요? 우선 오늘은 페이지크기 별 노출광고 최적화를 통해 내 티스토리 블로그에 애드센스 광고를 보다 깔끔하게 설치 하는방법에 대해 적어보려고 합니다.

우선 제 새컨 블로그를 보실까요?

제 새컨블로그 PC(데스크탑) 화면 입니다. 본문 상단에 광고가 한번에 3개가 들어가는 뻘짓을 하고 있는데요. (어디까지나 테스트를 위해서^^;;) 하지만 이 블로그를 모바일에서 보면 어떻게 될까요?

모바일에선 보시는 바와 같이 1개의 사각형 광고만 나옵니다. 모바일 해상도에 최적화 시켜 본문내용과 광고를 같은 페이지에 노출시키려는게 제 목적이거든요. 왜 그래야 하냐구요?

상대적으로 화면이 넓은 데스크탑에선 대부분 애드센스 광고를 티스토리 글 본문 상단에 2개를 배치 하시는 분들이 많은데.. 모바일에서 까지 본문 상단 광고가 2개가 노출되면 블로그를 찾는 방문객은 내용을 보기 위해 2개의 광고를 내용없이 봐야 해서 페이지 이탈율이 그만큼 올라가게 되죠. 즉.. 내 블로그를 찾는 방문객을 위한 최소한의 배려 입니다. 

'나같으면?'  으로 생각해보면 답이 바로 나오더라구요. 저도 스마트폰으로 검색을 많이 하는 편인데 .. 검색해서 들어갔는데 뜬금없이 내용은 없고 광고만 있으면 바로 뒤로가기 눌러버리는 급한성격인지라 ㅎㅎ

아무튼 각설하고 위처럼 광고를 데스크탑용 모바일용 으로 구현하려면 어떻게 해야 할까요? 생각보다 간단하답니다. 우선 본문상단에 광고를 2개 넣어보신 분이라면 금방 따라할 수 있을 난이도 이니 걱정말고 한번 해보시는게 어떨까요?

원리는 단순합니다. 현재 페이지의 해상도 값을 조건문으로 나눠서 일정 해상도 이하의 페이지에선 모바일용광고, 일정 해상도 이상에서는 PC용광고 를 노출 시키는 방법입니다. 

준비물 1.

우선 아래 소스파일을 받거나 아래 소스코드를 복사해서 붙여넣기 하셔도 됩니다.

상단반응형.txt

<!-- 상단 반응형 광고 -->

<center> //광고 위치 가운데

<div>

<script>

if(window.getWindowCleintWidth()>=768){ //데스크탑용 광고

//상단광고 1

document.write('<script async 

src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" data-

language="ko" style="display:inline-block;width:336px;height:280px" data-ad-client="☆☆" data-ad-

slot="★★"></ins>');

//상단광고 2

document.write('<script async 

src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" data-

language="ko" style="display:inline-block;width:336px;height:280px" data-ad-client="☆☆" data-ad-

slot="★★"></ins>');

(adsbygoogle = window.adsbygoogle || []).push({});

}

</script>

</div>

<div>

<!-- 모바일 상단 300 x 250 크기-->

<script>

if(window.getWindowCleintWidth()<768){ //모바일용 광고

//모바일 상단광고1

document.write('<script async 

src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" data-

language="ko" style="display:inline-block;width:336px;height:280px" data-ad-client="☆☆" data-ad-

slot="★★"></ins>');

(adsbygoogle = window.adsbygoogle || []).push({});

}

</script>

</div>

</center>

<!-- 상단 반응형 광고 끝 -->

준비물2.

애드센스 관리페이지로 접속하셔서 광고 단위>코드 가져오기를 하셔야 합니다. 

이렇게 보니 좀 애매 하네요. 광고코드 중에 data-ad-client 코드와 data-ad-slot 코드만 가져오시면 됩니다.

그리고 data-ad-client 코드는 위에서 받은 소스코드의 ☆☆ 부분에 붙여넣기 data-ad-slot 코드는 ★★ 부분에 붙여넣기 해주시면 됩니다.

여기까지 따라 하셨다면 80% 완료 하신겁니다. 여기서 잠깐 짚고 넘어가자면..

소스코드에서 

if(window.getWindowCleintWidth()>=768){ //데스크탑용 광고

이부분과

if(window.getWindowCleintWidth()<768){ //모바일용 광고

이부분을 눈여겨 보시면 어떤 방식으로 광고가 노출되는지 바로 아실수 있을겁니다. 해상도 768p 이상에서는 데스크탑용 광고를 768p 이하에서는 모바일용 광고를 노출하라는 조건문입니다.

제가 ☆과 ★로 표시한 부분만 본인의 애드센스 광고코드를 넣어주시고 티스토리 블로그 스킨편집에 들어가 HTML편집을 누르시고

애드센스를 통해 수익을 얻는 블로거 분들이 갈수록 많아지고 있는데요. 애드센스 고수익 어떻게 해야 될까요? 우선 오늘은 페이지크기 별 노출광고 최적화를 통해 내 티스토리 블로그에 애드센스 광고를 보다 깔끔하게 설치 하는방법에 대해 적어보려고 합니다.

우선 제 새컨 블로그를 보실까요?

제 새컨블로그 PC(데스크탑) 화면 입니다. 본문 상단에 광고가 한번에 3개가 들어가는 뻘짓을 하고 있는데요. (어디까지나 테스트를 위해서^^;;) 하지만 이 블로그를 모바일에서 보면 어떻게 될까요?

모바일에선 보시는 바와 같이 1개의 사각형 광고만 나옵니다. 모바일 해상도에 최적화 시켜 본문내용과 광고를 같은 페이지에 노출시키려는게 제 목적이거든요. 왜 그래야 하냐구요?

상대적으로 화면이 넓은 데스크탑에선 대부분 애드센스 광고를 티스토리 글 본문 상단에 2개를 배치 하시는 분들이 많은데.. 모바일에서 까지 본문 상단 광고가 2개가 노출되면 블로그를 찾는 방문객은 내용을 보기 위해 2개의 광고를 내용없이 봐야 해서 페이지 이탈율이 그만큼 올라가게 되죠. 즉.. 내 블로그를 찾는 방문객을 위한 최소한의 배려 입니다. 

'나같으면?'  으로 생각해보면 답이 바로 나오더라구요. 저도 스마트폰으로 검색을 많이 하는 편인데 .. 검색해서 들어갔는데 뜬금없이 내용은 없고 광고만 있으면 바로 뒤로가기 눌러버리는 급한성격인지라 ㅎㅎ

아무튼 각설하고 위처럼 광고를 데스크탑용 모바일용 으로 구현하려면 어떻게 해야 할까요? 생각보다 간단하답니다. 우선 본문상단에 광고를 2개 넣어보신 분이라면 금방 따라할 수 있을 난이도 이니 걱정말고 한번 해보시는게 어떨까요?

원리는 단순합니다. 현재 페이지의 해상도 값을 조건문으로 나눠서 일정 해상도 이하의 페이지에선 모바일용광고, 일정 해상도 이상에서는 PC용광고 를 노출 시키는 방법입니다. 

준비물 1.

우선 아래 소스파일을 받거나 아래 소스코드를 복사해서 붙여넣기 하셔도 됩니다.

상단반응형.txt

<!-- 상단 반응형 광고 -->

<center> //광고 위치 가운데

<div>

<script>

if(window.getWindowCleintWidth()>=768){ //데스크탑용 광고

//상단광고 1

document.write('<script async 

src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" data-

language="ko" style="display:inline-block;width:336px;height:280px" data-ad-client="☆☆" data-ad-

slot="★★"></ins>');

//상단광고 2

document.write('<script async 

src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" data-

language="ko" style="display:inline-block;width:336px;height:280px" data-ad-client="☆☆" data-ad-

slot="★★"></ins>');

(adsbygoogle = window.adsbygoogle || []).push({});

}

</script>

</div>

<div>

<!-- 모바일 상단 300 x 250 크기-->

<script>

if(window.getWindowCleintWidth()<768){ //모바일용 광고

//모바일 상단광고1

document.write('<script async 

src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" data-

language="ko" style="display:inline-block;width:336px;height:280px" data-ad-client="☆☆" data-ad-

slot="★★"></ins>');

(adsbygoogle = window.adsbygoogle || []).push({});

}

</script>

</div>

</center>

<!-- 상단 반응형 광고 끝 -->

준비물2.

애드센스 관리페이지로 접속하셔서 광고 단위>코드 가져오기를 하셔야 합니다. 

이렇게 보니 좀 애매 하네요. 광고코드 중에 data-ad-client 코드와 data-ad-slot 코드만 가져오시면 됩니다.

그리고 data-ad-client 코드는 위에서 받은 소스코드의 ☆☆ 부분에 붙여넣기 data-ad-slot 코드는 ★★ 부분에 붙여넣기 해주시면 됩니다.

여기까지 따라 하셨다면 80% 완료 하신겁니다. 여기서 잠깐 짚고 넘어가자면..

소스코드에서 

if(window.getWindowCleintWidth()>=768){ //데스크탑용 광고

이부분과

if(window.getWindowCleintWidth()<768){ //모바일용 광고

이부분을 눈여겨 보시면 어떤 방식으로 광고가 노출되는지 바로 아실수 있을겁니다. 해상도 768p 이상에서는 데스크탑용 광고를 768p 이하에서는 모바일용 광고를 노출하라는 조건문입니다.

제가 ☆과 ★로 표시한 부분만 본인의 애드센스 광고코드를 넣어주시고 티스토리 블로그 스킨편집에 들어가 HTML편집을 누르시고 위에 코드를 넣어주시면 끝입니다.

article_rep_desc 문맥을 검색후

저 위에 코드를 넣어주시면 끝납니다. (※작업전 스킨백업은 해놓고 하시는걸 권장합니다)

위 코드를 응용하면 보다 다양한 화면에서 내가 원하는 광고노출을 통해 애드센스 수익을 극대화 할 수 있습니다. 모바일 환경에선 불필요할수도 있는 광고를 제한함으로 가독성을 더 높일수 있고.. 넓은 PC 화면에선 광고배치를 보다 과감하게 할수도 있구요.

물론 애드센스 정책위반에 걸릴수도 있으니 광고배치전 꼭 애드센스에 문의를 해보고 배치하세요. 나중에 정책센터에서 연락받으면 골치아픕니다 ㅠㅠ (경험..)

위 광고코드로는 아직까지 구글 애드센스 정책센터에서 위반사항을 발견하지 못했다고 답변 받았으나.. 정책은 어느날 갑자기 바뀔수도 있는거라

지금까지 해상도를 이용한 PC & 모바일 광고 코드 구현 방법 이었습니다.

위에 코드를 넣어주시면 끝입니다.

article_rep_desc 문맥을 검색후

저 위에 코드를 넣어주시면 끝납니다. (※작업전 스킨백업은 해놓고 하시는걸 권장합니다)

위 코드를 응용하면 보다 다양한 화면에서 내가 원하는 광고노출을 통해 애드센스 수익을 극대화 할 수 있습니다. 모바일 환경에선 불필요할수도 있는 광고를 제한함으로 가독성을 더 높일수 있고.. 넓은 PC 화면에선 광고배치를 보다 과감하게 할수도 있구요.

물론 애드센스 정책위반에 걸릴수도 있으니 광고배치전 꼭 애드센스에 문의를 해보고 배치하세요. 나중에 정책센터에서 연락받으면 골치아픕니다 ㅠㅠ (경험..)

위 광고코드로는 아직까지 구글 애드센스 정책센터에서 위반사항을 발견하지 못했다고 답변 받았으나.. 정책은 어느날 갑자기 바뀔수도 있는거라

지금까지 해상도를 이용한 PC & 모바일 광고 코드 구현 방법 이었습니다.