AI Inventors 개발 Story
AI Inventors History#2-6 "Personalcolor AI 개발 - 광고 삽입 (카카오 애드핏, Adfit)" 본문
AI Inventors History#2-6 "Personalcolor AI 개발 - 광고 삽입 (카카오 애드핏, Adfit)"
ai.inventors 2020. 9. 3. 14:35안녕하세요
AI Inventors 입니다 :)
오늘은 수익형 웹/앱에서 가장 중요한!!
광고 삽입 부분을 공유드리겠습니다.
개발한 서비스를 수익화 하는 방법에는 아주 다양한 수단이 있습니다.
특정 업체와 프로모션/콜라보 계약을 맺고 서비스를 판매하여 REST API형태로 서비스를 제공하는 경우도 있구요.
혹은, 구독 서비스를 넣을 수도 있고, 인앱 결제 시스템을 넣을 수도 있습니다.
하지만, 오늘은 제일 간단하고, 수익화 하기에도 쉬운 광고 삽입을 알려드리겠습니다.
우선, "광고 네트워크" 라는 것을 설명드려야 하는데요.
저희 서비스가 매우 널리널리 알려져서, 네이버나 혹은 특정 카페들 처럼 유명해지면,
저희 사이트에 광고를 실어달라는 제휴 요청이 들어오게 될텐데요.
이런 경우는 매우 유명한 카페들의 경우에 해당하고, 혹은 반대로 저희가 직접 제휴를 따오려면 굉장히 힘들겠죠??
그래서, 중간 브로커 역할을 하는 "광고 네트워크" 업체들이 있습니다.
광고주들에게 광고요청을 받고, 광고 게재를 원하는 매체(웹사이트, 어플 등)들과 연결해주는 업체들인데요.
물론, 아무 사이트에 막 광고를 실으면, 광고주들의 광고 효과도 떨어지고, 수익성이 악화되기에
광고 네트워크 사이트들은 매체들 등록을 받을 때, 깐깐한 심사과정을 거칩니다.
이러한 광고 네트워크 업체들로 유명한 회사들은,
구글의 애드센스, 카카오의 애드핏, 네이버의 애드포스트 등이 있습니다.
가장 유명하고 수익성이 좋은 사이트는 구글의 애드센스 이지만,
역시나 승인이 가장 어렵고 깐깐하기로 유명하여, 이른바 "애드고시"라고 불리기까지 합니다.
저희는 오늘 상대적으로 승인이 쉬운
애드핏을 통해 내 웹사이트에 광고 등록을 하는 방법을 알아보겠습니다.
1. 애드핏 접속
우선, "카카오 애드핏"에 접속을 해주시구요!
본인이 갖고계신 카카오 계정을 통해 접속해주시면 됩니다.
(아마, 카카오톡을 다들 쓰시니 카카오 계정이 있으실거에요!)
접속을 하시면, 상단의 "광고관리" 메뉴를 눌러 광고관리 탭으로 들어오시구요!
2. 매체 등록
계정 리스트가 뜨는데, 아마 처음 등록하시면 등록된 매체가 없으므로, 계정관리 리스트가 비어있을거에요!
그러면, 하단의 붉은색 박스쳐져있는 "새 매체" 버튼을 클릭하셔서 매체 등록을 하도록 합니다.
"새 매체" 버튼을 누르시면, 본격적으로 매체 등록이 시작됩니다.
매체 명에는 본인이 등록하고 싶은 사이트의 이름을 적어주시구요.
매체 고유값에는 해당 사이트의 url 정보를 적어주시면 됩니다.
저는 매체명에는 "ai-inventors", 매체 고유값에는 "ai-inventors.tistory.com" 을 적었습니다.
매체등록을 누르시면, 광고단위를 등록하도록 뜨는데요.
매체는 내가 등록하고자 하는 사이트 라면, 그 사이트 내에 게재할 광고 하나하나를 "광고단위"라고 합니다.
사이트에 광고가 하나만 있는경우는 없잖아요?
글마다도 몇개씩 들어가고, 댓글창 위에 하단배너, 좌우에 측면배너 등등 꽤 많은 광고들이 들어가게 됩니다.
광고 단위명에는
본인이 편하신 명칭을 적어주시면 됩니다.
대개 "ai-inventors 측면", "ai-inventors 게시글 본문 상단" 등으로 명칭을 적어주시고는 하는데,
일단은 test용도이니, 저는 광고단위명을 "AI Inventors Blog"라고 작성하였습니다.
그리고 하단에 가시면,
배너 크기를 조절하는 칸이 있습니다.
사용 용도에 따라 크기가 달라지구요.
크기에 따라 광고 수익금액이 조금씩 달라지고는 하는데, 아무래도 큰 광고가 수입은 조금 더 좋겠지만
User Experience(사용자의 이용 경험) 측면에서, 너무 과하고 큰 광고들은 유저들의 불만을 초래할 수 있겠죠?
3. 내 웹사이트에 광고 등록하기
광고단위까지 등록하고 다시 광고관리로 돌아오시면,
위와 같은 화면을 볼 수 있습니다.
이 중, 빨간 박스 쳐진 "스크립트" 부분을 클릭하시면
아래와 같이, 내 웹사이트에 등록할 광고의 소스코드를 확인하실 수 있습니다.
이 소스코드를 복사해두시고, 본인의 웹사이트 소스코드로 가봅니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<html>
<head>
</head>
<body>
<div class = "container">
<div>
<h1> Hello World! </h1>
</div>
<div class = "ad_fit_area">
<ins class="kakao_ad_area" style="display:none;" data-ad-unit = "DAN-###########"
data-ad-width = "320" data-ad-height = "100"></ins>
</div>
</div>
|
cs |
아까 복사해둔 소스코드 중 <ins> 태그로 감싸진 부분을 복사하셔서,
내가 등록하고자 하는 웹사이트 내 영역에 붙여넣어줍니다.
|
1
2
3
4
5
|
<script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>
</body>
</html>
|
cs |
그리고, 위 화면과 같이, </body>태그, 즉 body 태그가 끝나기 직전 윗부분에,
아까 복사한 소스코드 중 <script> 태그로 감싸진 부분을 복사해서 붙여넣어줍니다.
이러면 끝!!!
4. 광고가 입력된 내 웹사이트 확인
이전, 개발History#2-5 Nginx 연동 게시물에
테스트로 광고를 넣어봤습니다.
아직은 매체가 승인 전이라, 실제 광고가 아닌, "카카오 엔터프라이즈"의 샘플광고가 나오고있습니다.
승인이 완료되면, 실제 광고가 등장하게 되며, 이때부터 수익이 발생하기 시작합니다.
감사합니다.
AI Inventors :)
