- javascript date format
- html css
- $(document).ready()
- 리엑트 삼항연산자
- 파이썬 온라인 강의
- javascript array shift
- javascript array map
- Python3
- 국비 지원 프로그래밍
- javascript array push
- javascript 날짜 포맷 변환
- 동기 코드
- python dictionary
- kakao Adfit
- 프로그래밍
- python slicing
- 제이 쿼리
- 프로그래밍 파이썬
- JavaScript
- HTML 기초
- javascript example
- 자바스크립트
- 동기 뜻
- python index
- javascript array add
- 비동기 뜻
- javascript array method
- 파이썬 학원
- 파이썬 세트
- 카카오 애드핏
- 코딩 파이썬 기초
- 국비 지원 파이썬
- javascript array unshift
- HTML
- javascript array splice
- 파이썬 기초
- javascript array remove
- 파이썬 사칙연산
- 비동기 코드
- 파이썬 배우기
- 파이썬 입문
- jquery loaded event
- python 다운로드
- 파이썬 강의 사이트
- jupyter python
- jQuery
- 파이썬 강의
- 파이썬 ide 추천
- 웹 프로그래밍
- 웹 프로그래밍 기초
코딩이 즐겁다
티스토리 카카오 애드핏 수동 광고 넣는 방법 갓벽 가이드 (목록, 본문, 사이드바) 본문
티스토리 블로그에 카카오 애드핏 광고를 자동 광고로 노출시킬 수도 있지만 수동으로 등록하고 노출시키는 방법에 대해 작성해 보려고 합니다. 광고 노출을 시킬 수 있는 위치는 메인 글목록 상단, 본문, 사이드바 정도가 아닐까 생각합니다. 생각보다 어렵지 않으니 차근차근 따라 하시면 카카오 애드핏 수익 올리기에도 도움이 되실 거라 생각합니다. 카카오 애드핏 광고 수익을 올리고 싶을 때 추천드리고 싶은 방법은 여러 곳에 카카오 애드핏 광고를 배치하시고 카카오 애드핏 수익 보고서를 통해 어느 위치에서 수익이 높은지 판단하시고 해당 위치 근처 자리에 광고를 집중 배치하는 방향을 추천드립니다.
카카오 애드핏 광고 스크립트 복사하기
티스토리 블로그를 추가 개설해서 여러 블로그를 운영하시는 분들은 제가 이전글에 작성한 카카오 애드핏 직접 광고 만들기 글을 참고하시면 광고 생성하는 방법에 대해 자세히 나와 있습니다. [바로가기]
티스토리 블로그를 하나만 운영하시는 분들은 대부분 티스토리 관리자에서 카카오 애드핏 연동 기능을 사용하실텐데요. 이런 분들도 문제없이 수동 광고 적용 가능합니다.
카카오 애드핏 광고 연동을 하시는 모든 분들은 동일한 방법으로 수동 광고 적용이 가능하니 끝까지 읽어주시기 바랍니다.
카카오 애드핏 홈페이지에 접속합니다.
[바로가기]
광고 관리 메뉴에 접속하시고 연동되어 있는 사이트를 선택하시면 현재 적용 가능한 광고 목록을 확인하실 수 있습니다.
광고를 새로 만들고 싶다면 목록 우측 상단의 '광고단위 생성' 버튼을 통해 광고를 생성하셔도 됩니다.
카카오 애드핏 광고는 HTML 스크립트 코드를 통해 블로그에 광고를 적용시킬 수 있습니다.
여기서 중요한 점은 '스크립트 복사' 버튼으로 전체 코드를 모두 복사해서 사용해도 문제는 없습니다.
하지만 카카오 애드핏 광고를 수동으로 여러 개 넣는다고 가정할 때 <script> 태그는 중복으로 여러 개 넣게 되면 여러 번 호출되기 때문에 굳이 여러 개 넣지 않으셔도 됩니다.
오히려 사이트 로딩 속도를 저하시키게 됩니다.
<script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>
<script> 태그 코드를 복사하셔서 </body> 태그 바로 위에 붙여넣어 주시면 끝입니다.
광고를 넣을 때 더이상 필요하지 않은 코드가 되겠습니다.
이번글에서 다루고 있는 카카오 애드핏 수동 광고 등록하는 방법은 <ins> 태그만 복사하시면 됩니다.
아래 코드는 <ins> 태그 예시 형식입니다.
<ins class="kakao_ad_area" style="display:none;"
data-ad-unit = "광고단위ID"
data-ad-width = "광고단위 가로 사이즈"
data-ad-height = "광고단위 세로 사이즈"></ins>
티스토리 글 목록 상단 수동 광고 넣기
티스토리 메인 화면에서 글 목록 상단 영역에 수동 광고를 넣게 되면 글 본문 제목 위쪽 영역에도 광고가 노출되게 됩니다. 따라서 해당 방법은 글 목록 상단 수동 광고 등록 방법도 되겠지만 본문 제목 위쪽에 수동 광고 등록 하는 방법도 되겠습니다.
위의 이미지는 카카오 애드핏 광고를 넣기 전 모습입니다.
위쪽 상단 영역에 카카오 애드핏 광고를 수동으로 넣어 보겠습니다.
제가 사용하고 있는 티스토리 블로그 스킨은 div 태그의 id 속성이 "mArticle"로 되어 영역이 본문 영역을 차지하고 있습니다.
따라서 해당 div 태그 바로 밑에 <ins> 태그로 되어 있는 광고 스크립트를 붙여넣기 하였습니다.
카카오 애드핏 광고 스크립트를 티스토리 HTML 편집 기능으로 적용한 후에 모습입니다.
정사각형 같은 직사각형의 반응형 광고를 선택해서 넣었습니다.
티스토리 글쓰기 본문에 수동 광고 넣기
티스토리 글을 작성할 때 카카오 애드핏 광고를 원하는 위치에 적용하는 방법에 대해 설명하겠습니다. 원하는 광고의 스크립트를 복사합니다.
<p style="text-align:center;">
<ins class="kakao_ad_area" style="display:none;"
data-ad-unit = "광고단위ID"
data-ad-width = "광고단위 가로 사이즈"
data-ad-height = "광고단위 세로 사이즈"></ins>
</p>
카카오 애드핏 광고 스크립트 예시입니다. 여기서 보시면 p 태그로 ins 태그를 감싸주었습니다. 광고 밑으로 줄바꿈 효과도 주고 광고를 가운데 정렬하기 위해 코드도 넣어 드렸습니다. 사용자 광고의 ins 태그 부분만 바꿔서 적용하시면 됩니다.
광고를 노출하고 싶은 위치를 정하시고 해당 위치에 코드를 넣어보겠습니다. 단, HTML 코드를 적용하고 해당 글은 바로 발행해야 합니다. 다시 기본모드로 돌아오시면 광고 코드가 사라지게 됩니다. 티스토리 HTML 글쓰기 모드에서 바로 발행해 주세요.
원하는 위치에 광고 스크립트를 붙여넣기 하고 글을 발행하게 되면 해당 위치에 카카오 애드핏 광고가 나타나게 됩니다.
티스토리 사이드바 수동 광고 넣기
티스토리 사이드바에 카카오 애드핏 광고를 수동 등록하는 방법에 대해 설명하도록 하겠습니다.
티스토리 관리자 페이지에 접속하셔서 사이드바 메뉴에 들어가시면 해당 모습을 확인하실 수 있습니다.
사이드바에 광고를 추가하기 위해 "HTML 배너출력"을 선택합니다.
등록하고 싶은 카카오 애드핏 광고 스크립트 코드를 붙여넣기 하면 사이드바에서 애드핏 광고를 확인하실 수 있습니다.
여기까지 카카오 애드핏 광고를 수동 등록하는 방법에 대해서 설명했습니다.
카카오 애드핏 광고 수익 올리기에 도움이 되었으면 좋겠습니다.
'blog' 카테고리의 다른 글
티스토리 이미지 alt 속성 추가하는 방법 갓벽 가이드 (25) | 2025.03.06 |
---|---|
카카오 애드핏 직접 광고 만들기 갓벽 가이드 (48) | 2025.02.23 |