티스토리 반응형 스킨에 애드센스 삽입하기

 예전에는 티스토리 반응형 스킨이 없었지만 다양한 모바일 기기가 발달하면서 반응형 스킨이 나오게 되었는데요.

 티스토리에서 모바일에 대한 제약을 풀면서 기기에 맞도록 사이즈가 자동으로 설정되는 반응형이 나오기 시작했습니다.

 구글 애드센스 역시 그런 대세에 발맞춰 사람들이 이용하는 기기에 따라서 다르게 출력되는 광고 사이즈를 만들었는데요.

 

 그래서 이번에는 그것을 적용하는 과정을 담은 글을 한번 작성을 해보려고 합니다.

 현재 설치해서 이용중이기 때문에 블로그 사이즈를 조정하다보시면 광고가 변하는 모습을 확인해보실 수 있습니다.

 기본적으로 티스토리 반응형 스킨을 사용하고 있어야지 반응형 애드센스를 적용하는데 적합하다고 판단됩니다.

 

 - 구글 애드센스에서 내 광고를 눌러 새 광고 단위 만들기

 가장 기본적으로 구글 애드센스는 모두 다 가입되어있다는 전제하도록 하겠습니다.

 설치형 블로그나 사이트를 운영하는 분들이라면 애드센스를 이용할 수 있지만 저는 티스토리 밖에 안써봤답니다.

 

 - 광고크기는 반응형을 선택해줍시다.

 사이즈는 광고를 어디에 게시할지에 따라서 현명한 선택을 하는게 중요하답니다.

 스킨과 어울리지 않는 광고는 글을 읽는사람이 판단하기에 거슬리게 느낄 수 있기 때문인데요.

 그런 광고는 클릭율도 떨어지는게 당연한 일입니다.

 개인적으로 본문에는 반응형을 사용하고 사이드바에는 큰 스카이스크래퍼를 사용하고 있습니다.

 

 반응형 광고크기가 가지고 있는 장점은 레이아웃에 따라서 사이즈가 조정된다는 점인데요.

 어떤 레이아웃 사이즈에 따라서 어떤 광고 사이즈로 변형할지도 선택하실 수 있습니다.

 블로그에는 한 화면에 총 3개의 광고를 넣을 수 있기 때문에 저는 본문에 2개 사이드바에 1개를 쓰고 있습니다.

 

 - 저장 및 코드를 누르고 모드에서 고급으로 설정을 변경해줍시다. 추가로 광고 코드는 미리 복사해주세요.

 모드를 고급으로 수정해주는 이유는 사이즈를 본인이 원하는 사이즈로 바꾸는 설정을 할 수 있기 때문인데요.

 사람들이 자주보는 사이즈에 맞게 수정할 수 있기 때문에 태블릿과 스마트폰을 구분해서 편집해볼 수 있습니다.

   

 - 티스토리 블로그 스킨에 복사한 광고 코드 삽입하기.

 Ctrl + F를 누르고 article_rep_desc를 검색해줍시다.

 본문을 뜻하는 코드로 그 위에 광고를 삽입하면 본문 상단에 나오고 밑은 하단에 광고가 나오게 된답니다.

 중간에 보이는 상자를 보면 사이즈가 다르게 표시되어 있는 모습을 확인할 수 있는데요.

 

 처음 반응형 애드센스를 사용하시는 분들이라면 위와 비슷하게 설정해주시면 된답니다.

 가장 첫번째가 기본 광고 사이즈인데요. 336x280으로 설정했습니다.

 그 밑에 있는 3가지 코드들은 사이즈에 따라서 어떻게 변형되는지를 설정해주는 코드인데요.

 총 3가지 경우에 따라서 사이즈가 변하도록 코드를 저장해보실 수 있습니다.

 

 * 도움이 되는 글 정리

 * Notice - 이태원 먹방투어 ver.1

 * Notice - 컴퓨터 필수 유틸리티 ver.1

 * Notice - 블로그팁 ver.1