애드센스 인피드 광고 카테고리(목록화면)에 적용하기

애드센스 인피드 광고 활용방법

 

애드센스 승인을 받으지 이제 일주일이 지났습니다.
그동안 애드센스 승인 받기위해 많은 노력을 하였다면 이제 어떻게 하면 광고수익을 건전하고, 올바르게 올릴 수 있을까에 대하여 고민 중입니다.

첫번째는 양질의 글을 많이 올려 많은 사람들이 방문하게 하는 것일 것입니다.

그리고 두번째로는 광고를 더 효율적으로 배치하고 적용하는 부분일 것입니다.

 

이번 포스팅에서는 애드센스 인피드 광고를 활용하여 카테고리 즉, 목록화면에 적용하는 방법에 대하여 공유해 드리고자 합니다.

 

반응형 스킨을 사용하고 있어 자연스럽게 적용하는 부분에 있어, 문제점들이 더 많았습니다. 아직 완전하지는 않지만 나름대로 터득한 부분들을 공유 해 보고자 합니다.

 

먼저 PC환경에서 적용 된 모습입니다.

브라우저의 가로 넓이를 조정하면 광고부분은 방응형으로 반응을 하지 않는다는 점은 아직 해결하지 못했지만 크게 이상하거나 문제되지 않을 것 같습니다. 물론 그렇지 않게 생각하시는 분도 있겠지만요.

애드센스에서 인피드 광고도 텍스트 및 디스플레이 광고처럼 반응형 기능을 갖춘 부분이 나왔으면 하는 바램입니다. 있는데 혹 제가 아직 몰라서 그럴수도 있으니 혹시 아시는 분은 댓글 부탁 드립니다.

 

 

 

 

애드센스에서 인피드광고를 선택하고 설정부분에서 변경한 내용은 이미지 위치 및 비율을 1:1로 변경한 부분과 폰트 사이즈 등 입니다.

티스토리에 적용 하는 내용은 다음과 같습니다.

그 전에 먼저 알려 드릴 부분은 광고를 카테고리 2번째 5번째 순서에 나타나도록 설정 하였습니다. 3번정도는 보여주어도 괜찮을 것 같은데 일단 저는 2번만 보여주도록 하였습니다.

 

또한 저의 경우 PC에서와 모바일(브라우저 크기에 따라)에서 표시되는 폰트 크기가 다르기에 보기 싫은 부분들이 있었습니다. 그래서 PC와 모바일에서 서로 다른 인피드광고를 적용해 보았습니다.

인피드광고를 하나 더 생성하여 이미지크기 및 폰트를 다르게 설정 한 것입니다.

 

다음은 적용 소스 부분입니다. 조금 전 작업 해 본 내용이라 혹, 환경에 따라 이상한 부분이 발견되면 댓글 남겨 주시면 감사하겠습니다. 

 

 <!-- 구글 네이티브 인피드 광고를 위한 부분 -->
 <script>
  var loopCnt = 0;  
  var agent = "PC";
  var userAgent = navigator.userAgent;
  if(userAgent.indexOf("iPhone") > 0 || userAgent.indexOf("iPod") > 0 || userAgent.indexOf("Android") > 0)
  {
    agent = "MOb";
  }
  //alert( window.outerWidth );
 </script>
 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 <!--/ 구글 네이티브 인피드 광고를 위한 부분 -->

 

 

<!-- 구글 네이티브 인피드 광고 -->
<script> 
       loopCnt++;
       if(agent == "PC"){
        if(loopCnt==1 || loopCnt==4) //일대일
        {
         document.write('<ins class="adsbygoogle" style="display:block;padding-top:15px;padding-bottom:15px; border-bottom:1px solid #efefef;" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="" data-ad-client="" data-ad-slot=""></ins>');
         (adsbygoogle = window.adsbygoogle || []).push({});
        }
       }else{
         if(loopCnt==1 || loopCnt==4) //
         {
          document.write('<ins class="adsbygoogle" style="display:block; border-bottom:1px solid #efefef;" data-ad-format="fluid" data-ad-layout-key="" data-ad-client="" data-ad-slot=""></ins>');
          (adsbygoogle = window.adsbygoogle || []).push({});
         }
       }
</script>
<!--/ 구글 네이티브 인피드 광고-->
</s_index_article_rep>

 

접속자 접속환경(PC/모바일)을 확인하여, 환경에 따른 인피드 광고가 실행되도록 하였습니다.

그리고 loopCnt 변수를 사용하여 목록 몇번째 보여 줄 것인지를 설정해 보았습니다. 또 수정된 부분이 있다면 ins 안 style 내용을 조금 추가 한 것입니다.

PC에서는 정상 적용되나, 모바일에서는 정확하게 적용되지 않는 것 같습니다(위/아래 공백 부분)

처음에는 나머지(%)를 활용하여 3번째 자리마다 보여주도록 하였는데 두번만 원하는 순서에 광고를 보여주기 위와 같이 코딩을 하였습니다.

 

처음에는 navigator.userAgent 를 활용하지 않고 CSS를 활용하여 브라우저 사이즈에 따라 display되도록 하였다가 수정하였습니다. 몇몇가지 방법들이 있겠지만 일단 저는 userAgent 기능을 활용하여 코딩해 보았습니다.

자바스크립트로 브라우저 사이즈를 읽어 제어 하는 방법도 있겠습니다.

 

다음 켭쳐 이미지는 모바일 환경입니다.

 

 

 

생각보다 시간이 많이 걸려 포스팅 글 화면 하단에 적용하는 부분은 하지 못했습니다.

어떤 블로그에는 하단에 Powered by Google 라고 하여 적용한 분들도 있던데 어떻게 하는지 알아보아야 겠습니다. 혹, 아시는 분들은 알려 주세요~^^

저는 몰라서 그 부분도 인피드 광고로 만들어 볼려고 하는데 시간 낭비일지 모르겠습니다.

 

어쨌든 '여러분의 열정을 수익으로 돌려 드립니다' 라는 글귀가 떠오릅니다.

열정의 본질은 끈기와 행동이 아닐까 생각해봅니다. 저 처럼 애드센스 광고 수익에 도전하고 계신분들 모두 함께 열정을 가지고 화이팅 해 봅니다.

 

이 글이 조금이라도 도움이 되셨다면 하트 한번 꾹! 부탁 드립니다.

1일 1000명 방문자인 1차 목표에 한걸은 다가가는데 도움이 될 것 같습니다. 지금은 방문자 100명인 초보 블로그이지만 1차 목표 언젠가 도달하게 되겠죠. 화이팅입니다.