구글 애드센스(google adsense) 반응형 광고 티스토리에 쉽게 적용하자

안녕하세요, 오늘은 에드센스 반응형 광고를 글에 쉽게 삽입할 수 있는 방법을 알아보려고 합니다.

매번, 글에 링크를 원하는 위치에 삽입하는 방법도 있지만, 이 방법은 하다 보면 혹은 광고링크가 바뀌거나 중단이 될 경우 글 하나하나를 수정해야 한다는 불편함이 있습니다.

그러면 어떻게 하면 글에 쉽게 광고를 삽입하고 쉽게 바꿀까요

제 글에서 보시면, 링크광고는 물론, 글 중간에 광고가 삽입되어 있다는 것을 볼 수 있으실 겁니다.

오늘은 쉽게 글에 광고를 삽입하고 수정하기도 쉬운 방법을 알려드리려고 합니다.

우선 반응형 광고를 생성하자

우선 에드센스( https://www.google.com/adsense/)에서 반응형 광고를 만들어 줍니다.

저는 상단과 하단에는 플러그인을 이용해서 삽입을 하였고, 중간광고와 링크광고는 HTML에서 설정을 하였습니다.

물론, 상단과 하단도 HTML에서 설정하는 방법도 있지만 저는 그러기엔 약간 불편하기도 하고 그래서 하지 않았습닌다.

상단과 하단 그리고 중간을 반응형 광고로 만들어 주세요.

중간배너 넣는법

에드센스 글중간 광고삽입 코드.txt

관리 -> 꾸미기 -> HTML/CSS편집 -> HTML 에서 맨 아래에 보시면 </body>태그가 있습니다. 이 위에 위의 링크를 삽입 해 주세요

<div id="adsense336x280middle" class="whadsense" style="display:none">

반응형 글 중간 링크를 복사해서 붙여넣습니다

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

<!-- 반응형 글중간 -->

<ins class="adsbygoogle"

     style="display:block"

     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxx"

     data-ad-slot="xxxxxxxxxxxxxxxx"

     data-ad-format="auto"></ins>

여기까지는 본인의 코드를 넣어주세요

<script>

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

</script>

위의 코드는 삭제를 해 줍니다.

</div>

<script type="text/javascript">

$(function(){

  if($("#adsensemiddle").length=="1"){

    $("#adsense336x280middle").css("display","inline-block")

    $("#adsensemiddle").append($("#adsense336x280middle"));

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

  }else{

    $("#adsense336x280middle").remove();

    $("#adsensemiddle").remove();

  }

});

</script>

 

</body>

 

</html>

에드센스 글중간 광고삽입 코드 2.txt

관리 -> 꾸미기 -> HTML/CSS편집 -> CSS 에서 맨 끝에 아래 소스를 넣으세요.

/* adsense */

#adsense336x280middle { float:right; margin:10px 0 10px 10px;}

.whadsense{width:346px; height:300px;}

.whadsensebottom{width:336px; height:280px;}

#adsense336x280bottom { margin:0 auto;}

@media (min-width: 320px) {

  .whadsensebottom{width:300px; height:250px;}

  .whadsense {width: 210px; height: 220px; }

}

@media (min-width: 470px) {

  .whadsensebottom{width:336px; height:280px;}

  .whadsense {width: 260px; height: 270px; }

}

@media (min-width: 850px) {

  .whadsensebottom{width:336px; height:280px;}

  .whadsense {width: 346px; height: 300px; }

}

이렇게 설정이 끝났으면, 남은 방법은 간단합니다.

<div id="adsensemiddle"></div> 

위의 코드를 글 중간 삽입하고 싶은 곳에 넣어주면 됩니다.

위의 코드들은 첨부파일에 넣어두었으니 참고하시면 됩니다.

저는 코드를 위의 위치에 삽입하였습니다. 그러면 아래에 미리보기화면에 보시면 광고가 글 옆에 삽입이 된 것을 볼 수 있습니다.

위의 방법으로 아주 손쉽게 광고를 삽입 할 수 있습니다.