티스토리 본문 중간에 애드센스 광고 수동으로 넣는 완벽한 방법

티스토리는 기본으로 광고 넣는 위치를 플러그인 설정에서 지정된 위치에 넣을 수 있게 되어있다. 그런데 포스팅이 길어지면 중간에 광고를 추가로 넣고 싶을 때가 있는데, 이때 수동으로 넣는 방법에 대해 알아보자.

 

목차

1. 광고 만들기
  1) 광고 단위 선택하기
  2) 콘텐츠 내 자동삽입 광고 설정
  3) 광고 코드의 복사
2. 광고 삽입하기
  1) 붙여 넣기로 삽입하는 방법
  2) 스크립트는 한개만 필요하다.
  3) 광고가 사라지는 현상 해결법
3. 서식을 이용한 광고 삽입
  1) 서식 만들기
  2) 서식을 이용한 광고 삽입
4. 마치며

 

1. 광고 만들기

  우선 애드센스 홈페이지로 들어간후 어떤 광고를 넣을지 선택을 해야 한다. 메인화면 왼쪽에 광고를 선택하면 오른쪽 화면이 바뀌는데 여기서 상단의 광고 단위 기준을 선택한다.

  1) 광고 단위 선택하기

  애드센스는 여러가지 형태의 광고를 지원하는데, 이를 광고 단위라고 한다. 광고를 올리는 블로그나 컨텐츠에 맞게 선택하면 된다. 포스팅 중간에 넣는 광고는 디스플레이 광고랑, 콘텐츠 내 자동 삽입 광고 두 개 중 하나를 선택하자. 여기서는 콘텐츠 내 자동 삽입 광고를 선택하겠다.

 

 

콘텐츠 내 자동 삽입 광고를 선택한다.

 

 

  2) 콘텐츠 내 자동삽입 광고 설정

콘텐츠 내 자동삽입 광고를 클릭하면 간단한 설정 화면이 나온다. 여기서 제일 중요한 건 광고 단위 이름이다. 구분을 할 수 있게 이름을 정한다. 필자는 본문 내 자동 삽입 광고라고 이름을 넣었다.

그 외  제목 칼라, 내용 칼라, 배경 칼라를 지정할 수 있고 폰트도 지정할 수 있다. 원하는 대로 고친 다음 우측 하단에 저장 및 코드 생성을 누른다.

콘텐츠 내 자동 삽입 광고 설정

 

  3) 광고 코드의 복사

  저장 및 코드 생성을 누르면 화면이 바뀌면서 뭔가 복잡한 코드가 나온다. 이 코드가 광고가 나오게 하는 코드인데, 여기서 코드 복사를 누르면 클립보드에 복사가 되고, 그대로  포스팅 중간에 삽입을 하면 광고가 나온다. 코드를 복사하면 완료를 누른다.

광고 코드를 복사한다.

 

 

여기서 만약 코드를 복사하지 않고 완료를 눌렀다면 걱정할것 없다. 완료를 눌렀다면 처음 신규광고 만드는 화면이 나왔을 텐데, 여기 보면 아래에 기존 광고 단위라고, 만든 광고 단위 목록이 나온다 여기서 꺽쇠를 누르면 위의 코드 복사 화면이 나온다.

기존광고단위

 

 

 

2. 광고 삽입하기

 1) 붙여 넣기로 삽입하는 방법

  그냥 아까 클립보드에 복사가 되었던 코드를 직접 붙여넣기 하는 방법이다. 기본 모드에서는 안되고 반드시 Html 모드에서 해야 한다. 에디터의 우측 상단에 기본 모드를 html로 바꾼다. 그리고 원하는 위치에 붙여 넣기를 한다. 그리고 기본 모드로 돌아오면 아래와 같이 2개의 스크립트 상자가 나온다.

 

스크립트 상자

이 스크립트 상자는 에디터 상에만 나오고 실제 포스팅에는 이 위치에 광고가 나온다.

 

 

