화면 폭 사이즈에 따른 애드센스 광고 크기 조절 하기
2021. 2. 4. 04:53
구글 애드센스에서 설명을 하고 있는 방법으로 화면 폭 사이즈에 따라서 게재되는 애드센스 크기를 조절하는 방법입니다.
<style>
.example_responsive_2 { 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>
<!-- example_responsive_2 -->
<ins class="adsbygoogle example_responsive_2"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXXX"
data-ad-slot="XXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>위의 광고 코드는 화면 폭 사이즈를 3가지로 구분을 하고 있습니다.
- 500px 미만 (모바일)
- 500px ~ 799px (태블릿 또는 모바일 가로모드)
- 800px 이상 (PC)
위의 광고 코드 에서 화면 폭 사이즈는 수정을 할 수 있습니다만 광고 사이즈를 생각하면 무난한 사이즈 구분으로 보입니다.
위 코드 중에서 example_responsive_2는 임의로 설정을 해야 하는 명칭으로 볼 수 있습니다.
한 페이지나 포스팅이 위의 광고 코드를 여러번 삽입을 한다면 각각 명칭이 상이해야 합니다.
명칭은 '영문자', '숫자' 그리고 '_' 만 사용가능합니다.
위 광고 코드는 본문 중간에 삽입하기에 아주 좋습니다.
특히 모바일에 해당하는 500px 미만의 화면 폭에 자신이 원하는 광고 사이즈를 삽입할 수 있습니다.
위의 예제에는 320 x 100 사이즈가 적혀있습니다만 300 x 100 또는 300 x 50 도 괜챦은 것으로 보입니다.
320 x 50 사이즈도 가능하겠네요.
위 광고코드의 사이즈를 수정해서 삽입을 해본 이후 가장 적합해 보이는 사이즈를 정하면 되겠습니다.
참고로 광고는 반응형으로 생성을 하면되며 이렇게 생성된 ad-slot 넘버를 이용하면 됩니다.
티스토리 블로그라면 서식을 활용해서 삽입을 하면 좋을 듯 하며, 워드프레스 블로그라면 광고 플러그인을 활용해서 숏코드를 넣은 방식으로 삽입을 하면 될 듯 합니다.
