Table of Contents

Blogspot 블로그 AdSense 수익 극대화: 구체적인 코드 삽입 가이드

이전 가이드에서 AdSense 광고 유형과 전략을 설명드렸는데요, 이번에는 Blogspot 블로그에 AdSense 코드를 구체적으로 어디에, 어떻게 삽입해야 하는지 자세히 알려드릴게요. HTML 편집이 익숙하지 않은 분들도 쉽게 따라 하실 수 있도록 핵심적인 내용만 짚어보겠습니다.

1. AdSense 광고 단위 코드 준비하기

가장 먼저 AdSense 계정에 로그인하여 필요한 광고 단위 코드를 생성해야 합니다.

AdSense 대시보드 접속: AdSense에 로그인하세요.
광고 단위 생성:
- ‘광고’ > ‘개요’ > ‘광고 단위 기준’ 탭으로 이동합니다.
- ‘디스플레이 광고’, ‘인피드 광고’, ‘인아티클 광고’, ‘멀티플렉스 광고’ 중 원하는 유형을 선택하고 생성합니다.
- 각 광고 단위를 생성하면 <script> 태그와 <ins> 태그로 구성된 광고 코드를 받게 됩니다. 이 코드를 복사해두세요.

2. Blogspot 테마 HTML 접근하기

Blogspot 블로그에 광고 코드를 삽입하려면 테마의 HTML을 직접 편집해야 합니다.

Blogspot 대시보드 접속: Blogspot 블로그에 로그인하세요.
테마 편집기로 이동:
- 좌측 메뉴에서 ‘테마’를 클릭합니다.
- 현재 사용 중인 테마 아래 ‘맞춤설정’ 버튼 옆의 드롭다운 화살표를 클릭하여 ‘HTML 편집’을 선택합니다.
- HTML 편집기가 열리면 블로그의 전체 코드를 볼 수 있습니다.

3. 각 광고 유형별 코드 삽입 위치 (구체적인 예시)

이제 각 광고 유형별로 코드를 삽입할 구체적인 위치를 알려드릴게요. (테마에 따라 HTML 구조가 조금씩 다를 수 있으니, <data:post.body/>와 같은 주요 태그를 잘 찾아보세요.)

3.1. 자동 광고(Auto Ads) 및 전역 AdSense 스크립트

자동 광고를 사용하거나 블로그 전체에 AdSense 기능을 활성화하려면, AdSense에서 제공하는 <head> 태그 내 삽입 스크립트를 블로그 HTML의 <head> 태그 바로 뒤에 붙여넣습니다.

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

3.2. 디스플레이 광고 (가장 쉬운 방법: 레이아웃 가젯 활용)

사이드바, 푸터, 또는 게시물 상단/하단 등 특정 영역에 삽입하는 디스플레이 광고는 ‘레이아웃’ 메뉴의 가젯을 사용하는 것이 가장 간단합니다.

Blogspot 대시보드 > ‘레이아웃’으로 이동합니다.
광고를 넣고 싶은 섹션(예: 사이드바, 게시물 상단/하단 영역)에서 ‘+ 가젯 추가’를 클릭합니다.
목록에서 ‘HTML/JavaScript’ 가젯을 선택합니다.
내용(Content) 상자에 AdSense 디스플레이 광고의 <script> 태그와 <ins> 태그를 모두 붙여넣습니다

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-YOUR_PUBLISHER_ID"
     data-ad-slot="YOUR_AD_SLOT_ID"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

‘저장’을 클릭하고, 가젯을 원하는 위치로 드래그하여 배치합니다

3.3. 인아티클 광고 (게시물 본문 내 삽입)

게시물 본문 내에 인아티클 광고를 삽입하려면 HTML 편집이 필요합니다. 게시물 본문을 출력하는 태그를 찾아야 합니다.

‘테마’ > ‘HTML 편집’으로 이동합니다.
키보드 Ctrl+F (Mac: Cmd+F)를 눌러 검색창을 열고 <data:post.body/> 또는 <div class='post-body'> 등 게시물 본문 내용을 출력하는 코드를 검색합니다.
이 태그의 바로 위 또는 아래에 인아티클 광고 코드를 삽입할 수 있습니다.

예시 (본문 상단에 배치):

<script async   src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-YOUR_PUBLISHER_ID"
     data-ad-slot="YOUR_AD_SLOT_ID"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<data:post.body/> ```

팁: 더 세밀한 제어를 원한다면, HTML 편집에서 게시물 내용이 출력되는 <data:post.body/>를 substring으로 잘라 중간에 광고를 넣는 복잡한 방법을 사용할 수도 있지만, 초보자에게는 권장하지 않습니다. 수동으로 게시물 작성 시 HTML 모드에서 직접 코드를 붙여넣는 것이 더 간단할 수 있습니다.

3.4. 인피드 광고 (게시물 목록 사이)

블로그 메인 페이지나 라벨 페이지에서 게시물 목록 사이에 인피드 광고를 넣으려면, 게시물 반복 루프를 찾아야 합니다.

‘테마’ > ‘HTML 편집’으로 이동합니다.
b:loop 태그를 검색하여 게시물 목록을 반복하는 부분을 찾습니다. 보통 <b:loop values='data:posts' var='post'>와 같은 형태입니다.
이 루프 안에서 특정 횟수마다 광고 코드가 나타나도록 **b:if 조건문과 data:post.index**를 활용할 수 있습니다. 예를 들어, 세 번째 게시물마다 광고를 넣으려면:

HTML

<b:loop values='data:posts' var='post'>
  <div class='post-outer'>
    <data:post.title/>
    <data:post.snippet/>  </div>

  <b:if cond='data:post.index == 2'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-format="fluid"
         data-ad-layout-key="-ABCDEF" data-ad-client="ca-pub-YOUR_PUBLISHER_ID"
         data-ad-slot="YOUR_AD_SLOT_ID"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </b:if>
</b:loop>

3.5. 멀티플렉스 광고 (관련 게시물 하단)

멀티플렉스 광고는 일반적으로 게시물 하단, 관련 게시물 섹션 주변에 배치하는 것이 자연스럽습니다.

‘테마’ > ‘HTML 편집’으로 이동합니다.
게시물 본문을 출력하는 <data:post.body/> 태그 바로 아래나, 관련 게시물 섹션을 나타내는 태그(예: <div class='related-posts'> 등) 바로 위/아래에 코드를 삽입합니다.

HTML

<data:post.body/>

<div class='related-posts'>  </div>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-YOUR_PUBLISHER_ID"
     data-ad-slot="YOUR_AD_SLOT_ID"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

4. 코드 삽입 후 중요 사항

HTML 저장: 모든 코드 삽입이 끝나면 ‘테마 저장’ 버튼을 클릭하여 변경 사항을 적용합니다.
캐시 비우기: 변경 사항이 즉시 적용되지 않을 수 있으니, 브라우저 캐시를 지우거나 시크릿 모드/다른 브라우저로 접속하여 확인해보세요.
모바일 반응형 확인: 모바일 기기에서도 광고가 적절하게 표시되는지 반드시 확인해야 합니다. AdSense는 반응형 광고를 기본으로 제공하지만, 테마와 충돌이 없는지 점검하세요.
광고 정책 준수: AdSense 정책을 항상 준수하는지 확인하세요. 과도한 광고 배치나 사용자 경험을 저해하는 배치는 정책 위반으로 이어질 수 있습니다.

이 가이드가 Blogspot 블로그에 AdSense 광고를 구체적으로 설정하는 데 큰 도움이 되기를 바랍니다. 궁금한 점이 있다면 언제든지 다시 질문해주세요!