https://support.google.com/adsense/answer/6307124?hl=ko&ref_topic=1307438
이 예에서는 3가지 범위의 화면 폭(예: 모바일, 태블릿, 데스크톱)에 맞춰 개별적으로 광고 단위 크기를 설정하기 위해 반응형 코드를 수정하는 방법을 보여 줍니다. CSS 미디어 쿼리를 사용해 보지 않았거나 애드센스 광고 코드를 수정해 본 경험이 전혀 없어도 이 예에서 설명하는 내용을 끝까지 완료하는 데는 문제가 없습니다.
다음은 화면 폭당 정확한 광고 단위를 설정하는 수정된 반응형 광고 코드의 예입니다.
- 화면 폭 500픽셀 이하: 320x100 광고 단위
- 화면 폭 500~799픽셀: 468x60 광고 단위
- 화면 폭 800픽셀 이상: 728x90 광고 단위
<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="//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>
이 샘플 코드를 내 사이트에 맞춰 수정하는 방법은 다음과 같습니다.
- 애드센스 계정에서 반응형 광고 단위를 만들고 반응형 광고 코드에서 다음 정보를 메모해 둡니다.
- 광고 단위의 이름(예: 홈 페이지)
- 내 게시자 ID(예: ca-pub-1234567891234567)
- 내 광고 단위의 ID(
data-ad-slot
, 예: 1234567890)
- 샘플 코드에서 다음과 같이 수정합니다.
- 모든
example_responsive_1
을 내 광고 단위의 이름으로 바꿉니다. 광고 단위의 이름에 공백이 있는 경우 모두 밑줄('_')로 바꿉니다(예: 홈_페이지). - 모든
ca-pub-XXXXXXX11XXX9
를 내 게시자 ID로 바꿉니다. 8XXXXX1
을 내 광고 단위의 ID로 바꿉니다.
- 모든
- 화면 폭당 표시하고 싶은 광고 단위의 크기를 정합니다.
- 샘플 코드의 기존 광고 단위 크기가 마음에 든다면 추가로 변경해야 하는 사항은 없습니다.
- 화면 폭당 다른 광고 단위 크기를 설정하고 싶다면 샘플 코드에서 다음과 같이 수정합니다.
320px
및100px
를 500픽셀 이하의 화면 폭에 사용하고 싶은 광고 단위의 폭과 높이로 바꿉니다.468px
및60px
를 500~799픽셀의 화면 폭에 사용하고 싶은 광고 단위의 폭과 높이로 바꿉니다.728px
및90px
를 800픽셀 이상의 화면 폭에 사용하고 싶은 광고 단위의 폭과 높이로 바꿉니다.
- 수정된 광고 코드를 복사하여 광고를 게재할 페이지의 HTML 소스 코드에 붙여넣습니다. 광고 코드를 삽입하고 나면 다양한 기기와 화면에서 광고를 테스트하여 반응형 동작이 제대로 작동하는지 확인하시기 바랍니다.
ؼ غýϴ ^^ Դϴ