반응형 사이트에서 애드센스 설치하기 – 고급(코드수정필요) 사용


요즘 반응형 스킨이나 테마를 사용하는 블로그가 많아지면서, 애드센스 설정이 더 복잡해 졌습니다. 저도 마찬가지로 모바일 전용 테마로 반응형 테마를 따로 지정해서 사용하다 보니, 기존의 애드센스는 웹에서 해 놓은 설정이 모바일에서도 그대로 노출이 되더라구요.

뭐가 문제인고 하니, 애드센스에서는 광고가 화면 전체를 가리는 것을 허용하지 않습니다. 즉, 가로폭이 320인 아이폰을 생각해 보면 300*250 사이즈 이상의 광고는 모바일에 게재 될 때, 다른 컨텐츠 내용이 거의 안보이고 광고로 화면을 다 가려버리기 때문에 정책 위반에 걸려서 계정이 차단 될 수 있다는 것입니다.

하물며, 저처럼 336*280 사이즈를 컨텐츠 최상단에 걸어 놓는 경우는 광고 가로폭이 모바일 화면 가로폭 보다 길어지기 때문에 광고가 잘려보이는 현상도 발생합니다.

이런 상황을 막기 위해, 애드센스에서는 반응형 광고를 내 놓았습니다. 다만 이 반응형 광고라는 것이 기존 광고보다 손봐야 할 부분이 많아서 초보자나 익숙치 않은 사람은 다루기가 쉽지 않습니다.

오늘은 이 반응형 광고, 그 중에서도 고급(코드수정필요)를 사용해서 반응형 사이트에서 애드센스 설치하는 법을 말씀 드리고자 합니다.

http://pedrojeong.com/

제 블로그의 캡쳐 화면입니다.

보시다시피, 블로그 콘텐츠 우측 상단에 336*280 사이즈의 광고가 들어가 있습니다. 이 상태에서 바로 모바일 화면으로 전환된다면 제 모바일 화면은 광고가 차고 넘쳐서 잘리게 됩니다. 지금은 방문자 수가 별로 없어서 괜찮지만, 방문자 수가 많은 상태에서 그랬다간 계정 정지 먹기 딱 좋습니다.

그래서, 반응형 사이트에서도 적당히 콘텐츠가 노출 될 수 있도록 반응형 사이트에 맞는 반응형 광고를 넣어 보겠습니다.

기본적인 애드센스 설치는 할 줄 안다고 가정하고, 애드센스 광고 크기를 ‘반응형’으로 세팅하고 ‘저장 및 코드 생성’ 버튼을 누르면 아래와 같은 팝업이 뜹니다.



2014-07-29_033000

위 사진에서 노란색으로 표시한 부분을 클릭해서, “고급(코드수정필요)”를 클릭하면 위 사진과 같은 코드를 얻을 수 있습니다.

코드를 복사해서 광고를 넣고 싶은 곳에 붙여넣은 후에(광고 넣는 방법은 구글링으로 쉽게 찾을 수 있습니다.) 코드를 수정 해 주면 됩니다.

http://pedrojeong.com/

 

위 노란 색으로 표시된 부분 처럼 수정을 해 주시면 됩니다. 스타일 사이에는 원래 세 줄이 들어있습니다. 스타일 안에 들어간 코드가 뜻하는 것은 “내 광고는 기본적으로 200*200 사이즈를 노출시키지만, 가로 넓이가 500px 이상인 경우에는 336*280 사이즈의 광고를 노출시키겠다” 라는 뜻입니다.

가로 넓이와 광고 사이즈를 직접 알맞은 사이즈로 수정을 해서 쓰시면 됩니다. 대개는 아무리 넓은 스마트폰도 가로 사이즈가 500px 미만이기 때문에 500px 이상의 가로 사이즈를 가진 기기는 태블릿 아니면 노트북, 데스크탑 입니다. 스마트폰에서는 200*200 사이즈를 보여주고, 나머지 기기에서는 336*280 사이즈를 보여주는 것이니, 위 코드 그대로 사용하셔도 무방합니다.

원래는
@media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }
라는 코드가 한줄 더 있었습니다. 이 코드의 뜻은 이젠 아시겠지만, “가로 800px 이상인 경우에는 728*90 사이즈의 광고를 내보내라” 라는 뜻입니다. 반응형 사이트를 사용하시는 경우라면 굳이 태블릿과 노트북, 데스크탑을 구분할 필요가 없기 때문에 이 줄은 빼 버려도 무방합니다.

위와 같이 코드를 수정하여 애드센스를 적용하면, 웹상에서는 그대로 336*280 사이즈의 광고를 보여주지만, 모바일에서는…

사진이렇게 200*200 사이즈의 광고를 원래 위치에 띄워 줍니다. 이렇게 되면, 애드센스 규정에 어긋나지 않게 반응형으로 광고를 띄울 수 있습니다.

이 것을 응용하면 다른 광고 설정도 가능하겠죠. 웹에서는 가로로 넓고 긴 배너를 사용하다가, 모바일에서만 직사각형의 광고를 사용한다던지, 다양한 응용이 가능합니다.

[ 네이버 블로그를 하시는 분들은 네이버 블로그 이웃 추가하기를 클릭해서
제 블로그를 네이버 이웃으로 추가하실 수 있습니다. ]


Be the first to comment

댓글 남기기

This site uses Akismet to reduce spam. Learn how your comment data is processed.