티스토리 블로그에 애드센스 반응형 광고를 적용한 결과

티스토리에서 애드센스 반응형 광고를 넣었을때 줄어든 화면 크기에 맞추어 광고가 게재되고 화면이 커지면 애드센스 광고도 큰 광고 단위로 변경됩니다. 세로방향과 가로방향 화면 전환시 광고가 다시 로딩 됩니다.   이번에 개선된 것중 가장 마음에 드는군요

반응형 광고 단위도 코드 생성 후 직접 광고 크기를 수정할 수 있는 기존 방식과, 복사해서 붙여넣기만 하면 되는 화면 크기에 완전 자동화된 코드를 선택할수 있게 변경 되었습니다.

이번에 추가된 코드입니다.

광고단위를 새로 추가하거나 사용하던 반응형 광고의 코드 가져오기를 클릭하여 선택 적용할 수 있습니다.

 

      

[스마트 크기 조정]

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

<!-- TEST1 -->

<ins class="adsbygoogle"

     style="display:block"

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

     data-ad-slot=" "

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

<script>

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

</script>

 "auto" 외에 광고 게재 위치 크기에 따라 수정할 수 있습니다.

 data-ad-format="auto" : 아래 사진처럼 PC에서 가장 큰 사이즈는 955*90 입니다.

 data-ad-format="vertical"  흔히 사이드바에서 볼 수  있는 가장 큰 사이즈는 300*600 입니다.

 data-ad-format="rectangle"  pc에서 955*280 입니다. 광고 많아지면 완전 대형 광고가 되겠군요

                                      갤럭시S3 에서는 340*280 , 아이폰은 300*250,

                                       아이패드, 갤럭시탭 10.1은 730*280 입니다.

data-ad-format="horizontal" PC에서 955*90 ,아이패드, 갤럭시탭은730*90 ,아이폰은 300*60,

                                      갤럭시S3는 340*50 입니다.

계속해서 다양한 사이즈 테스트가 있을 것 같습니다.

[고급 수정 필요]

<style>

.test1 { width: 320px; height: 50px; }

@media(min-width: 500px) { .test1 { width: 468px; height: 60px; } }

@media(min-width: 800px) { .test1 { width: 728px; height: 90px; } }

</style>

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

<!-- TEST1 -->

<ins class="adsbygoogle test1"

     style="display:inline-block"

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

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

<script>

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

</script>

 반응형 페이지에 스마트 크기 조정을 적용해 보겠습니다.

사진을 클릭하면 크게 보입니다.

위사진은 PC 1920*1080 화면과 아이패드 테스트입니다.문제가 있군요 PC 모니터나 아이패드, 갤럭시탭에서 사각형 336*280 사이즈 광고를 게재해야 되는데 가로 사이즈 우선이군요. 화면 크기에 맞춰진 광고 크기가 다양하게 게재 되는 것을 보실 수 있어요.

위사진은 모바일의 갤럭시S3를 선택했을때 사진입니다. 모바일에서는 마음에 듭니다. 340*280 사이즈로 표시됩니다.

티스토리 블로그에서 반응형웹이나  반응형 광고가 관심 있으신 분들 참고하세요

이페이지는 [고급 수정 필요] 반응형 광고입니다. 화면 가로를 줄여보세요.