반응형 애드센스 코드의 수정과 배치

예전에 애드센스를 승인받은 사람들은 '애드센스를 어느 위치에 어떤 크기로 배치할 것인가?'에 대한 고민을 많이 했었을 것이다. 하지만 반응형 스킨이 많이 배포되어 있는 요즘은 그런것들을 고민할 필요가 별로 없다. 특히, 자동광고 시스템은 포스팅을 하면 애드센스에서 알아서 광고를 달아주기 때문에 더욱 신경쓸 일이 없게된다.

그럼에도 불구하고 반응형 애드센스를 수정하고 싶은 사람들이 있을것이다. 그래서 준비했다.

 

 

---

반응형 스킨에는 반응형 애드센스

---

반응형 스킨이란 블로그에 접속할 때, PC·태블릿·스마트폰 등 각자의 환경에 최적화된 구조와 이미지를 보여주는 스킨이다. 반응형 스킨을 사용하게되면 접속한 기기의 해상도에 맞추어 글자크기와 이미지가 자동으로 변경이 된다. 어느 기기로 접속하든지 같은 구조의 화면을 볼 수 있게 되는 것이다.

 

만일 당신이 반응형 스킨에 광고 크기가 고정되어 있는 일반단위의 애드센스 코드를 삽입하였다고 생각해 보자. 기기의 해상도가 줄어들어 화면의 폭이 줄어들어도 광고의 크기는 고정되어 있을 것이다. 광고가 잘려서 제대로 보이지 않는다는 것이다. 그렇기 때문에 반응형 스킨에는 반응형 애드센스를 삽입해야만 한다.

본문 폭에 맞추어 광고 크기가 자동으로 변하는 반응형 애드센스는 광고가 화면에서 잘리는 현상을 방지할 수 있다.

 

반응형 애드센스를 삽입하면 애드센스의 크기가 화면 폭에 맞춰서 자동으로 설정되므로, 코드 수정을 별도로 하지 않으면 긴 직사각형 모양의 배너광고가 나오게 된다.

긴 직사각형 모양의 배너광고는 가로폭이 728px이다. 하지만 이 수치는 내가 운영하는 블로그의 가로폭과 맞지 않으므로 아름답지 않다. 그래서 나는 반응형 애드센스의 코드를 수정할 예정이다.

 

 

 

 

---

반응형 애드센스 코드를 수정하는 방법

---

애드센스의 코드는 함부로 수정할 수 없다. 잘못 수정할 경우 정책위반이 되어 계정이 정지될 수 있기 대문이다. 하지만 지금 수정하는 방법은 애드센스에서 반응형 광고를 최적화시킬 수 있도록 허용한 방식이므로 안심할 수 있는 방법이다.

 

*코드 수정은 스타일 태그를 이용하며, 애드센스 코드 위에 사용하거나 css 파일에 별도로 작성한다.

 

<style>

.이름 {width: 가로1px; height: 세로1px;} …①

@media(min-width: 화면폭1px) { .이름 {width: 가로2px; height: 세로2px;} } …②

@media(max-width: 화면폭2px) { .이름 {width: 가로3px; height: 세로3px;} } …③

</style>

① '이름'이라는 것의 크기를 '가로(width)는 가로1px, 세로(height)는 세로1px'로 지정한다.

② 화면폭이 '화면폭1' 이상이면 '이름'의 크기를 '가로는 가로2px, 세로는 세로2px'로 변경한다.

③ 화면폭이 '화면폭2' 이하면 '이름'의 크기를 '가로는 가로3px, 세로는 세로3px'로 변경한다.

*'이름'은 영문자, 숫자, 언더바로 중복되지 않게 만들어야하며, 영문자로 시작해야만 한다.

 

 

 

 

---

반응형 애드센스 코드 수정 예시

---

다음 코드는 이 블로그에 적용한 코드이다.

 

<style>
.ad_down { width: 300px; height: 250px; } …①
@media(min-width: 360px) { .ad_down { width: 336px; height: 280px; } } …②

</style>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 금세하단광고 -->
<ins class="adsbygoogle ad_down" …③
     style= "display:inline-block" …④
     data-ad-client="자신의 ID"
     data-ad-slot="자신의 광고단위의 ID"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

① 애드센스의 기본 크기를 300*250으로 지정한다.

② 화면폭이 360px 이상일경우 애드센스의 크기를 336*280로 변경한다.

③ 지정한 이름 ad_down을 adsbygoogle 글자 옆에 한칸 띄고 삽입해준다.

④ 애드센스 코드의 display:block를 inline-block으로 변경한다.

 

 

 

 

---

수정된 애드센스 코드 삽입시 화면 변화

---

수정한 애드센스 코드는 [티스토리 관리메뉴 → 플러그인 → 구글애드센스(반응형) 플러그인을 선택]한 뒤 입력하면 된다. 본문 하단을 선택하여 위치를 입력해보았다.

< 티스토리 애드센스 플러그인에 광고코드 삽입하기 >

* 빨간 박스에 반응형 애드센스 코드를 입력한다.

 

 

 

< 반응형 애드센스 광고코드 수정으로 크기를 줄인 모습 - center 태그 미사용 >

 

크기를 수정하게 되면, 애드센스가 왼쪽에 치우치게 된다. float 태그로 오른쪽 정렬을 시키거나, center 태그를 이용하여 가운데 정렬을 시킬 수 있다.

<center>

애드센스코드

</center>

 

 

 

< 반응형 애드센스 광고코드 수정으로 크기를 줄인 모습 - center 태그 사용 >

 

 

본 블로그는 CCL을 사용하지 않습니다. 게시된 글과 이미지는 저와 협의하신 경우에만 이용하실 수 있습니다.

캡쳐를 이용한 무단전재, 재배포, 상업적 이용, 이미지의 2차 창작 및 워터마크 제거 등을 불허합니다.