티스토리에 애드센스 반응형 광고 넣기

티스토리에 반응형 스킨을 적용하고 구글 애드센스를 본문 상단에 넣을 경우 모바일 페이지에도 같은 크기의 광고가 보이는데 애드센스 정책상 모바일에서는 320 x 50 픽셀 또는 320 x 100 픽셀 사이즈의 광고만 넣을 수 있습니다.

그래서 반응형 스킨을 사용할 때 애드센스의 반응형 광고를 사용할 수 있는데 생성되는 광고 코드를 수정해서 사용해야 되므로 포스트 내용을 잘 참고하기 바랍니다.

 

| 광고 단위 생성

▲ 구글 애드센스의 [내 광고] 메뉴에서 반응형을 선택하고 옵션을 지정한 뒤 [저장 및 코드 생성]를 클릭합니다.

 

▲ 여기서 생성되는 코드 중 data-ad-client와 data-ad-slot의 값을 저장해둡니다.

 

 

| 티스토리 HTML 코드 편집

▲ 티스토리 관리페이지에서 [HTML/CSS 편집] 메뉴를 클릭합니다.

 

▲ [Ctrl + F] 단축키를 누른 뒤 'article_rep_desc'를 검색해줍니다.

 

source.txt

▲ 첨부된 텍스트 파일의 코드를 검색된 윗줄에 붙여 넣습니다.

<sytle> 태그에서 적용되는 기기에 따라 광고 단위를 설정해줄 수 있는데요.

.my_adslot 에서 스마트폰에서 보일 크기인 320 x 100 픽셀로 설정했습니다.

@media에서 PC에서 보이는 크기를 각각 336 x 280픽셀로 지정했습니다.

그리고 애드센스에서 생성된 코드에서 data-ad-client와 data-ad-slot 값을 넣어주고 저장해줍니다.

 

▲ 현재 사용한 티스토리 스킨은 최근 공개한 위의 반응형 스킨을 적용했으니 참고하기 바랍니다.

 

| 결과 확인

▲ PC에서 포스트를 열어보면 설정한 336 x 280픽셀로 게재됩니다.

 

▲ 스마트폰에서는 320 x 100 픽셀 단위로 보여지게 됩니다.