[티스토리] 애드센스 본문 광고 안나오는 문제 완벽 해결

티스토리의 새 에디터를 사용하는 경우, 글을 수정하고 저장하다 보면 어느 순간 본문에 수동으로 삽입한 본문의 애드센스 광고가 사라지는 현상이 발생합니다. 물론 저장할 때 광고 코드를 다시 넣어주면 되긴 하지만... 보통 귀찮은 일이 아닐 수 없습니다.

 

이번 글에서는 티스토리 새 에디터에서 애드센스 본문 광고(중간 광고)가 나오지 않는 현상을 해결하는 방안에 대해서 다루겠습니다.

 

 

---

0. 해결 방안 우선 요약

바쁜 분들을 위한 빠른 요약!

서식, 또는 본문에 직접 입력할 때 <ins> 태그와 <script> 태그를 같이 <div>로 감싸주세요!

<!-- 아래 script와 엮어서 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-xxxxxxxxxxx" 
    data-ad-slot="xxxxxxxxx"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

 

---

1. 문제 현상

애드센스 본문 광고를 삽입 후 글을 수정, 저장하는 경우 광고가 사라지는 현상이 발생합니다. 보통은 광고 코드를 서식으로 저장한 후에 본문에 삽입할 텐데요, 삽입 후 글을 수정, 저장을 반복하다 보면 HTML에서 광고의 <ins> 부분이 삭제되는 때가 있습니다. 이 현상은 본문에 하나라도 이미지가 삽입되어 있으면 발생하는 현상입니다.

 

✅ 광고가 정상적으로 나오는 경우

먼저 서식으로 본문 광고를 입력한 후에 새 에디터의 HTML 보기로 확인하면 다음이 나타납니다.

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

 

✅ 광고가 사라진 후

광고가 사라졌을 때 에디터에서 HTML로 다시 확인해보면 다음과 같이 <ins> 태그 부분이 증발해 버린 것을 확인할 수 있습니다.

<p>
<script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</p>
<p>&nbsp;</p> <!-- ins 태그가 사라짐 -->
<p>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</p>

 

<ins> 태그 부분이 없으므로, 당연히 애드센스 본문 광고가 나오지 않게 됩니다.

 

2. 원인 분석

근본적으로는 티스토리의 새 에디터에서 수정을 누르고 문서를 불러올 때 이미지 치환자를 변환하면서 무언가 오류가 발생하는 것 같습니다. 수정을 누르고 에디터에서 HTML을 보면, 이미 에디터 상에서 <ins> 태그가 사라진 것을 알 수 있습니다. 즉, 다음과 같은 문제가 발생하는 것이죠.

• 본문 광고 삽입 → 저장 → 본문 광고 잘 나옴 → 글 수정 → 새로운 에디터에서 <ins> 태그가 사라짐 → 저장 → <ins> 태그가 없는 상태로 글 저장됨 → 광고 사라짐

그 현상을 좀 더 자세히 살펴봅니다.

 

다음과 같은 서식을 입력한다고 가정합니다.

 

 

저는 adsbygoogle.js는 헤더에 한 번만 사용해서 개별적인 단위에는 포함하지 않았습니다. 따라서 여기서는 서식에는 제외된 채로 설명합니다.

 

 

본문에 이미지를 하나 추가하고 위의 서식을 삽입하겠습니다.

 

서식 삽입

 

 

HTML을 확인해보면 아래와 같이 <p> 태그가 자동으로 추가된 것을 확인할 수 있습니다.

 

 

 

그러면 저장 후에 해당 파일을 다시 열어보겠습니다. (지금 상태는 본문 광고는 잘 나오는 상태입니다)

 

 

위에 보이는 것처럼 <script> 태그는 살아있는 반면에 <ins> 태그가 사라졌습니다. 티스토리 새 에디터에서 글을 수정하려는 경우, 이미지 치환자 변환 과정에서 <p><ins>... </ins></p> 부분이 제거되는 문제가 있는 것으로 보입니다.

 

서식이 아니라 직접 에디터에 광고 코드를 복사해 넣는 경우라도 수정을 누르면 다시 <p> 태그가 <ins> 앞에 붙게 되고, 수정-저장을 반복하다 보면 결국 <ins> 태그가 사라지게 됩니다.

따라서 티스토리의 새 에디터가 <ins> 태그를 날려버리지 않게 처리를 해주어야 합니다.

 

 

3. 해결 방안

위의 내용을 잘 살펴보면, <ins> 태그 내용은 증발하지만, <script> 부분은 남아있는 것을 알 수 있습니다.

<script>를 이용하여 티스토리의 새 에디터가 지우지 않는 케이스를 찾다 보니, 다음과 같이 서식을 구성하면 지워지지 않는 것을 찾을 수 있었습니다.

 

[서식 파일]

<!-- 아래 script와 엮어서 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-xxxxxxxxxxx" 
    data-ad-slot="xxxxxxxxx"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

 

즉, 아래의 <script> 부분을 <ins>와 함께 <div> 태그 안에 포함시켜 버립니다.

다행히 새 에디터가 <div>는 건드리지 않습니다. 이제는 서식으로 추가해도 <p> 태그가 붙지 않으며, 저장한 후 다시 불러와도 <div><ins>... 는 잘 살아있습니다. 서식이 아니라 본문에 직접 넣는 경우에도 잘 동작합니다.

 

반복적인 저장에도 그대로!

 

아무리 반복 저장해도 잘 남아있네요!

확인해 보시면 광고 노출도 잘 되고 있을 거예요.

 

혹시 필요에 의해서 <div> 태그 대신 <p> 태그를 사용해야 한다면 <p><span> ... </span></p>와 같은 방식으로 해주어도 됩니다.

 

맺음말

티스토리 새로운 에디터...

좋긴 한데...

자잘한 버그는 언제 고쳐주실 거예요?