[티스토리] 구글 애드센스 반응형 디스플레이 광고 화면 폭에 따라 크기 다르게 지정하기 + 배너 광고 가운데 정렬하기

2021/01/04 - [블로그/티스토리] - [티스토리] 구글 애드센스(Google AdSense) 배너 광고 넣기

[티스토리] 구글 애드센스(Google AdSense) 배너 광고 넣기

---

구글 애드센스 반응형 디스플레이 광고를 원하는 위치에 넣어줄 경우 알아서 적합한 크기로 배너 광고를 띄워준다는 장점이 있지만, 대신 크기를 직접 조절할 수 없다는 단점이 있다. 특히 모바일 연동형 스킨을 사용하고 있을 경우 설치한 위치에 따라 PC와 모바일에서 보여지는 배너 크기가 너무 다른 경우가 발생할 수 있는데, 어느 정도 일관성을 부여하고 싶을 때에 유용한 코드다.

• 사이드바에 넣은 광고가 PC와 모바일에서 다 보일 수 있도록 하고 싶은 경우
  (티스토리 연동 애드센스의 경우 사이드바-모바일은 제공하지 않음. 사실 모바일은 큰 의미가 없긴 한데 그래도 넣고 싶은 경우가 있을 수 있으니까)
• 디스플레이 광고가 PC, 태블릿, 모바일에서 일정한 높이로 폭만 다르게 나오게 하고 싶은 경우
  (티스토리 연동 애드센스의 경우 특정 크기를 선택해야만 함)

위와 같은 경우를 예로 들 수 있다.

 

반응형 광고 코드 수정하기

반응형 광고 코드 수정 방법 - AdSense 고객센터

구글은 이런 고민을 하고 있는 유저들을 위해 친절하게 코드 수정 방법까지 알려주고 있다.

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .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"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

구글에서 예시로 보여주는 코드는 총 3가지의 경우를 구분하여 크기 값을 지정해주고 있다.

• 화면 폭 500픽셀 이하: 320x100 광고 단위 (모바일)
• 화면 폭 500~799픽셀: 468x60 광고 단위 (태블릿)
• 화면 폭 800픽셀 이상: 728x90 광고 단위 (PC)

넣고 싶은 위치에 따라 PC, 태블릿, 모바일을 모두 고려 후 사이즈를 입력해주면 된다. 각각 폭은 다르게 하되 높이만 같게 하고 싶다면 3개의 높이(height)를 모두 같게 해주고 폭만 다르게 설정해주면 된다. example_responsive_1은 전부 반응형 광고에 부여한 이름으로 바꿔서 기입해주는 것이 좋고 ad-client와 ad-slot은 본인 계정의 번호로 바꿔서 입력하면 된다.

이 기능은 링크 하단의 고급형 광고 코드 기능의 예> 확장 후 너비 및 고정 높이 지정을 통해서 보다 가변적으로도 설정 가능하다. 근데 나는 고정 높이 지정 코드로 하면 자꾸 오류 발생😫

 

만약 넣고 싶은 위치가 사이드 바일 경우 위의 예시에서 쓰여진 PC(728x90)는 사이드바를 초과할 수 있으므로 사이드바 최대 폭보다 너비를 작게 설정해준 뒤 태블릿, 모바일도 최대 폭을 넘지 않도록 조절해주면 된다.

화면 폭에 대한 선택지를 늘리고 싶다면 @media(min-width: ~px) 부분을 추가하여 적용하면 되고, 특정 폭에서는 광고가 노출되지 않도록 하고 싶다면 고급형 광고 코드 기능의 예> 광고 숨기기를 참고하면 된다.

참고로, 적용 후엔 브라우저 폭을 줄여가면서 바로 확인해 볼 수 있다.

PC화면에서 브라우저 폭을 줄여서 광고 확인하기 (새로고침)

 

반응형 디스플레이 광고 크기 참고

친절한(...) 구글은 광고 크기를 어떻게 설정하면 좋을지 고민될 때를 위해 가장 많이 이용되는 배너 크기에 대해서도 정리해놓았다.

반응형 디스플레이 광고에 가장 많이 이용되는 크기에 대한 정보 - Google Ads 고객센터

광고 크기 참고

 

 

 

배너 가운데 정렬하기

보통 style="display:inline-block;"으로 설정할 경우에는 알아서 가운데 정렬이 되어 나온다고 하는데, 이렇게 설정해도 안될 경우에는 <center> </center>코드로 감싸주면 해결이 된다. 내 경우에도 목록 하단에 넣은 광고가 왼쪽 정렬로 나와서 해당 코드로 감쌌더니 해결됐다. 아래는 참고한 블로그 링크. 애드센스 뿐만이 아니라 다른 광고 배너에 대한 예시도 있다.

블로그 배너, 위젯 사이드바 가운데 정렬하기

---