애드센스 반응형 광고를 직사각형, 수직형, 수평형으로 출력되게 변경하는 방법
친효스킨 최상단 및 최하단에는 반응형 구글 애드센스 코드를 삽입하여 광고를 게시할 수 있습니다. 원래는 세로로 긴 형태인 수평형 광고가 노출되었다가 최근에 엄청나게 큰 형태의 대형 광고로 바뀌면서 보기가 안 좋아졌습니다. 너무 지나치게 큰 광고는 오히려 독이죠. 인라인 방식으로 스타일을 수정해보고 CSS에서도 강제로 세로 사이즈를 조절해도 잘 되지 않았습니다. 그리고 마침내 오늘 구글 애드센스 도움말을 통해서 이 문제를 해결했습니다. 생각보다 너무 쉬웠습니다.
반응형 광고도 원하는 형태로 변경 가능
그렇습니다. 반응형 광고도 어쨌든 크게 세가지 형태에서 벗어나지 않습니다. 가장 흔한 직사각형 형태의 광고, 가로로 긴 수평형 광고, 세로로 긴 수직형 광고 이렇게 세 가지 입니다. 그럼 이 셋 중 원하는 형태를 선택하면 되는데 어떻게 변경할까요? 반응형 애드센스 코드의 기본 형태는 다음과 같습니다.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890"
data-ad-slot="12345678"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
여기에서 주황색으로 표시된 data-ad-format="auto" 부분을 수정해서 원하는 형태의 반응형 애드센스로 변경이 가능합니다. 아래의 4가지 요소 중 원하는 타입을 입력하여 수정하시면 됩니다.
auto : 기본 형태. 빈 공간을 계산하여 적당한 사이즈로 자동 조정됨.
rectangle : 직사각형 모양의 반응형 애드센스로 출력됨.
vertical : 수직형 모양의 반응형 애드센스로 출력됨.
horizontal : 수평형 모양의 반응형 애드센스로 출력됨.
따라서 친효스킨의 최상단 및 최하단 반응형 애드센스 코드에는 data-ad-format 값이 auto가 아닌, horizontal 로 변경되어 있습니다. 이렇게 하면 세로로 긴 형태의 애드센스 광고가 출력됩니다. 반응형 광고 코드 이므로 브라우저의 가로 해상도에 맞춰서 사이즈가 알맞게 변합니다. 이와 관련된 최상단 및 최하단 애드센스 코드 수정에 대한 글과 애드센스 고객센터의 관련 글을 아래에 올려두도록 하겠습니다. 시간 되신다면 한 번 읽어보시기 바랍니다.
이 방법을 몰랐던 저는 반응형이 아닌 그냥 일반 디스플레이 광고를 여러개 만들어서 해상도에 따라 출력되도록 미디어쿼리를 써서 적용시키려 했습니다. 물론 그렇게 해도 되긴 하겠지만 코드도 많아지고 시간도 오래 걸리는 단점이 존재합니다. 다행히도 구글 애드센스는 사용자가 원하는 광고 스타일을 쉽게 수정하도록 설계되어 있었습니다. 사용자 입장에서는 너무 편리합니다. 여러분들도 한번 원하는 형태의 반응형 애드센스를 만들어 사용해 보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
