본문 바로가기
도움되는이야기/티스토리 블로그

반응형스킨 반응형스킨으로 애드센스 효율적 배치하기

by XaXo 2016. 3. 10.
반응형

반응형 웹스킨으로 바꾸고 나서 제일 고민되었던 부분입니다.


반응형으로 바꾸면 구글 애드센스가 반응형 스킨에 맞춰 크기가 알맞게 변하게 되는데


애드센스 정책 관련 정보에 따르면


모바일상단에 300 x 250 광고가 나오면 정책 위반이기 때문에 


애드센스 배치에 고민을 하시는분들이 많을꺼라 생각됩니다.


이런 고민을 한번에 해결할 수 있는 애드센스 배치방법입니다.




반응형 스킨에 맞게 광고도 반응 광고로 효율적이게 배치하는 방법을 소개하려합니다.


다음과 같이 애드센스를 배치하시면 


▲ 데스크탑에서 보이는 336 x 280 상단 광고 2개



    

▲ 모바일에서 보이는 320 x 100 상단 배너 광고            ▲ 모바일에서 보이는 300 x 250 하단 배너 광고



그럼 반응형 애드센스를 배치해보겠습니다.



skin.html 파일 편집



<div class="article">

반응형

반응형 웹스킨으로 바꾸고 나서 제일 고민되었던 부분입니다.


반응형으로 바꾸면 구글 애드센스가 반응형 스킨에 맞춰 크기가 알맞게 변하게 되는데


애드센스 정책 관련 정보에 따르면


모바일상단에 300 x 250 광고가 나오면 정책 위반이기 때문에 


애드센스 배치에 고민을 하시는분들이 많을꺼라 생각됩니다.


이런 고민을 한번에 해결할 수 있는 애드센스 배치방법입니다.




반응형 스킨에 맞게 광고도 반응 광고로 효율적이게 배치하는 방법을 소개하려합니다.


다음과 같이 애드센스를 배치하시면 


▲ 데스크탑에서 보이는 336 x 280 상단 광고 2개



    

▲ 모바일에서 보이는 320 x 100 상단 배너 광고            ▲ 모바일에서 보이는 300 x 250 하단 배너 광고



그럼 반응형 애드센스를 배치해보겠습니다.



skin.html 파일 편집



<div class="article">

</div>




우선 본문 위치를 찾아줍니다.


이 소스를 기준으로 위쪽은 본문위에 애드센스가 아래쪽은 본문아래에 애드센스가 위치하게 됩니다.



<div id="adsense_wrap">

<div id="adsense_left">

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

<!-- adsense -->

<ins class="adsbygoogle adslot_1"

style="display:block"

data-ad-client=""

data-ad-slot=""></ins>

<script>

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

</script>

</div>

<div id="adsense_right">

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

<!-- adsense -->

<ins class="adsbygoogle adslot_2"

style="display:block"

data-ad-client=""

data-ad-slot=""></ins>

<script>

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

</script>

</div>

</div>

<div style="clear: both;"></div>




진하게 작성된 부분에 해당 반응형 구글 애드센스 코드를 넣습니다.


CLASS 부분에 adslot_1 과 adslot_2 를 추가합니다.




<div class="article">

</div>


아래쪽에 아래 소스를 한 줄 추가해줍니다.



<div id="adsense_moved"></div>



그리고 </body>를 검색하셔서 윗줄에


<script type="text/javascript">

//reponsive adsense moved

if ($('body').width() < "960") {

$("#adsense_right").appendTo('#adsense_moved');

$(".another_category").appendTo('#adsense_moved');

}

</script>


를 추가해줍니다.



skin.css 파일 편집


아래부분에 소스를 복사하여 붙혀넣어줍니다.


/*

* adsense

*/

#adsense_wrap {

width: 682px;

height: 280px;

margin: 20px auto 0;

}

#adsense_left {

float: left;

width: 336px;

height: 280px;

margin-right: 10px;

}

#adsense_right {

float: left;

width: 336px;

height: 280px;

}

#adsense_moved {

display: none;

}

#adsense_community {

width: 100%;

margin-top: 10px;

}

.adslot_1,

.adslot_2 {

width: 336px;

height: 280px;

}

@media all and (max-width: 959px) {

#adsense_wrap {

width: 100%;

height: auto;

max-height: 100px;

}

#adsense_left {

float: none;

width: 320px;

height: auto;

margin: 0 auto;

}

#adsense_right {

float: none;

width: 300px;

height: 250px;

margin: 0 auto 10px;

}

#adsense_moved {

display: block;

height: auto;

}

.adslot_1 {

width: 320px;

height: 100px;

}

.adslot_2 {

width: 300px;

height: 250px;

}

}





반응형

</div>




우선 본문 위치를 찾아줍니다.


이 소스를 기준으로 위쪽은 본문위에 애드센스가 아래쪽은 본문아래에 애드센스가 위치하게 됩니다.



<div id="adsense_wrap">

<div id="adsense_left">

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

<!-- adsense -->

<ins class="adsbygoogle adslot_1"

style="display:block"

data-ad-client=""

data-ad-slot=""></ins>

<script>

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

</script>

</div>

<div id="adsense_right">

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

<!-- adsense -->

<ins class="adsbygoogle adslot_2"

style="display:block"

data-ad-client=""

data-ad-slot=""></ins>

