개발

구글 애드센스 모바일 반응형 광고 높이 조정하기

January 2, 2025

모바일 반응형 광고
실제 적용과 문제점
해결방법

본 글은 구글 애드센스의 반응형 광고를 달때 로딩되는 광고가 원하는 크기보다 너무 큰 광고가 로딩될때 이를 해결하기위한 내용입니다.

모바일 반응형 광고

우리가 구글 애드센스에서 광고 단위 기준으로 디스플레이 광고를 만들때 사이즈를 직접 선택하거나 반응형 광고로 제작할 수 있다.

이때 반응형으로하면 현재 웹페이지가 랜더링될때 레이아웃 사이즈에 맞는 광고를 애드센스가 알아서 로딩해주는 방식이다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000"
     crossorigin="anonymous"></script>
<!-- ad_mobile_top_responsive -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-00000000000"
     data-ad-slot="000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>Copy

이런 방식의 코드로 반응형 광고 코드를 가져올 수 있다.

우리가 원하는 반응형 광고

그러면 위의 화면처럼 광고가 컨텐츠 가로사이즈에 맞게 보여질것이라고 우린 기대할것이다.

실제 적용과 문제점

근데 아마 저 코드를 적용해본 분들이라면 실제로 아래와 같이 화면사이즈에 비해 너무 큰 광고가 로딩되는 경험을 할 것이다.

디바이스 화면을 꽉채울정도로 부담스러운 광고

이에 따라서 우리가 원하는건 아래와 같을 것이다.

"반응형 광고를 로드하되 높이 제한이 있으면 좋을거 같다."

그래서 애드센스 매뉴얼을 찾아보면 아래와 같은 내용을 찾을 수 있다.

반응형 광고 코드 수정 방법 - Google 애드센스 고객센터

Google의 반응형 광고 코드로 필요한 기능을 모두 구현할 수 없는 경우 반응형 사이트의 요건에 맞게 광고 코드를 수정할 수 있습니다. 광고 코드를 올바르게 수정하는 방법은 이 도움말의 예를 참고하세요. 시작하기 전에 CSS 미디어 쿼리를 사용해 본 적이 없고 광고 코드 수정이 처음이라면 먼저

https://support.google.com/adsense/answer/9183363?hl=ko

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 600px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Copy

위 수정방법에서 말하고 싶은거는 미디워 쿼리를 이용해 디바이스 사이즈별로 필요한 광고 크기를 선언해서 쓰라는 것이다.

근데 실제로 해보면 원하는 대로 안된다.

일단 위 코드로 지정을해버리면 화면의 가로가 꽉차는 광고를 로딩할 수 없을뿐더러 기존 반응형 코드에 위 미디어쿼리를 부분적으로 적용한다한들 이게 먹히지 않는 일이 일어난다.

관련 내용은 아래 해외 포럼에서의 질문글도 올라올정도로 언급되는 주제이다.

How to limit the height size of responsive ads? - Google AdSense Community

https://support.google.com/adsense/thread/44305758/how-to-limit-the-height-size-of-responsive-ads?hl=en

글 내용에서도 질문자는 가로가 차는 광고를 쓰고싶어서 광고를 반응형으로 구성하고 적용했는데, 높이가 생각보다 너무 큰 광고가 로딩이되어 레이아웃이 망가진다는 이야기이다.

그리고 해당글의 답변에 정답이 있었다.

해결방법

해결방법은 실로 간단하다.

최초에 반응형 코드에서 data-full-width-responsive="true" 를 제거하면된다.

해당 코드를 제거하면 우리가 원하는대로 모바일 화면에서 컨텐츠 가로사이즈가 꽉차면서 그렇게까지 화면을 꽉채우는 광고가 로딩이 되지 않는다.

아래는 내가 실제로 모바일환경에서 사용중인 반응형 광고 코드의 ins 태그 속성이다.

<ins class="adsbygoogle"
    style="display:block;width:100%"
    data-ad-client="ca-pub-0000000000000000"
    data-ad-slot="00000000"
    data-ad-format="auto">
</ins>Copy