[Adfit] 애드핏 광고 신청 및 사용하기

Vue 프로젝트에 애드핏 광고를 넣는 과정에 대해 포스팅하려고 합니다. 애드핏은 애드센스에 비해 승인이 쉽게 되는 편이라 신경 쓸 내용이 많지 않아 잘만 따라와주시면 수익을 낼 수 있습니다.

그럼 시작하기에 앞서 Adfit 로그인을 먼저 해주세요!

AdFit (kakao.com)

AdFit

1. 매체 등록하기

Adfit 시작하기 - 광고관리 - 매체 등록을 눌러주시고

다음과 같이 내용을 채워주시고 등록을 눌러주세요.

2. 광고단위 생성

광고단위 생성 - 다음을 눌러주시면 아래와 같이 뜨는데요 배너를 선택해주세요

옵션 사항은 전부 미설정으로 두셔도 괜찮습니다.

3. 광고 스크립트 복사

4. 광고 컴포넌트를 만들기 (script 제외)

저는 컴포넌트 이름을 AdfitBottom으로 지었습니다. 
Vue 문법이긴 한데 React 쓰시는 분들은 React에 맞게 컴포넌트 만드셔서 export하시면 됩니다. 

<template>
  <ins
    class="kakao_ad_area"
    style="display: none"
    data-ad-unit="DAN-GN3U59rvqXqpobKE"
    data-ad-width="320"
    data-ad-height="100"
  ></ins>
</template>

<script>
export default {
  setup() {
    return {};
  },
};
</script>

<style scoped>
</style>

script는 index.html에 따로 넣어주세요

<script
      type="text/javascript"
      src="//t1.daumcdn.net/kas/static/ba.min.js"
      async
    ></script>

이제 컴포넌트를 사용하시면 광고가 정상적으로 뜰 겁니다.

이렇게 광고를 포함해서 배포한 후 승인요청을 해야지 승인이 되고 수익이 날 수 있습니다. 만약 광고 단위를 만들자마자 승인 요청을 한다면 배포된 링크에 광고가 없다면서 애드핏에서 승인 반려 해버립니다. 

생각보다 간단하죠?