본문 바로가기
정보/티스토리·애드센스

애드센스 반응형 광고 PC와 모바일 최적화 사이즈 만드는 방법.

by 앨리Son 2018. 1. 27.

 

저번 시간에는 티스토리 플러그인을 이용해서 반응형 광고를 상하단에 쉽게 게재하는 방법에 대해서 알아봤습니다. 오늘은 그 반응형 광고를 PC와 모바일 버전에서 각각 최적화된 사이즈로 게재할 수 있는 방법에 대해서 알아보겠습니다. 

 

저 같은 경우는 처음 광고 게재를 할 때, 플러그인을 이용해서 반응형 광고로 상하단에 넣은 후 PC, 모바일 버전도 추가해서 사용했습니다. PC 버전은 우측 상단에 336x280 사이즈를 넣기 위해서 사용했는데, 모바일 환경에서 확인 후 치명적인 문제가 발생하더군요. 

 

반응형 스킨을 사용하다 보니 티스토리 모바일웹 자동 연결은 사용하지 않고 있습니다. PC에서와 마찬가지로 모바일 환경에서도 적당한 사이즈로 보기 좋게 게재될 거라고 잘못 생각을 한 거죠. 모바일에서는 광고가 PC처럼 우측 정렬이 되기는 하지만, 글이 들어가는 부분과의 비율이 보기 좋게 저절로 맞춰지는 것은 아니었습니다. 

 

왼쪽에 글이 들어가는 부분은 고작 한두 줄 정도 공간이 비어서 그 좁은 공간에 글이 세로 정렬되어 있더라고요. 정말 난감했습니다. PC와 모바일 스킨을 따로 사용하면 문제가 없겠지만, 그렇게 되면 반응형 스킨을 사용하는 의미가 없어지니까요. 마땅한 해답을 찾지 못해서 처음에 시도했던 문제 해결은 첫 줄의 문장을 들여쓰기 하는 방법이었습니다. 

 

 

 

그렇게 하니까 광고는 상단에 보이고 글은 그 밑으로 보이더라고요. 하지만 그것 역시 미관상 아름답지는 않았습니다. 광고는 여전히 혼자 우측 정렬되어서 좌우 여백이 맞지 않아서 보기가 싫었습니다. 컴퓨터에서는 글과 함께 오른쪽에 삽입되고, 모바일에서는 깔끔하게 중앙 정렬되게 하고 싶었지만 코드 수정하는 방법을 알 수가 없었습니다. 

 

마땅한 방법을 찾지 못하다가 검색 중에 친절한효자손님 블로그에서 방법을 찾아서 그대로 적용을 해보니 문제가 해결되었습니다. 좋은 정보 정말 감사드립니다. HTML 편집을 하기 전에는 항상 기존의 스킨을 최종 저장을 하고 하시는 것이 좋습니다. 경우에 따라서 원하는 결과물이 나오지 않을 수도 있기 때문이죠. 

 

 

 

 

그럼 반응형 광고를 수정해 보도록 하겠습니다. 기존에 생성해놓은 반응형 광고의 코드 가져오기로 코드를 복사해서 메모장에 우선 붙여 넣습니다. client 뒷부분의 빨간색 박스 영역과 slot 뒷부분의 파란색 박스 영역만 복사해서 사용할 예정입니다. 

 

애드센스 pc우측상단 336x280 모바일 상단중앙 300x250.txt
다운로드

 

위 첨부파일을 다운로드해 열어보시면 코드 중에 ■■■ 표시 2군데, ★★★ 표시가 2군데 나옵니다. 차례대로 client 빨간색 값은 ■■■ 표시 2군데에 각각 붙여넣기, slot 파란색 값은 ★★★ 표시 2군데에 각각 붙여넣기 합니다. 그리고 전체 코드를 복사해서 이동하겠습니다. 

 

이 완성된 코드를 삽입하는 방법은 2가지가 있는데, 플러그인 구글 애드센스 반응형에서 상단 광고에 삽입하거나 HTML 편집에서 삽입하는 방법입니다. 

 

 

 

 

블로그 관리>꾸미기>HTML/CSS 편집에서 코드가 있는 바탕화면 아무 곳이나 클릭한 후 찾기(Ctrl+F)로 article_rep_desc 를 검색합니다. 검색된 바로 그 위쪽에 좀 전에 복사했던 전체 코드를 붙여넣기 하고 저장을 눌러줍니다. 화면에 보이는 아래쪽에 반응형 광고는 이전에 삽입된 다른 반응형 광고이니 신경 쓰지 않으셔도 됩니다.

 

 

저는 간단하게 플러그인을 통해서 삽입했는데요. 처음에는 기존에 만들어진 상하단 광고가 이미 있어서 HTML로 삽입했다가 모양이 다른 2개의 광고가 상단에 뜨는 것이 깔끔하지 않은 느낌도 들어서 기존의 반응형 광고는 삭제하고 우측 상단 광고만 남겨둔 상태입니다. 

 

이렇게 간단한 방법으로 PC와 모바일에서 원하는 위치에 광고가 잘 게재되는 것을 확인할 수 있습니다. 역시 HTML 을 능숙하게 다룰 수 있어야 블로그 운영이 좀 수월해질 것 같네요. 블로그를 하면서 배우는 게 정말 많습니다.

공유 버튼 이용 온라인 스크랩만 허용합니다.
무단 복사 도용 및 2차 변경을 금지합니다.

댓글