티스토리 블로그에 광고를 넣기 위해 먼저 콘텐츠를 정성 들여 수십 개 작성합니다. 그리고 애드센스 승인 신청 후 초조하게 기다립니다. 드디어 승인이 떨어지고! 애드센스 승인의 기쁨을 잠시 누립니다. 이제는 '어떻게 광고를 넣어야 하나...' 막막해져 옵니다. 열심히 구글링을 하면서 어느 정도 블로그 세팅을 완성해 갑니다.
보통 블로그 공통으로 넣는 태그는 스킨 편집 > html 편집 에서 하는데, 적절한 태그 사이에 잘 넣으면 문제가 없습니다. 그렇지만 글 쓸 때 넣을 수 있는 광고 코드가 자꾸 없어지는 문제가 생깁니다. 똑같이 넣었는데 어떤 글엔 잘 들어가 있고, 어떤 글엔 빠져 있습니다. 그래서 어떤 글에서는 광고가 잘 나오고, 어떤 글에서는 작은 빈 공백으로만 보이게 됩니다.
글 수정에서 html모드로 확인해보니 <ins></ins> 이 부분이 <p> </p>와 같은 걸로 바뀌어져 있습니다. 정확한 이유는 모르겠지만, 티스토리 쪽에서 글 등록할 때 혹은 보여줄 때 글 안에 있는 <ins></ins>를 없애는 것 같습니다.
구글링을 해보니 어떤 글에서는 애드센스 코드를 <div></div>나 <p></p> 로 감싸면 <ins> 태그가 지워지지 않는다고 합니다. 그렇게 해봤지만, 복불복 삭제 현상은 동일하게 반복됩니다. 저도 좀 헤매다가 예전에 공부한 자바스크립트 내용이 갑자기 조금씩 떠오르기 시작했습니다. 간단한 자바스크립트로 해결되는 걸 확인해서 공유하려고 합니다. 바로 document.write() 함수를 사용하는 것입니다.
구글 애드센스에서는 아래와 같은 코드를 복사해서 원하는 위치에 넣으라고 합니다. (디스플레이 광고 코드)
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 디스플레이 반응형 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-계정client번호"
data-ad-slot="계정slot번호"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
이 코드에서 data-ad-client, data-ad-slot 부분은 구글 계정마다 다른 숫자가 쓰여있으니 본인의 숫자를 복사해 두셨다가 아래 제가 제공하는 코드에 붙여 넣으시면 됩니다.
아래 모든 코드에서 계정client번호와 계정slot번호는 실제 본인의 숫자로 된 코드로 변경해 주세요.
Step 1.
먼저 구글 애드센스에서 넣으라고 했던 첫 번째 코드는 스킨 편집 > html편집에서 <head>와 </head> 사이에 넣어주세요. 애드센스 광고를 2개 이상 넣다 보면 겹치는 코드여서한 번만 스크립트를 불러오도록 하는 겁니다.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script>
제 블로그의 html 편집 창을 예시로 보여드릴게요.
Step 2.
글쓰기에서 <ins> 태그가 없어지지 않는 디스플레이 광고 코드는 아래와 같습니다. 이 코드를 원하는 위치에 html 모드로 넣어주세요. (기본모드로 넣으시면 저 태그 자체로 입력됩니다.)
<div>
<script>
document.write('<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-계정client번호" data-ad-slot="계정slot번호"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
참고로 html 모드는 글쓰기 에디터 상단 우측에 아래와 같이 선택할 수 있습니다.
구글 애드센스에서 권장하는 코드보다 많이 간단해 보이죠? 원리가 궁금하신 분들은 아래 문단을 읽어주세요.
<div></div> 태그로 블록을 만들고, 그 안에 스크립트를 넣습니다. 스크립트는 <div></div>로 만든 블록 사이에 <ins></ins> 태그를 써넣어주는 역할을 하게 됩니다. document.write() 함수가 그 역할을 합니다. 즉, 글 작성을 할 때 글에 구글 애드센스 광고 html 태그가 들어가는 게 아닙니다. 광고 태그 형태를 한 문자열로 저장이 되므로 티스토리 쪽에서 삭제하지 않게 됩니다. 그리고 사용자가 글로 들어왔을 때 브라우저에서 위 코드를 실행시키면서 글 안에 광고를 넣어주게 됩니다.
Step 3.
멀티플렉스 광고 코드도 동일한 형태입니다. 원하는 위치에 넣어주시면 됩니다.
<div>
<script>
document.write('<ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-계정client번호" data-ad-slot="계정slot번호"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
이렇게 글을 쓰시고 원하는 위치에 디스플레이 광고 코드를 넣어주시고, 마지막에 멀티플렉스 광고 코드까지 넣어주시면 잘 나올 겁니다. 여기에 사용된 document.write(태그가_들어간_문자열) 함수는 잘 기억해두시면 비슷한 경우에 쓰임새가 있을거라고 생각합니다. 제공해드린 광고 코드는 서식에 각각 저장해 두고 불러와서 원하는 위치에 한 번에 넣을 수도 있습니다.