[외부 API 연동] Adsense 연동으로, 수익화하기

웹 개발/외부 API 연동 / / 2025. 8. 4. 23:47

애드센스 적용을 위한 단계별 절차

애드센스 적용은 크게 (1) 애드센스 계정 승인, (2) 광고 코드 삽입, (3) ads.txt 파일 설정의 세 단계로 나뉩니다.

1단계: 구글 애드센스 가입 및 사이트 승인

가장 먼저 구글 애드센스 계정이 있어야 하며, 운영하는 웹사이트가 애드센스 정책에 부합하여 '승인' 상태가 되어야 합니다.

  1. 애드센스 가입: 구글 애드센스 홈페이지에 접속하여 구글 계정으로 가입을 신청합니다.
  2. 사이트 정보 제출: 가입 과정에서 웹사이트의 주소(URL)를 제출합니다.
  3. 사이트 연결 코드 삽입: 애드센스에서 사이트 소유권을 확인하고 검토를 진행하기 위해 아래와 같은 코드를 제공합니다.이 코드를 index.html 파일의 <head>와 </head> 태그 사이에 붙여넣어야 합니다.
  4. HTML
     
    <head>
    <meta charset="UTF-8">
    ...
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
         crossorigin="anonymous"></script>

    <style>
    ...
    </style>
</head>
  5. HTML
     
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
     crossorigin="anonymous"></script>
  6. 승인 대기: 코드를 삽입하고 사이트를 제출하면 구글에서 사이트를 검토합니다. 이 과정은 며칠에서 몇 주까지 소요될 수 있습니다. 승인이 완료되어야 광고가 정상적으로 노출됩니다.

2단계: 광고 단위 생성 및 코드 적용

애드센스 승인이 완료되었다면, 이제 실제 광고를 게재할 차례입니다. 파일에 미리 만들어둔 광고 영역에 맞게 애드센스에서 '광고 단위'를 생성하고 코드를 적용해야 합니다.

2.1. 상단 및 하단 디스플레이 광고

ad-slot-top과 ad-slot-bottom 영역에 표시될 광고입니다.

  1. 광고 단위 생성: 애드센스 계정에서 광고 > 개요 > 광고 단위 기준으로 이동하여 '디스플레이 광고'를 선택하고 새로운 광고 단위를 만듭니다.
  2. 코드 복사: 광고 단위를 생성하면 <ins> 태그를 포함한 광고 코드를 제공합니다. 이 코드를 복사합니다.
  3. 코드 붙여넣기: index.html 파일에서 광고 영역을 찾아 placeholder 텍스트를 지우고, 복사한 광고 코드를 붙여넣습니다.
    • 상단 광고 (ad-slot-top)
    • HTML
       
      <div id="ad-slot-top" class="w-full max-w-lg mb-6 text-center h-auto bg-gray-200 rounded-lg flex items-center justify-center text-gray-500">
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
         data-ad-slot="YYYYYYYYYY"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>
    • 하단 광고 (ad-slot-bottom)
    • HTML
       
      <div id="ad-slot-bottom" class="w-full max-w-lg mt-6 text-center h-auto bg-gray-200 rounded-lg flex items-center justify-center text-gray-500">
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
         data-ad-slot="ZZZZZZZZZZ"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>
    참고: 상단과 하단 광고 단위는 각각 생성하여 data-ad-slot에 다른 ID를 사용하는 것이 좋습니다.

2.2. 전면 광고 (Interstitial Ad)

맛집 추천을 5번 받을 때마다 표시되는 팝업 형태의 광고입니다.

  1. 광고 단위 생성: 애드센스에서 광고 > 개요 > 광고 단위 기준으로 이동하여 '전면 광고'를 선택하고 새로운 광고 단위를 만듭니다.
  2. 코드 정보 확인: 전면 광고는 일반적으로 <head>에 삽입하는 스크립트와 트리거 로직으로 구성됩니다. 하지만 이미 파일에 로직이 구현되어 있으므로, 필요한 **게시자 ID(ca-pub-...)**와 **광고 슬롯 ID(data-ad-slot)**만 확인하면 됩니다.
  3. 스크립트 코드 수정: index.html의 <script> 섹션 내 loadAdSenseAd 함수를 찾아 수정합니다.
    • 수정 대상 함수: loadAdSenseAd(container)
    • adCode 변수 안의 YOUR_PUBLISHER_ID와 YOUR_AD_SLOT_ID를 본인의 애드센스 정보로 교체합니다.
    JavaScript
     
    // AdSense 광고 로드 함수
function loadAdSenseAd(container) {
    // 기존 광고 제거
    container.innerHTML = '';

    // AdSense 광고 코드 삽입
    // 아래 코드의 "ca-pub-YOUR_PUBLISHER_ID"와 "YOUR_AD_SLOT_ID"를 본인의 정보로 반드시 수정해야 합니다.
    const adCode = '<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="WWWWWWWWWW" data-ad-format="auto" data-full-width-responsive="true"></ins>';

    container.innerHTML = adCode;

    // AdSense 스크립트 실행
    if (window.adsbygoogle) {
        (adsbygoogle = window.adsbygoogle || []).push({});
    }
}

3단계: ads.txt 파일 추가

ads.txt는 내 사이트에서 광고를 판매하도록 승인된 판매자(즉, 구글)를 명시하는 파일입니다. 이는 광고 수익을 보호하는 중요한 역할을 합니다.

  1. ads.txt 정보 확인: 애드센스 계정의 사이트 > ads.txt 메뉴에서 본인 계정 전용 ads.txt 파일 내용을 복사할 수 있습니다. 내용은 보통 아래와 같은 형식입니다.
  2. google.com, pub-XXXXXXXXXXXXXXXX, DIRECT, f08c47fec0942fa0
  3. 파일 생성 및 업로드:
    • ads.txt라는 이름의 텍스트 파일을 만듭니다.
    • 복사한 내용을 파일에 붙여넣고 저장합니다.
    • 이 파일을 웹사이트의 루트(root) 디렉토리에 업로드합니다. 즉, 브라우저에서 https://[내도메인]/ads.txt로 접속했을 때 파일 내용이 보여야 합니다.

최종 요약 및 체크리스트

  1. ✅ 애드센스 가입 및 사이트 승인을 완료했나요?
  2. ✅ 사이트 연결 코드를 <head> 태그 안에 삽입했나요?
  3. ✅ 디스플레이 광고 단위 2개(상/하단용)를 생성하고 div 영역에 코드를 삽입했나요?
  4. ✅ 전면 광고 단위 1개를 생성하고 loadAdSenseAd 함수 내의 광고 코드를 수정했나요? (ca-pub- 와 data-ad-slot 확인)
  5. ✅ ads.txt 파일을 다운로드하여 사이트 루트에 업로드했나요?

이 모든 절차를 완료하면, 사이트 방문자에게 광고가 노출되기 시작하며 수익이 발생할 수 있습니다. 광고가 표시되기까지는 코드를 삽입한 후 최대 48시간이 걸릴 수 있습니다.

저작자표시 (새창열림)

'웹 개발 > 외부 API 연동' 카테고리의 다른 글

[외부 API 연동] TossPayments를 통한 원화 결제 연동하기  (2) 2025.08.06
[외부 API 연동] Tenor API로 관련된 gif 이미지 불러오기  (0) 2025.08.04
[외부 API 연동] 카카오 API 연동해서 Map 정보 조회하기  (0) 2025.08.04
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기
웹 개발/외부 API 연동 관련 글
글 더보기

티스토리툴바