반응형 애드센스 적용과 고려해 봐야 할 점

티스토리 스킨을 반응형으로 변경을 하고 나서 다음으로 해 줘야 할 일은 애드센스 광고를 좀 손을 봐주셔야 하는데요.

기존 사용하던 것은 사이즈가 고정이 되어 있어서 상단에 그대로 적용을 하게 되면 정책위반에 해당이 되기 때문에 변경을 해 주셔야 합니다.

여러분들의 애드센스계정으로 접속을 하셔서 아래와 같이 반응형 광고 단위를 하나 새로 만들어 놓으셔야 합니다.

코드 적용은 스마트형으로 자동으로 화면 크기에 따라 사이즈를 변경을 해 주는 방식과 고급형인 코드 수정을 하여서 적용을 하는 방식이 있는데요.

블로그 스킨에 따라서 원하는 방식을 적용하시면 되는데 대체로 직접 코드를 수정을 하셔서 대부분 사용을 하고 계시더군요.

저 역시도 아래와 같이 직접 코드를 좀 손을 봐서 적용을 했습니다.

기본 값을 320에 100 사이즈로 두고 나머지는 아래와 같이 화면 크기에 맞춰서 광고가 노출이 되도록 조정을 해 봤습니다.

<style> .appida { width: 320px; height: 100px; } @media(min-width: 468px) { .appida { width: 200px; height: 200px; } } @media(min-width: 768px) { .appida { width: 250px; height: 250px; } } @media(min-width: 1200px) { .appida { width: 320px; height: 250px; } } </style>

■ 스마트폰에서의 적용화면(갤럭시S3로 확인)

1. 세로화면 상태로 로딩시

세로에서는 상단에 블로그 네임과 제목만을 간단하게 보여주고 다음으로 광고가 본문을 너무 가리지 않는 320X100사이즈의 애드센스가 노출이 되도록 하였습니다.

320X50사이즈를 기존에 노출을 하도록 하였는데 광고가 콘텐츠를 가리지 않도록 상단을 최대한 줄였기에 이 부분이 정책위반이 될지 안될지는 좀 지켜 봐야 할 것 같습니다.

세로 상태에서 바로 가로로 변경을 하면 광고가 우측으로 가서 정렬이 됩니다.

저때는 광고 사이즈가 변경이 되지는 않구요.

2. 가로화면 상태로 로딩시

가로상태로 페이지를 불러 왔을 경우에는 아래와 같이 200X200사이즈의 애드센스가 노출이 되는 것을 볼 수가 있었습니다.

역시 콘텐츠를 가리지 않는 범위 내에서 자연스럽게 보이는 것을 확인 할 수가 있었습니다.

위와 같이 확인해 본 결과 일단 스마트폰 상에서는 그럭저럭 괜찮다는 생각이 들었습니다.

■ 웹브라우저 적용화면

1. 크롬

크롭에서는 지정한 대로 아래와 같이 우측 정렬이 된 상태로 정상적으로 잘 보였습니다.

2. 익스플로어8 이하

반응형 스킨과 애드센스는 익스플로어 8 이하 부터는 잘 적용이 되지 않는 문제점들을 좀 가지고 있는 것을 저 역시도 확인을 해 볼 수가 있었습니다.

처음 적용시 크롬과 익스플로10에서 테스트를 했을 때에는 아무 문제가 없었던 화면이 익스플로8 버전에서는 깨지기도 하고 아래와 같이 지정한 320X250 사이즈의 애드센스가 노출이 되는 것이 아니라 기본으로 지정이 된 320X100이 노출이 되는 것을 볼 수가 있었습니다.

물론 이 방법을 해결하기 위해서 반응형애드센스를 사용안하시고 다른 방법을 이용하시는 분들도 더러 계시더군요.

저는 일단 익스플로8 이하에서 부분은 저정도 보이는 것으로 만족을 하고 상황추이를 1주일 정도는 지켜 봐야 할 것 같습니다.

익스플로 사용자가 워낙에 많다 보니 상단 광고가 작아짐으로 인해서 현재 CTR이 좀 떨어지고 있는 것을 확인을 할 수가 있었습니다.

티스토리 블로그 스킨에 반응형웹을 적용한 것이 아직은 시기 상조인지 아니면 적합했는지는 적어도 1주일 정도는 더 지켜 본 후에 지속을 할지 아니면 과거 스킨으로 회귀를 할지를 판단해 봐야 할 것 같습니다.