티스토리(TISTORY) 글 중간에 구글 애드센스(Google Adsense) 광고 쉽게 넣기

블로그 글을 보다 보면 글 중간에 광고가 들어가 있는 경우가 있는데

최근에는 구글 애드센스 스크립트가 자동으로 광고를 넣어 주는 것 같기도 하지만

광고가 안 들어가는 경우가 더 많은데 명확한 기준은 알기가 어렵네요.

 

아무튼 저도 넣고 싶어서 방법을 알아 보았습니다.

찾아 본 정보를 바탕으로 좀 더 명확하고 알기 쉽고 편리한 방법으로 정리를 해 보겠습니다.

 

목차

 

광고 단위 수동 생성

1. 애드센스 사이트 > 광고 > 개요 클릭

 

2. 광고 단위 기준 > 콘텐츠 내 자동 삽입 광고 선택

 

3. 광고 단위 이름 입력 후 '저장 및 코드 생성' 버튼 클릭

 

4. 생성된 코드 확인

<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-0000000000000000"
     data-ad-slot="0000000000"></ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

 

 

 

티스토리 블로그 서식 저장

광고 코드를 따로 관리하면 매우 번거롭기 때문에 간단히 붙여 넣기 위해 서식으로 저장해 놓습니다.

 

1. 관리 페이지 접속 > 콘텐츠 > 서식 관리 > 서식 쓰기

 

2. 기본모드 > HTML 선택

 

3. 제목에 '글 중간 광고' 입력 및 내용에 애드센스 광고 단위에서 생성한 코드 붙여 넣기

사실 이 정도만 해도 별 문제는 없지만

태그가 3개이므로 실제 글 중간에 붙여 넣으면 덩어리가 3개가 생깁니다.

기본모드에서는 나타나지 않지만 스크립트 중간에 ins 태그가 숨겨져 있습니다.

간혹 글을 수정할 때 사라지기도 해서 지우고 다시 삽입해야 하는 경우도 생깁니다.

 

따라서 명확하게 입력될 수 있도록 수정하는 것이 더 좋습니다.

첫번째 스크립트 태그는 구글 광고 신청 시 붙여 넣은 스크립트와 중복되므로 제외했습니다.

그리고 ins 태그를 script 태그 안에서 document.write 메서드를 이용해서 직접 쓰도록 하여

에디터 기본모드에서 보이지 않는 불편함을 없앴습니다. 

<script>
  document.write('<p><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-0000000000000000" data-ad-slot="0000000000"></ins></p>');
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

이렇게 만든 서식을 글에 붙여 넣으면 script 덩어리 하나만 생겨 관리가 깔끔해 집니다.

 

4. 저장 및 등록된 서식 확인

 

 

 

 

글 작성 시 광고 서식 삽입

1. 글쓰기 에디터 > ... > 서식 선택

 

2. 광고를 넣고 싶은 위치에서 '글 중간 광고' 서식 선택

 

 

3. 광고 스크립트가 잘 삽입되었는 지 확인

 

 

 

 

저는 위의 위치에 광고를 넣어 보겠습니다.

 

4. 글 저장 후 광고가 잘 뜨는 지 확인 (실제 광고와 다를 수 있음)

원하는 위치에 광고가 잘 뜹니다.

 

다들 돈 마니 버세요~