티스토리 애드센스 수동 광고 서식으로 쉽게 넣기 (신버전 에디터용)

이번 시간에는 티스토리에서 애드센스 광고를 수동으로 넣었을 때 애드 센스가 정상적으로 노출되지 않는 경우 확인 방법과 해결법을 알려드리겠습니다. 

 

---

애드센스 수동입력 하는 이유?

자동 광고를 이용하시는 분들도 있겠지만 직접 광고를 손으로 입력하시는 분들도 많으실텐데요. 저 역시 자동광고로 설정했다가 요즘은 번거롭더라도 직접 광고를 입력하고 있습니다. 자동으로 설정하는 것은 상, 하단 광고만 티스토리의 설정을 이용하고 있습니다.

수동 입력의 장점은 여러가지가 있는데요. 저는 2가지 장점으로 인해서 수동 입력을 활용하고 있습니다.

 

통계 확인

자신이 넣은 광고의 종류나 위치 또는 여러 티스토리를 운영 중이라면 매체별 통계를 확인하기 쉽기 때문입니다.

가령 최상단의 광고가 얼마나 클릭율이 좋은지 CPC는 어느 정도 되는지 확인하고 싶다면, 최상단의 광고만 새로 만들어서 이름을 지정하고 확인할 수가 있죠.

 

글과 어울림

자동으로 광고를 입력하는 경우에는 글과 어울리지 않는 부분에 광고가 입력 되기도 하고, 이쯤에는 광고가 들어가면 좋겠다 싶은 부분에는 오히려 비워져 있는 경우가 많았습니다. 일부러 광고가 삽입되도록 의도적으로 빈 줄을 넣기도 하고, 사진없이 글로만 채우기도 했지만 제 의도대로 광고가 배치되는 경우는 드물었습니다. 아무래도 글을 읽는데 너무 거슬리지 않으면서도 눈에 띄는 적재 적소에 잘 광고를 배치하기 위해서는 수동으로 넣을 수밖에 없었습니다.

 

 

 

---

노출이 확인 방법과 해결

 

애드센스에서 정상적으로 광고가 나오다가 어느날 수동으로 입력한 광고만 제대로 나오지 않는다면, 편집기를 열어서 HTML로 글을 다시한번 확인해 보시기 바랍니다.

 

만약 아래와 같이 코드의 내용이 바뀌어 있다면 정상적인 애드센스 광고 코드가 아니기 때문에 당연히 노출이 안됬겠죠?

아마 신버전 에디터를 사용하시는 많은 분들이 아래와 같이 코드가 바뀌는 현상을 겪으셨을 것이라 생각됩니다.

 

<script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<p>&nbsp;</p>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

원래 정상적인 코드는 아래와 같이 나타나야 합니다.

 

<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-클라이언트ID"
     data-ad-slot="XXX"
     data-language="ko"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

왜 코드가 바뀐 것일 까요?

그것은 에디터의 문제인데요. 애드센스를 삽입하고 완료를 누르면 정상적으로 광고가 노출이 됩니다. 그러나 발행한 글을 수정하게 되면 다음과 같이 코드가 바뀌게 됩니다.

 

<script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<p><ins class="adsbygoogle" style="display: block; text-align: center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-클라이언트ID" data-ad-slot="XXX" data-language="ko"></ins></p>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

어떤게 문제인지 찾으셨나요?

<ins> ... </ins> 앞 뒤로 <p>가 삽입 되어 있는 것을 보실 수 있습니다. 원래 코드에는 없던 것이었죠. 그 것 외에는 전부 같은 코드라서 슬쩍 보면 정상적으로 코드가 잘 삽입되어 있는 것처럼 보이게 됩니다. 그러나 저 상태로 글을 다시 발행하게 되면 <p><ins>... </ins></p>는 <p>&nbsp;</p>로 바뀌면서 그냥 한줄 띄기가 되어버립니다.

 

 

해결 방법

글을 수정할 때마다 광고 코드를 새로 삽입하고 발행한다면 너무 힘든일이겠죠?

간단한 코드 수정으로 문제를 해결하실 수가 있는데요.

바로 삽입할 코드를 <div> 태그로 묶어주시면 됩니다. <div> 태그는 가상의 레이아웃을 만들어 주는 태그인데요. 에디터도 별도의 레이아웃으로 인식하여 더이상 <p>태그를 입력하지 않게 됩니다.

다음은 태그를 적용한 예시입니다.

 

<div>
<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-클라이언트ID"
     data-ad-slot="XXX"
     data-language="ko"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

 

위와 같이 코드를 수정한 뒤 서식에 저장해 두면 더욱 사용하기 편리하겠죠?

서식에 저장해 두면 HTML 편집 모드로 변경할 필요 없이 아래와 같이 서식을 직접 삽입하여 광고를 넣을 수 있습니다.

서식 만들기는 관리자 메뉴에서 콘텐츠 - 서식관리 에서 가능합니다.

DIV로 묶어 두었기 때문에 발행 후에도 코드 변경이 없는 것도 확인 했습니다.

서식 삽입하기

 

저장한 코드를 삽입하기

 

HTML 편집 모드에서 확인한 코드

 

 

---

검색해도 방법을 못찾아서 제 스스로 알아낸 방법입니다. 기존 글의 광고들을 다 수정할 생각을 하니 암담하네요... 새로 애드센스를 시작하시는 분들은 미리미리 알아두시고 저와 같은 실수를 반복하지 않으시길 바랍니다.

제가 알려드리는 방법이 모든 상황에 적용되는 것은 아니므로, 제 방법으로 해결이 안된다면 다른 방법을 적용해 보시기 바랍니다.

간혹 지난 번과 같이 티스토리 전체가 애드센스 광고 노출에서 제외되는 상황도 있으므로, 다른 티스토리 블로그도 방문하여 일시적인 노출 차단인지 확인해보는 것도 필요해 보입니다.

지금까지 티스토리에서 애드센스 광고가 노출이 안되거나 사라지는 문제에 관한 확인 방법과 해결법을 알려드렸습니다.