[HTML 코드 입력]으로 애드센스 광고 알아서 넣기 (본문-제목1 위에)

글 작성 계기

스킨 변경 후 집 나간 광고가 안 돌아옴

부제 : 훗날 실수할 내 자신을 위한 또 하나의 백업

https://stockddalbae.com/196

HTML 설정 만으로 티스토리 자동 목차 생성하기 (별도 파일/서식 설정 X)

며칠 전 대충 이런 일이 있었습니다. 스킨을 이쁜 걸로 바꿔야지 했다가 코드들이 다 날아갔죠. 덕분에 목차도 다시 예쁘게 만들고.. 블로그를 통째로 개선하는 계기가 되었습니다. 다만 우려스러운 건 본문에 광고가 잘 안 들어오는 점이었죠.
스킨 변경 후 허겁지겁 구글 서치콘솔 / 네이버 서치어드바이저 / 구글 애드센스 HTML을 넣어서 크롤링이 되도록 하였습니다. 그 후 기다려보니 팝업이랑 상단바 쪽은 그래도 광고가 들어옵니다. 그런데 본문 내용 중간에는 광고가 도저히 들어오지 않습니다. 으아아... 와이프에게 신세한탄 겸 말해보니 '안 그래도 광고가 너무 덕지덕지 붙어서 글읽기 어려웠는데 차라리 이게 보기 낫다.'고 하였습니다. (원영적 사고? 독자를 위해 광고를 줄이다니 럭키비키잖아..?) 와이프의 이 말을 듣고 생각이 약간 바뀌었습니다. 이왕 이리 된거 본문의 광고는 내가 위치를 지정한 곳만 뜨게 수동으로 HTML을 넣어볼까? 그래서 사람들이 보다 글을 편하게 읽으면서 광고가 크게 방해되지 않도록 해볼까? 그래서 스스로(=챗지피티에게 만들어달라고 졸라서) HTML 코드를 짜보았습니다. 그 전에, 사이드바도 하나 설정했답니다.

---

사이드 바 광고 넣기

 사이드바 광고는  HTML 설정까지 할 필요 없이 TISTORY 설정 만으로도 충분히 가능합니다. 

 광고 단위 기준 만들기

 아래 사진처럼 구글 애드센스 사이트를 들어가서 광고 - 광고 단위 기준 - 디스플레이 광고를 선택합니다. 디스플레이 광고는 [수직형]으로 선택한 뒤, 광고 크기는 [반응형]으로 설정합시다. 우리가 사이즈까지 정해줄 필요는 없죠. 구글아 니가 알아서 맞추렴.

광고 단위 기준 메뉴로 돌아오면 본인이 설정한 광고가 만들어져 있을 겁니다. [코드 가져오기]를 누르시면 HTML 코드가 나옵니다. 복사합시다. 복사하기 버튼을 누르셔도 되고, 직접 드래그 해서 복사하셔도 됩니다.

티스토리 사이드바 설정하기

 티스토리 - 관리 로 들어갑니다. [꾸미기] - [사이드바]로 들어가시면 HTML 배너출력 란 이 있습니다. 그 옆의 [+]  버튼을 누르시면 사이드바 1~3 중 위치를 선택할 수 있습니다. 전 사이드바3으로 하였습니다. 그후 배너출력 쪽에 커서를 갖다대면 [편집] 버튼이 뜹니다. 그 곳에 HTML소스에 복사한 HTML을 붙여넣고 적당한 이름을 지어줍니다. 제 경우엔 쿠팡도 마찬가지로 세로 형식으로 만들어서 쿠팡 사이드바를 만들었답니다. 딱히 실적은 못 내고 있는 것 같지만..

---

글 본문에 광고 넣기

자동으로 넣기 (애드센스 설정)

 사실 다들 이미 아실 것 같지만, 뭔가 있어야 할 설명인 것  같아서 넣었습니다. 애드센스 홈페이지에서 [광고] 메뉴 들어가서 [사이트 기준] 탭에서 내 페이지의 [수정(펜 모양)] 클릭합니다. 그 후 [자동 광고] 선택지를 켜주면 됩니다. 저도 지금까지 이리 하였고, 지금도 이리 설정되어 있지만 스킨 변경 뒤로 광고가 안 붙죠. 그래서 HTML 설정으로 적당히 붙게 할 겁니다.이제 본론이네요. 

수동으로 넣기 (HTML로 자동 위치 설정)

 수동이라고 적었지만, 글 쓸 때마다 광고를 수동으로 넣진 않을 겁니다.

- 해당 코드는 [북클립] 스킨 기준으로 작성하였습니다. 

