구글 블로그 본문내 광고 위치 가젯(위젯)으로 변경하는 법

5월 21, 2025

구글 블로그에서 X번째 문단뒤에 광고를 배치하는 법

저는 광고 코드를 배치할 때, 글 본문의 3번째 문단뒤, 9번째 문단뒤, 14번째 문단 뒤 이렇게 정형화된 위치에 배치하는 것을 선호합니다.

워드프레스를 사용해보신 분이라면, Ad insert같은 플러그 인을 활용하여 쉽게 배치가 가능했는데, 구글 블로그에서는 마땅한 방법이 보이질 않았습니다.

하지만, 레이아웃에 가젯 배치를 통해 이를 구현할 수 있었습니다.

지금부터 이 방법을 설명하겠습니다.

카카오 애드핏 광고를 본문에 넣는 일반적인 방법

보통 카카오 애드핏 광고를 구글 블로그(Blogger, Blogspot)에 넣는 방법은 몇 가지가 있습니다.

1. 가장 직접적인 방법 : 본문에 html로 코드 넣기

이 방법은 글의 흐름과 광고의 위치를 맞출 수 있는 가장 좋은 방법입니다.
다만, 모든 글에 하나씩 코드를 넣어줘야하니 글을 작성할 때 조금 번거로움이 생기고,
나중에 광고를 수정하려고 하면, 모든 글을 다시 수정해야하는 문제가 생깁니다.

2. 테마에 맡기는 방법 : 정해진 레이아웃 위치에 광고 넣기

사용 중인 테마의 구글 블로그 (블로그스팟)의 레이아웃에 따라 광고 코드를 넣을 수 있습니다. 아래 그림에서 처럼 HTML/JavaScript 가젯을 만들고 이 곳에 카카오 광고 코드를 넣으면 됩니다.

구글 블로그 레이아웃

가장 손쉽고, 블로그 다양한 위치에 배치할 수 있고, 수정하기 쉽지만, 한정된 곳에만 광고를 넣을 수 있다는 한계가 있습니다.

3. 레이아웃에 별도의 간단한 코드 삽입하기

오늘 설명 드릴 방법은 이 내용입니다.

글 본문의 Html을 수정하지 않되, 글 중간 문단 특정 위치에 광고를 배치하고 싶을 때 쓸 수 있는 방법이며, 간단하게 규칙을 정해 쓸 수 있습니다.

카카오 애드핏 광고 코드

카카오 애드핏 광고를 설치해보신 분은 당연히 아시겠지만, 광고 코드는 아래와 같이 생겼습니다.

<ins class="kakao_ad_area" style="display:none;width:100%;"

data-ad-unit = "광고단위ID"

data-ad-width = "광고단위 가로 사이즈"

data-ad-height = "광고단위 세로 사이즈"></ins>

위 코드에서 노란색으로 칠한 부분은 나중에 활용해야 하는 부분들입니다. 일단 기억 해두세요

광고 배치를 위해 필요한 코드

위의 광고 코드를 조금 변형해보겠습니다.


<script type="text/javascript">

  window.addEventListener('DOMContentLoaded', function () {

    var article = document.querySelector('.post-body'); // 블로거 본문 선택

    if (article) {

      var paragraphs = article.querySelectorAll('p'); // 모든 단락 선택

      if (paragraphs.length >= 2) {              

        var firstParagraph = paragraphs[1]; // 2 번째 단락

        // 광고 컨테이너 div 생성
        var adWrapper = document.createElement('div');
        adWrapper.style.textAlign = 'center'; // 가운데 정렬

        // 광고 ins 요소 생성
        var adIns = document.createElement('ins');
        adIns.className = 'kakao_ad_area';
        adIns.style.display = 'none';
        adIns.setAttribute('data-ad-unit', '광고단위ID');  
        adIns.setAttribute('data-ad-width', '광고단위가로사이즈'); 
        adIns.setAttribute('data-ad-height', '광고단위세로사이즈');  

        // 광고 요소를 div에 삽입
        adWrapper.appendChild(adIns);

        // 광고 div를 첫 번째 단락 뒤에 삽입
        firstParagraph.insertAdjacentElement('afterend', adWrapper);

        // 광고 스크립트 생성 및 로드
        var adScript = document.createElement('script');
        adScript.type = 'text/javascript';
        adScript.src = '//t1.daumcdn.net/kas/static/ba.min.js';
        adScript.async = true;
        document.body.appendChild(adScript);

      }

    }

  });

</script>

각자 환경 및 선호도에 따라 수정이 필요한 부분은 위에 노란색으로 칠해 두었습니다.

먼저 광고 위치입니다.

 if (paragraphs.length >= 2) {              
        var firstParagraph = paragraphs[1]; // 2 번째 단락

위에 세팅은 문단 2번째 단락 뒤에 광고를 배치하는 코드입니다.

만약 3번째 단락 뒤로 옮기고 싶다면 다음과 같이 숫자를 수정하세요.

 if (paragraphs.length >= 3) {              
        var firstParagraph = paragraphs[2]; // 3번째 단락

// 3번째 단락  이 부분은 주석입니다. 잊지말라고 메모를 다는 부분이라고 생각해주세요.

두 번째는 광고 코드입니다.

        adIns.setAttribute('data-ad-unit', '광고단위ID');  
        adIns.setAttribute('data-ad-width', '광고단위가로사이즈'); 
        adIns.setAttribute('data-ad-height', '광고단위세로사이즈');

위의 코드의 '      '  사이의 한글을 카카오 애드핏 광고 코드에서 복사해 넣으세요.

<ins class="kakao_ad_area" style="display:none;width:100%;"
 data-ad-unit    = "광고단위ID"
 data-ad-width   = "광고단위 가로 사이즈"
 data-ad-height  = "광고단위 세로 사이즈"></ins>
<script async type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js"></script>
단, '     '  표시는 지우지 말고 한글 부분만 대치해서 넣어 주세요. 



레이아웃 설정에 배치하기
이제 필요한 준비는 다 끝났습니다. 
아래와 같이 배치하는 작업만 남았습니다. 

관리화면에서 아래 메뉴의 '레이아웃'을 누릅니다. 


그 다음 가젯 추가를 누르고 Html/자바스크립트를 클릭합니다. 





위젯 제목은 생략하시고, 콘텐츠 칸에는 아까 수정한 스크립트 코드를 복사해서 넣어 주세요

가젯 추가 화면


저는 페이지 본문 섹션에 위치시켰습니다. 원하는 갯수만큼 배치할 수 있습니다. 
위젯 배치

이제 모든 작업을 마쳤습니다.

필요한 곳에 광고를 배치하며 손쉽게 광고 교체 등 수정 작업을 하실 수 있습니다.

그리 어렵지 않은 작업입니다. 한 번 시도해보세요.

락이와 함께한 생활 이야기