티스토리 애드센스 반응형 광고코드 픽셀에 따라 사이즈 변경되게 하는 방법

안녕하세요, 이번 글은 오랫만에 제가 블로그  애드센스 광고 배치를 손보면서 사용한 방법인데요. 쉽고 간단한 반응형 광고를 보여지는 해상도에 따라 사이즈를 달리하여 노출되게 게재하는 방법에 대해 알려 드릴까해요. 저도 예전에 몰랐을땐 그냥 반응형 광고 코드를 그대로 사용했지만 블로그의 보여지는 자리나 레이아웃 위치에따라 좀 더 광고 사이즈를 달리해서 보여지게 하고 싶을때가 있습니다. 

일반적으로 반응형 광고 코드 사용시 티스토리 블로그에서는 데스크탑에선 보통 728*90 사이즈 모바일은 기기에따라 300*250 이나 336*280 사이즈로 보여지게 됩니다. 하지만 전 오늘 블로그 하단에 위치하게될 반응형 광고코도를 데스크탑에선 970*250 사이즈로 보이게하고 모바일은 400픽셀 이상에서는 300*250으로 보여지게 만들어서 배치를 했어요. 이 방법은 얼마든지 다른 위치에도 사용이 가능합니다. 

◆ 티스토리 애드센스 반응형 광고코드 픽셀에 따라 사이즈 변경되게 하는 방법

▼ 우선 먼저 사이즈를 변경 할 반응형 광고 코드를 준비해야겠죠. 방법은 애드센스 사이트의 좌측 메뉴 중 "콘텐츠"에 "광고 단위"를 클릭하신 후 만들어 놓으신 반응형 광고코드를 확인하시고 "코드 가져오기"를 합니다. 

● 반응형 코드 관련 글

2017/05/31 - [이것저것/블로그활용법] - 티스토리 애드센스 반응형 광고 만드는 방법 플러그인 적용 방법

▼코드 가져오기를 하시면 아래와 같이 반응형 광고 코드가 보이게 되는데요. 마우스 우클릭이나 Ctrl+C 를 이용해 복사를 해서 메모장에 붙여넣기하여 코드를 준비해 둡니다.

▼ 그리고 아래의 사이트로 이동하시는데요. 코드를 알려드랴도 되나 아래의 사이트를 이용해 본인의 블로그 스킨과 레이아웃에 맞는 광고를 입맛대로 만드시는게 편하실꺼에요. 사이트 주소는 http://cfs.tistory.com/custom/blog/168/1686514/skin/images/ResponsiveAdsenseHelper.html 입니다. 어떤분이 편하게 만들어 놓았더군요. 

▼ 반응형 코드 수정 도우미로 이동 후 좀전에 복사해둔 반응형 광고 코드를 아래와 같이 붙여넣기 하시면 됩니다.  

▼ 변경할 반응형 광고 코드를 삽입 하셨다면 이제 반응형 광고 코드를 사이즈 변경을 설정을 할 차례입니다. 코드 삽입 아래에 보시면 "설정" 부분이 있는데요. 여기에 광고 이름을 입력합니다. 여러 개의 수정 코드를 만드시는 분들은 광고 이름을 모두 달리 하는게 좋습니다. 그리고 이름은 영문과 숫자로 이루어져야 한다고 합니다. 

★ 기본 크기는 기본이 되는 크기로 모바일에서 보여지는 광고 크기를 생각하시면 될거 같아요. (300*250, 336*280 을 많이 들 쓰시니 선택하시면 될거 같아요.)

★ 그리고 가로 픽셀 부분은 광고 크기 변화가 어느 정도 픽셀 이상 일 때 어떤 사이즈로 광고가 게재가 될 지를 정해준다고 생각하시면 되는데요. 굳이 광고 단위만 사용하는 거라면 반응형 코드 그대로 html 에 넣으셔도 됩니다. 

▼ 하지만 오늘 제가 한 것은 하나의 반응형 광고 코드로 해상도가 넓은 데스크탑 에서는 970*250 사이즈로 보여지게하고 픽셀이 낮은 모바일 기기에서는 300*250 으로 보여지게 하는 설정을 한것이라 아래의 "+" 버튼을 이용해 사이즈 변경 가로 픽셀 하나를 더 추가해 줍니다. 추가 한 후 가로 픽셀을 800픽셀로 변경하시고, 800픽셀 이상 일 때 보여지길 원하는 광고 사이즈인 970*250 가로와 세로 픽셀을 입력합니다.  모든 설정이 마쳐졌다면 "적용"을 누르시면 수정된 광고 코드가 나오게 됩니다.  

▼ 수정이 완료되면 아래와 같이 미리 보기 예시를 보여주는데요 PC에서 현재 창 가로 크기가 1900픽셀 정도라 970*250 으로 잘 나타나네요. 창 크기를 줄려 보시면 다음 이미지처럼 창 크기 460픽셀 일 때는 300*250 으로 정상적으로 작동 하는걸 확인 할 수 있습니다.

▼ 그리고 맨 아래 보게 되면 아래와 같이 "생성된 코드" 즉, 수정된 광고 코드가 나와있습니다. 이걸 복사하여 html 의 원하시는 부분에 넣어주게 되면 원하시는 결과물을 보실 수 있으실 거에요. 

▼ 그리고 아래의 이미지는 PC에서 해상도 변경으로 동작 확인을 한 것 이구요. 코드가 삽입된 블로그나 사이트에선 해상도 변경으로 실시간으로 사이즈 변경이 되진 않습니다. 해상도를 줄이신 후 새로 고침을 하셔야 사이즈 변경 되는걸 확인할 수 있습니다.  하지만 스마트폰에서는 정상적으로 직사각형 광고가 나오는 걸 확인 하였습니다.