티스토리 본문상단 광고 html로 넣는법



티스토리 블로그는 수익-> 애드센스 관리 메뉴에서 광고를 자동으로 넣을 수 있습니다. 그런데 이렇게 티스토리 어드민을 통해서 넣은 광고가 예전에 비해 로딩속도가 오래 걸려서 블로그 접속시 상단에 광고는 나오지 않고 구글 애드센스 로고만 나오는 경우가 허다 합니다. 광고 로딩속도를 개선하기 위해서 블로그 본문 상단에 광고를 수동으로 넣어봤습니다.

티스토리 본문상단 광고 수동으로 넣는 방법

1. 광고 단위 기준으로 본문상단 광고 만들기

구글 애드센스 > 광고 > 개요 > 광고단위기준 > 디스플레이광고 클릭 

광고크기는 반응형으로 하고 만들기를 클릭합니다. 

반응형광고 만들기

2. 광고 코드 복사

html로 된 광고 코드를 복사합니다.

3. 광고 위치 찾기 

티스토리 관리> 스킨편집 > html편집 > 본문상단 위치를 찾습니다. 

스킨마다 본문의 위치가 다른데 제가 사용하고 있는 스킨의 경우 [##_article_rep_desc_##] 위에 복사한 코드를 넣으면 본문글 타이틀 아래 광고가 자동으로 나옵니다. 이 때 광고 위치가 맞는지 확인하기 위해서 왼쪽 미리보기 화면의 [홈]을 [글]로 바꾸고 소스를 넣은후 새로고침하면 광고 위치를 확인할 수 있습니다. 

미리보기변경

4. 광고 코드 편집해서 넣기

광고 코드를 넣을때 <ins 코드 위에 있는 스크립트는 <head>안에 한번만 넣어주면 됩니다. 저는  [##_article_rep_desc_##] 위치 위에 아래와 같이 반응형 광고 코드를 넣었습니다.  

소스입력

이때 모바일 에서 광고가 왼쪽으로 쏠리는 현상을 막기 위해서 div style 센터 정렬을 추가 했고 data-full-width-responsive=”true” 를 false로 변경 했습니다. 마지막으로 글과 광고가 너무 붙어 있는것 같아서 하단에 <br>코드를 하나 추가 했습니다.

이렇게 설정을 변경해도 광고 로딩 속도가 걸리긴 하지만 최소한 광고가 뜨지 않은 상태에서 애드센스 로고만 뜨는 현상은 방지할 수 있습니다.