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

Table of Contents

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

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

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

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

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

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

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

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

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

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

사용 중인 구글 블로그 테마의 레이아웃에 따라 HTML/JavaScript 가젯을 만들고 이곳에 카카오 광고 코드를 넣으면 됩니다.

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

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

글 본문의 HTML을 수정하지 않고 특정 문단 뒤에 광고를 삽입하는 방법입니다. 간단한 스크립트 규칙을 통해 구현할 수 있습니다.

카카오 애드핏 광고 코드 예시

&lt;ins class="kakao_ad_area" style="display:none;width:100%;"
  data-ad-unit="광고단위ID"
  data-ad-width="광고단위 가로 사이즈"
  data-ad-height="광고단위 세로 사이즈"&gt;&lt;/ins&gt;
&lt;script async type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js"&gt;&lt;/script&gt;

노란색으로 표시된 부분은 나중에 자신의 광고 정보로 교체해야 합니다.

광고 배치를 위한 스크립트 코드

<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>

코드는 옆의 링크에서 다운 받으세요 : [링크]

위 스크립트에서 paragraphs[1]은 2번째 문단 뒤에 광고를 삽입하는 설정입니다. 3번째 문단 뒤로 옮기고 싶다면 paragraphs[2]로 바꾸면 됩니다.

레이아웃 설정에 광고 배치하기

이제 필요한 준비는 다 끝났습니다. 아래와 같이 배치하는 작업만 남았습니다.
관리화면에서 아래 메뉴의 ‘레이아웃’을 누릅니다.

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

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

가젯 추가 화면

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

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

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

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

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