애드센스 광고는 보통은 반응형을 쓰기 때문에 알아서 크기와 모양이 변경된다. 그러나 특별히 원하는 크기나 모양을 설정해야 할 경우도 있다. 최근에 알게 된 모양 지정 방법이다. 이게 얼마 전에 추가된 data-full-width-responsive="true"후에 생긴 건지 원래 있었던 건지는 모르겠다. 여튼 쓸만할 듯?
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 최상단 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
원래 기본 광고 코드는 이러한데 여기서 data-ad-format="auto" 이 부분을 수정해야 한다.
auto : 기본. 공간을 자동으로 계산해 광고 크기를 보여준다.
rectangle : 반응형 직사각형.
horizontal : 반응형 수평형.
vertical : 반응형 수직형.
이런 모양을 기본으로 공간에 맞게 반응형으로 노출이 된다.
조금 더 디테일하게 설정을 하려면
style="display:block" 태그에 크기를 지정하자.
예를 들어 horizontal을 사용한다면
style="display:block; height: 90px;"
이렇게 높이를 지정해주자. 높이 지정이 없으면 최대 높이의 수평형 광고가 노출된다. 기존의 광고 크기 지정은 px과 media를 이용해 디테일하게 만들었는데 이제 data-full-width-responsive="true"와 모양 지정, 스타일에서 height, width 값으로 쉽게 수정할 수 있다. 매일매일 발전하는 애드센스 적응하기 힘드네...
[추가 글]
제 블로그 상단 두개의 직사각형 광고는 브라우저의 사이즈에 따라 크기가 변하고 특정 브라우저 사이즈에서는 오른쪽 광고가 없어집니다. 이는 @media라는 태그를 이용해 아주 디테일하게 만들었는데 이제는 그럴 필요가 없어졌습니다. 정말 편해졌네요. 이틀전에 기존의 방식을 모두 삭제하고 위 방법으로 변경했습니다. 태그가 엄청나게 줄어드니 관리하기도 좋습니다.^^ 상단에 1개 넣으시는 분들은 필요 없지만 두개 넣으시는 분들에게는 좋은 기능이네요.