2) 스크립트는 한개만 필요하다.

  스크립트 내용을 보면 아래와 같이 스크립트 코드가 두 개가 들어가는데, 첫 번째 줄의 스크립트 코드는 구글 광고를 싣기 위한 준비이다 광고를 넣기 위한 기본 정보를 불러오는 기능이라고 보면 된다.

 

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

  그런데 이 코드는 블로그에서 한번만 불러오면 되는데, 이미 구글 광고를 하고 있는 상황에서는 이미 한번 불러온 것이기 때문에 다시 부를 필요가 없다. 물론 이대로 두 개의 스크립트를 넣어도 상관없으나 다시 한번 로딩을 하면 그만큼 블로그의 속도가 느려지는 결과를 보이게 된다. 그리고 뭔가 좀 더 복잡하기도 하다.

 

때문에 코드는 첫번째 줄을 제거하고 <ins 라인부터 복사해서 넣으면 된다. 이렇게 하면 아까와 다르게 아래쪽 스크립트 상자 1개만 나온다. 훨씬 보기가 좋다.

 

참고로  중간쯤에 ca-pub-xxxxxxxxx 부분과 slot="xxxxxxx" 부분은 본인의 코드가 들어가야한다. 즉 본인의 애드센스 계정에서 나온 코드를 넣어야 한다. 혹시나 위의 소스를 그대로 복사할까봐 첨언한다.

 

 

  3) 광고가 사라지는 현상 해결법

  이렇게 HTML 모드에서 광고를 삽입하고 기본 모드로 왔다가 다시 HTML 모드로가면, 코드가 뭔가 이상하다. 아마 이렇게 바뀌어 있을 것이다.

코드가 사라졌다.

분명히 <ins> 태그가 있었는데 통째로 누락이 되버렸다. 이건 티스토리 에디터가 자체적으로 코드를 최적화(?) 비슷한 걸 하는데 이때 멍청하게도 코드를 통째로 날려버리는 것이다. 그래서 종종 광고가 안 붙는다는 말이 나온다. 이걸 해결하는 방법은 <div></div> 태그이다.  <div> 태그는 사이트의 레이아웃을 정의하는 태그로  이 태그를 광고 코드 앞뒤에 삽입해주면 된다.

 

그럼 첫줄의 스크립트를 삭제하고 <div> 태그를 추가한 최종 광고 태그는 아래와 같은 형식이 된다.

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

이렇게 HTML 모드에서 입력하고 기본모드로 갔다가 다시 HTML 모드로 들어가면 줄 바꿈 대신 한 줄로 들어가긴 했지만 <ins 태그의 모든 내용이 들어가 있는 것을 확인할 수 있다.

 

 

3. 서식을 이용한 광고 삽입

광고 코드는 한번 만들면 바뀌는것이 아니기 때문에 코드만 알면 굳이 애드센스 사이트에 들어가지 않아도 된다. 그래서 광고를 편하게 넣기 위해서 티스토리에 등록하고 필요할때마다 불러올 수 있는데 이것이 서식이다.

  1) 서식 만들기

  티스토리 관리자 페이지 왼쪽 상단 메뉴를 보면 콘텐츠 그룹의 5번째 메뉴에 서식관리 메뉴를 클릭한다.

우측 상단을 보면 서식쓰기 아이콘이 있는데 그걸 누르면 게시판 에디터와 같은 화면이 나온다. 여기서 HTML 모드로 전환을 하고, 제목을 넣고 아까 최종으로 만든 코드를 입력한다. 제목은 본인이 알아볼 수 있는 제목을 넣는다. 그리고 우측 하단에 완료를 누르면  서식 등록이 끝난다.

 

서식에 코드를 넣는다.

 

  2) 서식을 이용한 광고 삽입

  광고를 삽입할 위치에 커서를 갖다 놓는다.

에디터 상단 우측에보면 기본 모드 왼쪽에 점 세 개 아이콘이 있는데, 클릭해보면 숨겨진 메뉴들이 나온다. 두 번째에 보면 서식 메뉴가 있다. 클릭하면 만들어놓은 서식 목록이 나오는데 만들어 둔 서식을 선택하면 끝난다.

이건 HTML 모드에서 하지 않아도 되고 기본모드에서 삽입 가능하다 삭제도 스크립트 상자를 클릭해서 Del 키를 이용해 삭제 가능하다.

 

4. 마치며

이거 하나 하는데 필자도 조금 시행착오를 겪었다. 저보다 초보 블로거 들에게 도움이 되었으면 좋겠다.