<script>

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

</script>

</div>

</div>

<div style="clear: both;"></div>




진하게 작성된 부분에 해당 반응형 구글 애드센스 코드를 넣습니다.


CLASS 부분에 adslot_1 과 adslot_2 를 추가합니다.




<div class="article">

반응형

반응형 웹스킨으로 바꾸고 나서 제일 고민되었던 부분입니다.


반응형으로 바꾸면 구글 애드센스가 반응형 스킨에 맞춰 크기가 알맞게 변하게 되는데


애드센스 정책 관련 정보에 따르면


모바일상단에 300 x 250 광고가 나오면 정책 위반이기 때문에 


애드센스 배치에 고민을 하시는분들이 많을꺼라 생각됩니다.


이런 고민을 한번에 해결할 수 있는 애드센스 배치방법입니다.




반응형 스킨에 맞게 광고도 반응 광고로 효율적이게 배치하는 방법을 소개하려합니다.


다음과 같이 애드센스를 배치하시면 


▲ 데스크탑에서 보이는 336 x 280 상단 광고 2개



    

▲ 모바일에서 보이는 320 x 100 상단 배너 광고            ▲ 모바일에서 보이는 300 x 250 하단 배너 광고



그럼 반응형 애드센스를 배치해보겠습니다.



skin.html 파일 편집



<div class="article">

</div>




우선 본문 위치를 찾아줍니다.


이 소스를 기준으로 위쪽은 본문위에 애드센스가 아래쪽은 본문아래에 애드센스가 위치하게 됩니다.



<div id="adsense_wrap">

<div id="adsense_left">

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

<!-- adsense -->

<ins class="adsbygoogle adslot_1"

style="display:block"

data-ad-client=""

data-ad-slot=""></ins>

<script>

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

</script>

</div>

<div id="adsense_right">

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

<!-- adsense -->

<ins class="adsbygoogle adslot_2"

style="display:block"

data-ad-client=""

data-ad-slot=""></ins>

<script>

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

</script>

</div>

</div>

<div style="clear: both;"></div>




진하게 작성된 부분에 해당 반응형 구글 애드센스 코드를 넣습니다.


CLASS 부분에 adslot_1 과 adslot_2 를 추가합니다.




<div class="article">

</div>


아래쪽에 아래 소스를 한 줄 추가해줍니다.



<div id="adsense_moved"></div>



그리고 </body>를 검색하셔서 윗줄에


<script type="text/javascript">

//reponsive adsense moved

if ($('body').width() < "960") {

$("#adsense_right").appendTo('#adsense_moved');

$(".another_category").appendTo('#adsense_moved');

}

</script>


를 추가해줍니다.



skin.css 파일 편집


아래부분에 소스를 복사하여 붙혀넣어줍니다.


/*

* adsense

*/

#adsense_wrap {

width: 682px;

height: 280px;

margin: 20px auto 0;

}

#adsense_left {

float: left;

width: 336px;

height: 280px;

margin-right: 10px;

}

#adsense_right {

float: left;

width: 336px;

height: 280px;

}

#adsense_moved {

display: none;

}

#adsense_community {

width: 100%;

margin-top: 10px;

}

.adslot_1,

.adslot_2 {

width: 336px;

height: 280px;

}

@media all and (max-width: 959px) {

#adsense_wrap {

width: 100%;

height: auto;

max-height: 100px;

}

#adsense_left {

float: none;

width: 320px;

height: auto;

margin: 0 auto;

}

#adsense_right {

float: none;

width: 300px;

height: 250px;

margin: 0 auto 10px;

}

#adsense_moved {

display: block;

height: auto;

}

.adslot_1 {

width: 320px;

height: 100px;

}

.adslot_2 {

width: 300px;

height: 250px;

}

}





반응형

</div>


아래쪽에 아래 소스를 한 줄 추가해줍니다.



<div id="adsense_moved"></div>



그리고 </body>를 검색하셔서 윗줄에


<script type="text/javascript">

//reponsive adsense moved

if ($('body').width() < "960") {

$("#adsense_right").appendTo('#adsense_moved');

$(".another_category").appendTo('#adsense_moved');

}

</script>


를 추가해줍니다.



skin.css 파일 편집


아래부분에 소스를 복사하여 붙혀넣어줍니다.


/*

* adsense

*/

#adsense_wrap {

width: 682px;

height: 280px;

margin: 20px auto 0;

}

#adsense_left {

float: left;

width: 336px;

height: 280px;

margin-right: 10px;

}

#adsense_right {

float: left;

width: 336px;

height: 280px;

}

#adsense_moved {

display: none;

}

#adsense_community {

width: 100%;

margin-top: 10px;

}

.adslot_1,

.adslot_2 {

width: 336px;

height: 280px;

}

@media all and (max-width: 959px) {

#adsense_wrap {

width: 100%;

height: auto;

max-height: 100px;

}

#adsense_left {

float: none;

width: 320px;

height: auto;

margin: 0 auto;

}

#adsense_right {

float: none;

width: 300px;

height: 250px;

margin: 0 auto 10px;

}

#adsense_moved {

display: block;

height: auto;

}

.adslot_1 {

width: 320px;

height: 100px;

}

.adslot_2 {

width: 300px;

height: 250px;

}

}





반응형
저작자표시 비영리 변경금지

관련글

티스토리툴바