- 애드센스 홈페이지에서 [광고] - [광고단위 기준] - [디스플레이 광고]로 수평형 광고를 하나 생성합니다.

 - 거기서 코드를 확인하고, 아래 HTML 소스에 해당 코드 정보(계정 데이터 등)를 맞춰서 넣습니다.

 - 아래 코드에서 (1) / (2) / (3)을 찾아서 기입합니다. (1),(2)는 data-ad-client 정보이고, (3)은 data-ad-slot입니다. 슬롯도 가렸습니다. 코드 위치는 </body> 위에 두시면 됩니다.

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 본문 컨테이너 내의 h2 태그만 선택
    const articleContent = document.querySelector('.entry-content'); // 본문 컨테이너 클래스
    if (!articleContent) return; // 본문 컨테이너가 없으면 종료

    const h2Elements = articleContent.querySelectorAll('h2'); // 본문 컨테이너 내부의 h2만 선택

    h2Elements.forEach(h2 => {
        // 광고 컨테이너 생성
        const adContainer = document.createElement('div');
        adContainer.className = 'adsense-ad';

        // 애드센스 스크립트 생성
        const adsenseScript = document.createElement('script');
        adsenseScript.async = true;
        adsenseScript.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=[   (1)   ]";
        adsenseScript.crossOrigin = "anonymous";

        // 광고 블록 생성
        const adBlock = document.createElement('ins');
        adBlock.className = 'adsbygoogle';
        adBlock.style.display = 'block';
        adBlock.setAttribute('data-ad-client', '[   (2)   ]);
        adBlock.setAttribute('data-ad-slot', '[   (3)   ]');
        adBlock.setAttribute('data-ad-format', 'auto');
        adBlock.setAttribute('data-full-width-responsive', 'true');

        // 광고 초기화 스크립트 생성
        const adInitScript = document.createElement('script');
        adInitScript.textContent = '(adsbygoogle = window.adsbygoogle || []).push({});';

        // 요소 조합
        adContainer.appendChild(adsenseScript);
        adContainer.appendChild(adBlock);
        adContainer.appendChild(adInitScript);

        // h2 태그 위에 광고 삽입
        h2.insertAdjacentElement('beforebegin', adContainer);
    });
});
</script>

 

※ 애드센스 / HTML 소스 내용

 

소스 별 설명

사실 크게 와닿지는 않겠지만, 부연 설명 겸 올려봅니다.

1. 코드의 역할

 이 스크립트는 HTML 문서에서 특정 본문 컨테이너(.entry-content) 안에 있는 제목 태그(h2)를 찾고, 각 h2 태그 바로 위에 Google 애드센스 광고를 삽입합니다.

2. 동작 원리

- DOMContentLoaded 이벤트 대기
 : HTML 문서가 완전히 로드된 후 실행되도록 DOMContentLoaded 이벤트를 사용합니다.
- 본문 컨테이너 선택
 : .entry-content 클래스를 가진 컨테이너를 선택하여 본문 내용을 대상으로 작업을 시작합니다.

  (본문 컨테이너를 선택 안 하면 글 전체의 h2 태그에 광고 떡칠을 하게 됩니다.)
- h2 태그 탐색
 : 본문 컨테이너 내부의 모든 h2 태그를 찾습니다. (티스토리에서 제목1이 h2태그입니다.)
- 광고 생성 및 삽입
 : Google 애드센스 광고 코드(ins 태그와 초기화 스크립트)를 동적으로 생성하여 각 h2 태그 바로 위에 삽입합니다.

 

3. 코드를 나누어 설명

1) 이벤트 대기

- DOMContentLoaded 이벤트는 HTML 문서가 완전히 로드된 후 코드를 실행하도록 보장합니다.

 

2) 본문 컨테이너 선택

- .entry-content 클래스를 가진 본문 컨테이너를 찾습니다.

 (제가 선택한 스킨에서 본문 컨테이너가  .entry-content  였습니다.)
- 컨테이너가 없으면 경고 메시지를 출력하고 실행을 중단합니다.

 

3) h2 태그 찾기

- 본문 컨테이너 내부에서 모든 h2 태그를 선택합니다.
- 각 제목 태그 위에 광고를 삽입합니다.

 

4) 광고 삽입
 [나머지 코드]
- 광고 컨테이너 생성: 광고를 담을 div 요소를 생성합니다.
- Google 애드센스 스크립트 추가: 광고를 로드하는 script 태그를 동적으로 생성합니다.
- 광고 블록(ins) 추가: 광고 표시 영역을 정의합니다.
- 초기화 코드 추가: 광고를 활성화시키기 위해 adsbygoogle.push({})를 실행합니다.
- 삽입 위치 지정: h2 태그 바로 위에 광고 컨테이너를 삽입합니다.

 

4. 사용법

- HTML 구조 확인 : 본문 컨테이너 클래스(.entry-content)와 제목 태그(h2)가 HTML 구조에 존재하는지 확인합니다.
- Google 애드센스 계정 설정 : Google 애드센스에서 광고 코드를 발급받고, data-ad-client와 data-ad-slot 값을 자신의 계정 정보로 교체합니다.
- 스크립트 삽입 : 이 스크립트를 HTML 파일의 <head> 또는 <body> 하단에 추가합니다.

 

HTML 문제 발생 시

제가 겪었던 문제와 어떻게 해결했는지 입니다.

- 모든 것에 앞서, HTML 적용 후 문제 발생 시 롤백을 위해 스킨을 미리 저장해 주세요.

  티스토리 스킨 메뉴에서 가능합니다.

- 광고가 아예 안 뜸 : 본문 컨테이너 클래스 확인

 저는 처음에 챗지피티가 알려준대로 해도 안 되어서 본문 클래스를 확인하여 수정하였습니다. 본인 블로그 글을 아무거나 하나 띄우고 관리자 모드로 확인하시면 됩니다.

 

- 며칠 된 글만 광고가 뜨고 최신 글은 적용이 안 됨

: 하루 정도 지난 뒤에 다 적용이 되었습니다. 구글 애드센스도 크롤링하는 시간이 소요되는 듯 합니다.

 

---

후기

 - 이렇게 제목1 위에만 광고가 뜨는 HTML 소스를 만들어 보았습니다. 언젠가 제가 또 실수하면 여기서 소스를 찾게 되겠죠.

- 초심자의 세팅이라 해당 광고가 얼마나 효율적으로 작동할진 모르겠습니다만, 많은 분들께 도움이 되었으면 합니다.